• X

    Best CSS Frameworks to create Responsive website design

    By in Design

    Bluehost hosting

    As the demand of responsive website had started creating a lot of buzz, with every blog owner have started transforming their blogs to be compatible for all screen sizes, just because the major part of traffic comes from Smartphone and tablets. Understanding the growing demand, developers have given us many good responsive WordPress themes, recently even WordPress also re-designed the complete admin area to be the mobile first design.

    I will be writing a series of article based on HTML and CSS for those who already have the understanding and working knowledge of CSS and HTML.  Today we will be learning about some of the best Open source CSS Frameworks available in the market for free.

    Now let’s understand CSS Framework first:

    CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.   Many experienced frontend developers and even companies have done the groundwork and provided us a collections of valid CSS3, with a grid system and all the components which are flexible that  fits on different screen, making  our work a lot more easier than ever.

    CSS frameworks are best way to build website faster than ever before, to overcome with lots of challenges and deadlines of the project.   There is a huge list of CSS framework and grid system available and here I have compiled some of the best and free once.

    Free & Popular CSS Framework

    1.  Bootstrap 3

    bootstrap 3 css framework Best CSS Frameworks to create Responsive website design

    Bootstrap top’s my list and I personal recommend if you consider using any CSS Framework or grid system.   I used bootstrap on various projects and also recently build techDfuture thesis skin.   Bootstrap is a very famous front-end CSS framework built by Mark Otto a designer from Twitter presently working for GitHub and Jacob Thornton is presently working for Obvious, started by Twitter co-founder Biz Stone and Evan Williams.

    Bootstrap is originally built using LESS (CSS Preprocessor) and also available on SASS (SCSS) is a mobile first CSS Framework with a huge and a strong committee.  To download bootstrap and docs visit Getbootstrap.com

    2.  Foundation 5

    foundation 5 css framework Best CSS Frameworks to create Responsive website design

    After bootstrap, foundation is my second favorite CSS Framework from the house of Zurb.com a web design agency.  Foundation is built on SASS (SCSS) is the most flexible and advanced CSS framework available today, and have done quite a few projects.    Like Bootstrap 3, Foundation is also a mobile first CSS Framework.   To download Foundation and docs visit Foundation.zurb.com

    3.  Gumby 2

    gumby2 css framework Best CSS Frameworks to create Responsive website design

    I started my framework journey with Gumby and today with the power of SASS Gumby 2 has evolved, though it is not as strong as Bootstrap 3 or Foundation 5 but if you are looking for some simple modular CSS Framework then Gumby is for you.  Gumby Framework 2 is developed and maintained by Digital Surgeons.

    Unlike Bootstrap 3, Foundation 5 & Pure CSS, Gumby Framework 2 is a not a mobile first but it is a responsive CSS framework.  To download Gumby 2 and docs visit gumbyframework.com

    4.  PureCSS

    pure css framework Best CSS Frameworks to create Responsive website design

    Frankly speaking I have not used PureCSS, in-fact it’s a new member in town and lightweight CSS framework which use the most popular yui libraries unlike Bootstrap 3 and foundation 5 which are built using LESS & SCSS.  PureCSS have already started creating the BUZZ with its simple and slick responsive grids system.  To download PureCSS & docs visit purecss.io

    5.  Skeleton

    skeleton css framework Best CSS Frameworks to create Responsive website design

    As the name suggest Skeleton is a lightweight responsive boilerplate based on a simple grid system, which provides a perfect foundation to build responsive website rapidly.  Skeleton is created by Dave Gamache a designer and developer working at medium.com, previously employed with Twitter.com.  To download Skeleton & docs visit Getskeleton.com

    Every CSS Framework or Grid System has it own pros & cons, totally it depends on the size of project and the features required.  I would always recommend using any of the CSS pre-processors like SASS, LESS or Stylus to create your own customized framework.

    Also see:

    In my next article we will be learning on how to create a 12 column flexible grid system using CSS.  In meantime I would like you to share your experience of any CSS Framework or grid system that you use and it’s pros & Cons.

    This is a guest post by Imran from TechDFuture. If you would like to write for ShoutMeLoud, check our guest submission guidelines.

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    Imran has written 1 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 15 comments… read them below or add one }

    Nitin

    What about Cofeecup and Microsoft visual studio 2013/12

    Reply

    Imran Shariff

    Hi Nitin,

    If I am correct Cofeecup is an HTML Editor, I use sublime Text 3 it is an awesome IDE at a very little cost. However Mostly I don’t write CSS, but I i write SASS or SCSS to generate my css, I really don’t like the auto generated css from text editors.

    Reply

    Vikas Yadav

    Really, some of the useful links in this articles that are provided due to the increase in the popularity of mobile friendly website. I have heard a lot about Bootstarp3 and Pure CSS Framework. Thanks a lot@shariffrb for sharing this interesting links with the shoutmeloud readers.

    Reply

    Imran Shariff

    Hi Vikas.

    I am a great fan of Foundation and I really love to work on it, but bootstrap 3 is just awesome and inclusion of SCSS it is my favorite, SCSS is beautiful to write valid css3, if you are looking forward to use boostrap I would suggest you to use LESS or SASS version instead of just just using bootstrap css directly.

    Reply

    Subbareddy

    Thanks imran for suggesting Less and sass instead of bootstrap 3.

    Reply

    Marjorie Turner

    Hello there, I have only discovered the page along with thought about regardless of whether this is actually the best framework to utilize? Any suggestions?

    Reply

    Balazs Hende

    Hello Marjorie, my personal favorite is Foundation. I’ve started with Foundation 3 when I had to create my first responsive layout. I am addicted to Foundation however I’m going to try Bootstrap in the near future.

    Reply

    Imran Shariff

    Hi Marjorie

    Bootstrap 3 is the most popular framework followed with Foundation, there are many other framework like blueprint, Yaml etc. It is mostly depends on your project requirements.

    If I don’t want to use any of the components with comes with Foundation and bootstrap, then opt for PureCSS or skeleton framework is good to use. If you looking to bootstrap or foundation in your projects then I would suggest using SASS or LESS so that you can disable the components which are not required to use.

    Reply

    Gaurav H

    great work and thanks for sharing these important frameworks with us. I’m using BootStrap3 and I’m loved it because it’s a great front end CSS framework really helpful.

    Thanks
    Gaurav Heera

    Reply

    Rohit

    Wooww..!!! Great List.. Thanks for providing..!! this is what i was looking for :)
    Actually its a trend now to have a mobile friendly website.. Also it helps you to earn more money..!! I knew only about Bootstrap and believe me it is just awesome..!!!
    Now surely going to try the new ones (New ones for me actually)..
    Thanks @shariffrb

    Reply

    Tirtha Ojha

    Great post, thanks for providing the list of css framework. It is really helpful.

    Reply

    Nilantha Madhushanka

    Thanks Shariffrb

    Wow! A great post about the Best CSS Frameworks. You provide a good and expert reviews about the frameworks. Great!

    Reply

    rakesh kumar

    dear Shariffrb, i have been using bootstrap right now but i am little bit worried about the size it ads to our website besides that the way this css create three different files to assemble everything is also a worried issue if you really love to boost your page speed and as much as i know about web-development people love to embed everything in a single file. Do you know any such framework where we can do all these things, waiting for your kind attention on this issue.

    Reply

    Imran Shariff

    @rakesh

    I knew, using the compiled files of Boostrap will make heavy for a website coz you it will be having all those thing which is not required for a website. That where I would suggest you to start using LESS or SCSS then you will be seeing thing differently. However you can build your own framework using SCSS + COMPASS for creating a responsive grid system you can use SUSY. If you required any help or assistance from my side I am always available here.

    Reply

    Thach Pham

    Thanks for great list, all of these are very popular to create a Responsive website.
    But if you only want to get Responsive grid, semantic.gs is the best solution because it is very lightweight and flexible to use.

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `