MENU

Pure CSS vs Bootstrap

Pure CSS Vs Twitter Bootstrap

Image Source

If you are a web developer or designer you may have noticed that it is becoming really easy to make a responsive layout, because making your own media queries is being required less and becoming less common. Thanks to Twitter & Yahoo we have two hugely advertised options that most designers and developers will go with. Here I am going to compare the two of them and what I personally feel the pros and cons are of them.

Pure CSS

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. Source

Pros

  • Light weight and can simply be added using just a style sheet.
  • The css is available via CDN
  • Saves time
  • The traditional grid idea that we have come to get used to
  • Great explanations of how grid works and other features
  • Can easily be made to look unique

Cons

  • Small variety of templates available
  • Not as large of a community using it that can provide support
  • Extremely simple which means less options
  • FontAwesome not automatically built in

Bootstrap 

Bootstrap calls itself the sleek, intuitive CSS framework that focuses on mobile first. Bootstrap is one of the more robust frameworks with multiple CSS, JS, and font files to get you started. Source

Pros

  • It saves time
  • The css and js is available via CDN
  • It uses jQuery
  • Easy to make responsive design, without even really thinking about it
  • Traditional grid idea which results in rapid front-end development
  • Great explanations of how grid works and other features

Cons

  • Not following proper technique. An example: lots of DOMs that have a lot of classes in them
  • It can be really bulky
  • Websites start to look the same
  • It uses jQuery
  • It can possibly collide with your existing set up

At the end of the day I think it all depends what you are looking for. Both offer free layouts, Bootstrap has more than Pure, however it can often have more of a “cookie cutter” feel to it. Personally I started with Bootstrap after making my own media queries and now I use Pure CSS. I feel it is lighter, and easier to use and manipulate. This layout on this blog is made out of Pure CSS, my portfolio is my own Media Queries, and Adriano Lawn Care & Snow Removal is made using Bootstrap (which I will eventually change).Of course HTML5 Boilerplate is still the most popular and I really need to learn this to become competitive.

So my question today is what CSS Framework do you use? Do you still create your own media queries?

COMMENTS: 8
  1. July 01, 2015 by Denny Scott

    Well done miss.

    I actually haven’t heard of purecss. These days I mostly have to play around with ionic, but semantic-ui was a nice one I toyed with for a bit. It’s intention is to let your write your css in the most “english” way possible. Looks pretty nice as well!

    Looks like purecss is using flexbox under the hood. If you haven’t got the chance to play around with flexbox, pretty cool stuff. Vertical alignment, all that really needs to be said.

    Keep it up! 🙂

    • July 01, 2015 by Domenica

      Just went to check out ionic, looks amazing if I find some time this summer I am totally going to play around with it, I’ve read an article about flex box on CSSTricks. Thanks for the support, hopefully you like the other stuff I post, I’ve add your blog to my Feedly account.

  2. July 02, 2015 by Michelle

    I’ve been hearing a lot about responsive layouts and they interest me greatly. I wish I knew code and anything such thing, but it’s nice and I enjoy learning and trying to understand new things, you know?

  3. July 03, 2015 by Tara

    Oooookay. I am reaching that stage in life where technology is now something I am not understanding. I now know how my parents feel XD

    I fell behind on coding and whatnot, so when I finally decided to get a new layout for my blog, I felt so overwhelmed that I just hired Raisa to create my current, responsive layout XD; Yes, it’s cheating, but I really don’t have the time or the energy to sit down and figure it out myself 🙁

    • July 03, 2015 by Domenica

      That’s the beauty and curse of this world, we have to constantly keep moving forward. I believe media queries have been around for at least the past 4 years for sure, that’s when I started to notice it more and more (at least tutorials I mean). I think the face that I started learning from scratch when I first found out about queries helps for me to understand the underlying code for these two cheating ways of building a grid. But yes I agree, if it was not for my degree, I would have fallen behind as well.

  4. July 03, 2015 by Alissa

    My theme is a responsive one but I don’t know how to make them from scratch. You’re lucky you know how.

    • July 03, 2015 by Domenica

      Hi Alissa! If google did not require websites to be responsive so they could move up on search ranks, I do not think I would be converting my blog over! Takes a little bit of learning but its like learning CSS to customize parts of a layout, the more you play around with a mock layout the more you learn how to manipulate it to get what you want.

Sorry, the comment form is closed at this time.

Sorry, the comment form is closed at this time.