Give help. Get help.

  • # January 1, 2013 at 7:54 am

    I have been testing a few CSS Frameworks on some smaller projects (Foundation and Bourbon-Neat, will also try Susy). I do like Bourbon-Neat better because of the “cleaner” html code – not a lot of divs with “columns-xyz”. This way is more understandable for me to handle the layout in the css.

    But, is there any recommendations on a good html (and CSS?) boilerplate to start from? Like H5BP. I guess you always need some supporting files, like Normalize, Modernize, jquery… So how do you start a new project? Any best practice?


    # January 1, 2013 at 8:12 am

    The best boilerplates are the ones you make yourself. I grew tired of having to use other peoples stuff so built my own based on the best parts of each one that I liked.

    If you can take the time to do it it’s definitely worthwhile.

    With new customer projects I rarely use a boilerplate anymore, even my own – I build out a custom grid for each customer based on the designs and styling of course is bespoke for each.

    The only common threads are stuff like Modernizr, common HTAccess settings and JQuery, so really the only repeating/boilerplate style setup you have should be files to include, rather than HTML/CSS grids and pre-determined classes and ID’s.

    # January 1, 2013 at 9:37 am

    I use a modified version of skeleton – it’s a nice grid system and you can modify it easily to create something a bit more bespoke for yourself.

    # January 1, 2013 at 9:46 am

    @jurotek ‘s answer is probably the best. Start with the basics and build up from that to your design.

    There are other options such as Bootstrap by Twitter which includes LESS, a ton of jQuery functions and responsive design, or you could go for Foundation by Zurb which is fully responsive and includes all their own plugins too. There is also Skeleton which comes with basic styling options and responsive layout. Skeleton would probably have to be my favorite as it only gives you the basic needs which you can customize to accommodate your designs and it’s easy to nest div elements without getting too confused. (Fluent code writing with proper spacing and indents help overcome this problem of confusion too, though)

    These three are good basic start out points. Nothing wrong with using them, but you’re limited to design options unless you make drastic changes across the CSS that will match your own CSS properties.

    There are some beautiful designs out there that all use the three frameworks, but you’ll feel better knowing that you built your own ways that you can always rely on for future projects. The important thing about doing it yourself is it’s good practice for future reference.

    # January 1, 2013 at 11:02 am

    this post by chris coyier changed my entire outlook on using boilerplate code to lay out grids:

    the control you get from writing it all yourself easily makes up for the time it takes to write it.

    # January 1, 2013 at 11:10 am

    @dfogge – Definitely on the money – instead of a lengthy and complex grid for our new site, I simply created an uber simple framework;

    .grid {
    float: left;
    margin-right: 1.9%;
    padding-right: 1.9%;
    @include breakpoint(mobile) {
    margin-right: 0;
    padding-right: 0;
    min-height: 1px;

    .full {
    width: 100%;
    margin-right: 0;
    padding-right: 0;

    .one-quarter {
    width: 22.105%;

    .one-half {
    width: 48.05%;

    .one-third {
    width: 30.73%;

    .two-thirds {
    width: 65.3%;

    .last {
    margin-right: 0;
    padding-right: 0;

    @include breakpoint(mobile) {
    .one-quarter, .one-half, .one-third, .two-thirds {
    width: 100%;
    float: none;
    clear: left;
    .one-quarter + .one-quarter, .one-quarter + .one-half, .one-third + .one-third, .two-thirds + .one-third, .one-third + .two-thirds, .one-half + .one-half, .one-half + .one-quarter {
    margin-top: $gutter/2;
    padding-top: $gutter/2;
    # January 1, 2013 at 11:19 am

    that’s beautiful, andy. it really is comforting knowing EXACTLY what your code is doing, and the only way to achieve that is to write it yourself.

    hm, now that i think about it, the only ‘boilerplate’ css i’m still using is the [normalize]( reset.

    # January 1, 2013 at 12:06 pm

    Thank You all for your suggestions and insights. Much appreciated and very helpful :)
    It’ so easy to be blinded by all the features a framework have… But, it’s very true that it’s much easier to understand (and change) the code you have written by yourself.

    Have to re-read Chris post about grids.

    Thanks again,

    # January 1, 2013 at 9:59 pm

    Just a little tip with creating your own grids. Usually you’re going to be floating grid elements left, but you may leave one empty for later.

    Suddenly your sidebar is where your main content was going to be, even though you’ve put the main content div in there.

    That’s because it has no height, so the right side elements come over to the left. Tip is thus, add min-height: 1px; to your grid item and then get no surprises.

    # January 3, 2013 at 5:18 am

    Thanks Andy for the inside tip!

    # April 8, 2013 at 12:59 am

    @magnus_vb Hello, I’m new here but seeing your question I decided to give my own opinion.

    On every site I use several CSS Boilerplates.

    “Skeleton 1.2”, to achieve great responsiveness in designs.

    “CSS Reset” (by Eric Meyner), since I think it the most rightfull reseting code

    Finally, an “HTML and CSS template” I my self wrote that has all the basic structure of every site, and even all the default styles every site has and must have.

    [ Plugins I consider best on what they are supposed to do are “Camera” by Pixedelic, to make great desktop and mobile slideshows and “WordPress” is also a great CMS and blogging system ]

    Well, this is all. Just to share! Luck!

    # April 8, 2013 at 2:49 am

    @AndyHowells, the thing I don’t like about the method you mentioned is this: If you use the class .one-quarter at desktop, it makes sense, but at a tablet size, it may be 50% and at mobile, you have it set to 100%. The class naming doesn’t seem semantic to me that way. Why not create a more “generic” class that doesn’t specify a size and change it at every breakpoint? I typically will use a class called something like “.group”, as an example, then set the sizes based on the media queries. This way, every classed section called “.group” doesn’t specify anything other than that the sections it wraps are grouped into a clump that will fill a certain % width. Hope this makes sense, but it works really well and keeps the class meanings the same at all breakpoints. You can get surprisingly more detailed using just one class name than you might imagine. For super complex layouts, you may need to create a second class to go alone with it, although I’ve never had to do that. Just target correctly and it works like a charm!

    # April 8, 2013 at 5:46 am

    Class names don’t have to be semantic although you make a reasonable point.

    I do have one question…if you have a class of .group that has its width set in a media query, do you have another class of .group-2 for another group with a different width?

    Perhaps I’m not getting it.

    # April 8, 2013 at 6:07 am

    > @dfogge – Definitely on the money – instead of a lengthy and complex grid for our new site, I simply created an uber simple framework;

    Lovely code Andy, really. But as long as it involves figures like `22.105%`, `48.05%` and `30.73%` I’m not sure we can still talk about an “uber simple” thing.

    # April 8, 2013 at 4:29 pm

    @paulie_d: Here’s a very quick and messy example of what I was talking about. Of course, it’s better when you have a real layout to plan so it’s not as messy as this. Most of the time you can create grids with the existing div or p tags, but sometimes you may want to create a class (such as .group), so you can get more complex. My designs aren’t usually overly complex, so I normally just use divs to create basic grids.

    [CodePen Example]( “”)

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.