If you’re in web development, you might have heard of a framework called Bootstrap. Of course...
Six Facts About Responsive CSS Frameworks
Since working with Evgeniy on our recent article, Five Challenges of CSS Front-End Development, I became interested in exploring CSS frameworks for myself. So I downloaded Zurb’s Foundation, taught myself a little Sass, and built a really basic responsive site. After learning a bit firsthand, I wanted to find out more about the history of CSS frameworks, the core concept behind CSS frameworks, and how Bootstrap and Foundation compare when used for actual production – so I sat down with Sergey Slepokurov and Evgeniy Polovniy (two of our front-end Nerds) to talk about responsive CSS frameworks. We focused on Bootstrap and Foundation: the two most popular frameworks today, and the two that we’re actively using here at WebiNerds.
Here are six things I learned about CSS frameworks.
1. Bootstrap and Foundation appeared a year after the first iPad.
CSS frameworks began appearing in response to the proliferation of new mobile devices around 2010-2011. These devices offered new screen sizes – both in terms of inches and in terms of pixels – than what we had typically seen in the past. Notably, in 2010 the first iPad was released as well as the first iPhone with Retina display (iPhone 4). Before modern iPads, tablets, phablets, Android devices, and iPhones we could design websites solely for desktop browsers, meaning we could design for just one screen type.
When the mobile web began taking off, however, it quickly became evident that we were inventing the same solutions again and again in order to build mobile-friendly sites. CSS frameworks alleviated the need for redundant coding, allowing us to build a solution once and then use it over and over.
Read also: Which PHP Framework Should I Choose?
Here’s a brief timeline with highlights along the journey from HTML through Retina displays, Quad HD and HTML5.
As we can see, from 2006 on the sizes and resolutions of displays on mobile devices and notebooks have grown at an incredible rate. Devices that used to be suitable only for reading text messages or typing the occasional email can now be relied on for the majority of our daily web browsing, not to mention serious photo and video editing.
The two most popular CSS frameworks – Bootstrap and Foundation – were both released in 2011, one year after the launch of the iPad. They both started as company projects: Bootstrap is a project of Twitter, and Foundation is a project of the product design company Zurb. Today (as of 2016) there are a great many CSS frameworks available, but they are all based on the same core concept.
2. The core concept behind all CSS frameworks is the grid.
The main idea behind all CSS frameworks is the layout grid. A grid is typically divided into 12 columns (but it doesn’t have to be). And if you want to build a custom website with your own unique design, then you only really need a simple responsive grid. Grids help you structure the elements of your site.
A simple 940px 12-column grid.
All additional features that complete frameworks provide on top of the grid – such as forms, buttons, and other components – rely on some kind of default design. In order to achieve a custom design with pre-built components, you therefore have to override defaults. Because of this, pre-built components that come with frameworks like Bootstrap and Foundation are most useful when designing a UI without a custom design language. Naturally, pre-built components speed up the workflow for developers, which is why they’re popular. But styling Bootstrap forms to match your site’s custom aesthetic may actually take more time than building the same functionality with your own styling from scratch.
Grids are at the heart of frameworks, but frameworks also have to determine how to display those grids. In other words, CSS frameworks have to determine the type of device that a user is browsing on. This is accomplished with media queries, and device information – determined by those queries – dictates how the grid should be displayed on a particular screen. Bootstrap and Foundation approach media queries and breakpoints in their own unique way; they offer essentially the same functionality, only with a different hierarchy of rules.
With regard to media queries, the main difference between Bootstrap and Foundation is that Bootstrap is focused first on desktop, and only secondly on phones and tablets. Foundation, on the other hand, is distinctly mobile-first. In other words, Bootstrap moves from larger to smaller, while Foundation moves from smaller to larger. Within both of these frameworks you can set detailed rules that apply only for specific window sizes, but the default rules differ.
3. There are many CSS frameworks, but Bootstrap and Foundation can handle basically everything.
There are a lot of different CSS frameworks out there – tens, even hundreds of them – and they each have a slightly different focus.
In addition to Bootstrap and Foundation, Evgeniy has tried Skeleton and 960 Grid System. Unlike the former, however, Skeleton and 960 Grid System are not complete frameworks; they’re only grid systems. If absolutely all you ever need is a grid, then you could consider Skeleton, 960 Grid System or a number of other options.
The current versions of both Bootstrap and Foundation allow you to use only their core grid component, however – letting you forget about all additional components like forms and buttons. Therefore it’s quite possible and practical to develop with Bootstrap or Foundation even if you don’t want all the bells and whistles.
While it’s necessary to experiment a bit with various grids to get a feeling for the CSS framework landscape, in the end Bootstrap and Foundation can meet all your actual production needs.
4. Bootstrap and Foundation are ideal for different purposes.
Bootstrap is probably the most popular framework, so a lot of developers start with it. It’s especially good for beginners because there’s a really large community around it; on Stackoverflow there are many questions and answers about Bootstrap, and so it’s easy to get help or find someone who’s already had the same issue.
While it may be easy to learn, however, some argue that Bootstrap sites look like cookie-cutter images. Admittedly, this is often true. The Bootstrap framework offers so many pre-built components for forms, tables, buttons, images, and so on. And naturally, when many sites are constructed from the same components, they’ll exhibit some similarities.
This ‘cookie-cutter’ problem is why there are so many free and premium Bootstrap themes to give sites a unique feel. But changing colors and fonts only goes so far. No matter what theme you buy, a trained eye can always detect when a site is built on Bootstrap.
It should be noted that themes are only ever used in production when we aren’t implementing a custom design. If we’re working with a custom design then it’s best to customize from the start, so we would never start developing with a theme. Themes can be good for backend sites, however, such as the admin side of an application. In most cases, an admin panel doesn’t require a unique UI.
For designers, Bootstrap is often more difficult than Foundation because it has a lot of UI restrictions. On the other hand, Bootstrap is easier for developers, as it includes more pre-built functional components. Naturally, designers and developers can create anything they like from scratch, and so neither of these frameworks limits what you can potentially build; they simply cater to different demographics.
Evgeniy started working with Foundation about two years ago, and now exclusively uses it. He started to use Foundation because in Bootstrap there were many excess components that he didn’t actually need for his projects. Foundation offered everything he needed, only in a simpler package. Additionally, he likes how Foundation provides more options for precise block placement. For example, in Foundation you can more easily center a medium-6 block and leave empty space on the sides.
5. CSS frameworks can be used for wireframing.
Because CSS frameworks make it easy to lay out the structure of a website, they can be useful for more than just final production. In fact, frameworks can be relied on even at the earliest stages of project development – for wireframing.
Both Sergey and Evgeniy have experience wireframing with CSS frameworks. According to the ‘old’ development method, you begin with wireframes created in some UX design tool like Photoshop or Axure. Then you use a framework to build the wireframed design from scratch – that is, to create a mock-up. After you’ve created a mock-up, only then do you construct the actual website. However, the first step in this process can now be eliminated altogether.
Evgeniy uses Foundation for wireframing. By starting off with a framework, he builds a front-end that can be polished up and used in the final product. But to make this work – until recently, at least – you needed to be an experienced designer who is also experienced with frameworks.
Luckily, today there are a lot of new-ish online tools that let you prototype wireframes with CSS frameworks using drag-and-drop. Take JetStrap, for example, which lets you prototype a site using pre-built Bootstrap components. The buzz around these tools is evidenced by a flood of recent articles along the lines of “10 Best Prototyping Apps for Bootstrap.” Just keep in mind that when a new version of Bootstrap is released, tools like JetStrap will take some time to move to the latest version.
6. CSS frameworks are becoming more customizable and flexible.
CSS frameworks have been improving over the past few years. Of particular note is the move of both Foundation and Bootstrap to flexbox – and extending frameworks using SCSS makes flexbox even more powerful. Today you can customize your own framework by easily overriding default values for grids, row sizes, and so on. You can extend Bootstrap and Foundation to override all their settings exactly as you like using SCSS/ SaSS.
In practice, this means that you can create your own custom grid system with Foundation or Bootstrap by simply modifying some code. Perhaps you want 24 columns or maybe 7 columns instead of 12? This kind of flexibility is now available thanks to flexbox. Enabling flexbox is still optional, however, and doing so will break functionality with older browsers. Therefore, the ability to use flexbox in production work is dependent on a client’s needs.
CSS frameworks come in many shapes and sizes, but they all revolve around some form of grid layout. Most significantly, CSS frameworks help you to structure the contents of your website and make your site responsive. Foundation and Bootstrap, the two most popular frameworks, are powerful enough for all of your front-end development needs – but there are many other frameworks as well that offer smaller footprints and fewer pre-built components if you’re looking to construct a minimalist site or to build everything from scratch. Modern CSS frameworks can even be used for wireframing, and are becoming more customizable and adaptable over time.