Responsive CSS Frameworks: What to use?!
The 960 Grid systems are the way to develop a faster websites. At the mean time, developing websites should support mobile browsers while mobile usage is increasing. So, supporting all screen sizes called: Responsive web.
I am not writing this to talk about this, i am writing it to give me details and features about several Grid Systems that mostly common. This will help you decide, what to use? and what is suitable for you.
I know that there are more, but this what i know so far.
Something else, the list below is not sorted. All are awesome CSS systems.
Its an awesome CSS framework. Its a 960 Grid system and worked really well. It contains 2 CSS files:
- bootstrap.css : This is the main CSS file that contains all CSS styles and Grid system classes.
- responsive.css : Adding this file to your web page, will make simply supporting all screen sizes (responsive)
It’s not only CSS, you can add more:
- Components: Like dropdown menus, buttons, navigation, pagination, alerts, progress bar and more. See them here: Bootstrap Components
- You can also customize Twitter Bootstrap for your needs, check out what you can customize here.
This is a light weight Grid. Skeleton CSS is a Responsive 960 Gird system. This is good for upgrading and creating custom CSS framework based on this.
It contains these files:
- base.css : It contains resets for most HTML elements.
- skeleton.css : Contains the Grid system CSS classes and responsive styles.
- layout.css : This is an empty file, where you can put your own code.
- You may also download 960 Grid PSD file.
Previous versions of Skeleton was containing more features and components. I am using this in my Blog’s CSS
- Is another lightweight Grid system. But its a good CSS framework. It has the following features:
- Bootstrap styles for Forms, Buttons and Tables.
- Support Modernizr, Selectivizr, Responsive type tester and Design tester.
- LESS and SASS mixins and variables.
- Design ‘atmosphere’ (colour, texture and typography) separated from layout
- Upstarts for the things we build every day.
I am still not familiar with this framework, but i am working on that.
This is another lightweight Responsive Grid system. It has these features:
- Modernizr support to detect browser features.
- Have any number of columns.. I think you will not need more than 12 columns.
- Scale to any width, because it uses percentages.
- Its easy to use.
- Files are separated. I think they will be better if they were joined together.
I want to end my post with this because i started it with an advanced CSS framework (Twitter Bootstrap). This one is also and advanced one. Both, this and T. Bootstrap are recommended for web applications.
This one has the following features:
- Flexible 12 Grid columns.
- Has add-ons for more functionality. Like: HTML Templates, icon fonts and more.
- Has a good documentation.
- Could be customized before downloading. So, you can use part of it.
There are many awesome CSS frameworks, but i mentioned here responsive frameworks that I am familiar with.
Let me know what do you prefer and what you are familiar with 🙂