MENU

5 CSS Frameworks You Should be Using

CSS FrameworksIn order to survive the computer science industry (regardless of the sector you are in) you need to learn quickly and become flexible. Today there are many resources out there that are meant to make your job easier in, especially in areas you should not have to worry about. One of these is CSS frameworks. CSS frameworks are primarily there to get the basics all down in a simple pre-prepared set of files. As a community we use these frameworks to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. In every framework now a days, they at least contain a grid, and your basic body elements

In my search for web development jobs I have noticed a pattern. There are always certain frameworks, and pre-processors that every company favors. They tend to ask in the skills section that you have a basic understanding, and can easily learn as you go of XYZ framework. So to help you jump ahead of the competition, I have listed off the top 5 CSS frameworks I have noticed the most in job postings.

  1. PureCSS.io – As I already discussed in my article about PureCSS vs Bootstrap, Pure is a simple framework that only includes 1 file, the style sheet. Pure prides itself in being one of the smaller frameworks weighing in at only 4.3KB for the one file. The basic idea of it, is flexbox. PureCSS is a lightweight, modular framework – written in exactly pure CSS. Pure is perfect for people who just need the bones, or specific parts for their layout. No JavaScript needed.
  2. HTML 5 BoilerPlate – Used to build both sites and web apps HTML5 Boilerplate is described as a bundle to help designers to get started with the new standard by offering a professional front-end template that allows you to create a fast, robust and adaptable site with a set of HTML5-ready features and elements. It is an open source product. They have instructions but if you do not need the documentation there is a completely stripped down version. The best part, you can choose what you need, and not have extra bulk you do not need.
  3. Skeleton – Defined by the website as, “A dead simple, responsive boilerplate”. It truly says it all. It is literally the bare bones of it all. It is perfect for those people who are embarking on smaller project, and do not need the whole fancy package of frameworks like Foundation or Bootstrap. It has less than 200 lines of CSS, and is basically your grid, with a few bare styled elements.
  4. Semantic UI – An ongoing project to make websites more semantic. It utilizes natural language principles. This makes the code more readable and understandable. The overall structure of this framework’s logic and classes surpasses other in the industry.
  5. Mueller – If you love to build media queries and having basically complete control than Mueller is right for you. It is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Another really popular one I talked about in a previous article is Bootstrap. However it is basically completely pre made, and can be considered bulky by many. If you understand however how to overwrite some of the CSS, and how their grid system works, you will be comfortable in almost all of the CSS frameworks I have listed.

So to my fellow web designers & developers, which framework is your favourite, which one do you hear most of, and which one does your workplace use? I would love to hear in the comments below!

COMMENTS: 10
  1. August 19, 2015 by Holly

    I have no idea what framework my company uses but that’s because I haven’t started yet! I’m familiar with Bootstrap but I don’t really like it that much.

    • August 22, 2015 by Domenica

      I find bootstrap as the lazy mans way, and some may get mad at me for saying it. In my opinion it is basically every pre-made website you can think of. It is good to understand since it is so heavy, and that’s why I included it, plus the fundamental logic is a good thing to understand. But yes I agree. I built one site with it actually, http://adrianols.ca and never again will I use it.

  2. August 19, 2015 by Georgie

    I have heard of Pure and Bootstrap being used quite commonly. HTML5 Boilerplate is one of the early ones. I personally don’t like using frameworks because I would rather write everything myself from scratch. With Bootstrap, sometimes I end up never using its features.

    Another CSS framework I am aware of is Scally: https://github.com/chris-pearce/scally

    • August 22, 2015 by Domenica

      Georgie, that is because you come from the era where frameworks were not even around! I started learning to code slightly before frameworks became a thing as well. My lab instructor actually talked me into learning about them and how to use them, mainly because he thought I was really odd for enjoying making my own media queries, but in the long run, it is useful for a job. They really are alike logic wise and they teach you the logic that everyone is trying to normalize to make the web a better place! 🙂 Scally sounds cool. I starred it to check it out later.

  3. August 19, 2015 by Nancy

    It’s definitely useful to be flexible and adaptive to changes because the technology field is always evolving to new things. I still see some companies use outdated methods, and I just ask “why????”. I really like Skeleton, it’s simple and didn’t define a bunch of variables for you beforehand. On the other hand, I noticed that Bootstrap works better in mobile mode; but maybe that’s just me. It’s definitely a bit bulky because they have a lot of predefined variables.

    • August 23, 2015 by Domenica

      Bootstrap is definitely a hit or miss. I find those who focus on back-end development LOVE it because they do not have to worry as much about front end. However I feel being a back of many trades is the best way to go. Skeleton is one I want to try next. I feel like it may be a little easier than PureCSS.io since it has been around slightly longer. The government office here still use VBA, and not the most recent version either. It can be very frustrating, but the company has to spend money to change things, and even upgrade some employees education which can all be very costly. So I see why they often have such out of date stuff, but in the long run it is completely unfair to us newcomers, to the workforce.

  4. August 22, 2015 by Adrianne Marie

    I recently learned Foundation and it’s a lot “cleaner” and easier to understand than Bootstrap IMO. Thing is, it sounds like Bootstrap is one of the “industry standards” that most are using or are used to. One of my goals (hopefully) is to build some WordPress themes using Foundation. There aren’t that many.

    I’ll try the others too. I’m particularly interested in Skeleton and PureCSS.

    • August 23, 2015 by Domenica

      I’ve lightly looked into Foundation, and I can definitely agree with you on the first point you made Adrianne! I feel (like I stated in early replies to comments) that Bootstrap is good for concepts but extremely overrated, and more of the time, not useful because there is just so much bulk. However it is great to understand, because of the advantages you can get from simply looking into it and understanding logic. I did not want to include it on the list, but at the same time it is so important in the industry now that you cannot go without at least acknowledging it exists and what is does. Thanks for the comment! I will be posting JavaScript Frameworks this week on Wednesday, I would love you hear your thoughts!

Sorry, the comment form is closed at this time.

Sorry, the comment form is closed at this time.