Grow your CSS skills. Land your dream job.

Boilerplates, preprocessor. To use or not to use? Which one?

  • # December 28, 2012 at 3:33 pm

    Let me preface this by saying that about six months ago, I got back into front end development. Before that, it had been a few years since I had a job doing it. Responsive pages weren’t nearly as important as they are today. I feel like there have been a lot of changes since then and I’m trying to catch up. I mean, CSS3 and HTML5 were still up in there air for whether or not they would be supported.

    When it comes to responsive(maybe I’m just lazy) but I don’t see a point in reinventing the wheel. I’ve noticed some things like foundation, skeleton, and Twitter’s bootstrap which supply you with some pretty nice boilerplates for starting a design. Is it a good idea to you use those as a base? If so, which one.

    Next, I get to preprocessors. I mean, sass was around then, and I knew a little, but I didn’t really know anyone that used it, so I didn’t really bother to implement it. Is there one that’s kind of pulling ahead right now. I’m looking to get into using one, but I’d like to know that there will be some long term support. Any suggestions as which ones to look at? I bought codekit, to try and learn my way around it. I just haven’t picked one.

    Any insight would be wonderful.
    Thanks,
    Kevin

    # December 28, 2012 at 3:49 pm

    I say definitely on the preprocessor if it is more than a single static page. As far as the templates go I have had a hard time jumping onto that. The one I have considered the most is [inuit.css](http://inuitcss.com/ “”) by Harry Roberts. I like this one because it doesn’t really start to design for you it is just a barebone and it is easy to use what you want and leave the rest.

    Using SASS with Codekit or Scout for SASS (windows) is not just a good way to make CSS more reusable it can easily and automatically output production ready code.

    # December 28, 2012 at 4:10 pm

    I started using [HTML5 Boilerplate](http://html5boilerplate.com “”) as a base starting point, and I love it..as far as preprocessors, I use [compass/sass](http://compass-style.org/ “”) and it’s simply amazing.. My favorite part about preprocessors was actually mentioned by [Stu Robson](http://twitter.com/StuRobson “”) in a recent email from [Responsive Design Weekly](http://responsivedesignweekly.com/ “”).

    And I quote:

    > Not really something necessarily to do with RWD but pre-processors are killer. The one key feature that does apply to RWD is there ability to bubble up media queries. So you can have your media queries within your selector rather than separately. This makes for quick refactoring and allows for true RWD where you’re designing for the content and not the device because you can just create a quick media query for any item. The verbose nature of this is easily crunched up when you gzip your CSS too.

    # December 28, 2012 at 4:57 pm

    With regards to a boilerplate my recommendation would be something like [1140px Grid](http://cssgrid.net/) – it stays completely out of the way in terms of styling and just handles a responsive grid, nothing more.

    It will encourage you to do everything but the columns which is best for avoiding using preset styling a lot of boiler plates come with.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".