Grow your CSS skills. Land your dream job.

New CSS responsive framework I’m working on

  • # April 23, 2013 at 7:09 pm

    Hey guys,

    First time poster, long time podcast listener…

    I’m currently putting together a simple responsive CSS framework for myself, after seeing too many that were just over complicated for a good “starter” platform.

    I have this up on Github for anyone to view/use/do as you will: https://github.com/deeve007/responsive-grid-system

    A benefit of this one that many don’t do is enable many different widths and number of columns across a row, even if your column items then cascade onto new rows.

    At the moment I have two different methods I am looking into, and could use some opinions/tips/criticisms of either of them to help me identify which would be the best one to use going forward.

    example.html (can be viewed online here: http://zavahost.com/responsive/example.html) uses a more common “float” method.

    The only issue arises if a column is of a different height, and then perhaps a column that should on the next row doesn’t clear properly.

    You can see that issue in this example: http://zavahost.com/responsive/example-broken.html

    So trying to address this, I thought I’d look at using “inline-block” instead of float, and came up with this solution: http://zavahost.com/responsive/example-block.html

    As you can see, even with the very tall column, the next row still breaks clearly below this one.

    I’ve tested across a few different browsers and it seems to work just as well as the float version, but solving this issue. Wondering if anyone else can see any issues, or maybe has some other suggestions/ideas?

    Cheers.

    # April 23, 2013 at 7:19 pm

    @deeve007 – were you a frequent poster on Freelance Switch? I have a feeling I recognize the username from there!

    I’ll check it out later, though my voice on third-party frameworks has been heard loud and clear across the forum already haha.

    # April 23, 2013 at 7:28 pm

    Yep I was, before they slowly fell apart over time… ;)

    And happy to have your loud voice heard on mine mate, this is all kind of new to me, hence why I’m trying to keep the code as simple as can be, not an “all things for all purposes” framework.

    Cheers.

    # April 24, 2013 at 12:20 pm

    Nobody else? Bueller?

    # April 24, 2013 at 12:38 pm

    For the same reason you mention (elements wrapping to next row nicely even when they are unequal heights) I’m using inline-blocks as my main layout tool too. It avoids the need of needing row wrappers so the markup stays clean as well. The only issue I can see might be the way you eliminate the space between columns, will that work with any font or do you need to tweak the number?

    # April 24, 2013 at 1:30 pm

    That’s something I need to test more thoroughly, I found this solution after an extensive google search, not too much out there about addressing this issue. Do you have any other ideas/suggestions in that area?

    I’m also looking to add a simple (“simple” is the key to what I want for this) typography framework to this at some stage, have found http://typeplate.com which looks okay, any suggestions in this area?

    # April 24, 2013 at 1:31 pm

    And I will have to do some more testing about the whole “row” div thing, as you say for some layouts it wouldn’t be necessary at all.

    # April 24, 2013 at 2:35 pm

    https://github.com/deeve007/responsive-grid-system/blob/master/css/responsive-gs-12col-block.css#L43

    Remember to help out our older IE friends by adding:

    zoom: 1;
    *display: inline;

    …just below the inline-block declaration. http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

    # April 24, 2013 at 3:01 pm

    > And I will have to do some more testing about the whole “row” div thing, as you say for some layouts it wouldn’t be necessary at all.

    I would even say for most layouts it wouldn’t be necessary. You can set the negative letter-spacing on any parent (and reset it back to normal on any sibling).

    I don’t know about typography but something that generates some nice vertical rhythm and typographic scale would be nice, not much more than that. Maybe some default optimizations like `text-rendering: optimizeLegibility;` and `-webkit-font-smoothing: antialiased;`.

    # April 24, 2013 at 3:56 pm

    I wouldn’t say “most”. Think of a 2 column layout, main column plus sidebar. That main column may have multiple columns itself, which would have to be inside some sort of wrapper in case it was longer than the sidebar. I think this kind of layout is pretty common.

    And thanks TheDoc, though this is working in ie8 and above, and not too fussed about supporting under that (but can’t hurt to add one line perhaps).

    # April 24, 2013 at 6:08 pm

    Yes, but I can imagine the main column would already be some kind of more semantic element. I was talking about extra markup, besides it would be a column wrapper, not a row wrapper ;)

    # April 24, 2013 at 7:31 pm

    Ahh, I understand, but you would still need to add .row class to that element, or write new CSS to target the new element. Either way principle remains the same.

    # April 25, 2013 at 4:53 am

    Have added some base typography and basic elements to the framework, would love anyone’s input on what I’ve done:

    http://zavahost.com/responsive/example-styles.html

    # April 25, 2013 at 7:05 am

    I’d actually suggest that you base typography on [Typeplate](http://typeplate.com/), unless you have reasons to not agree with their approach to it.

    # April 25, 2013 at 1:38 pm

    I found it a lot of code while still missing some basics out actually, but will have another look to see if I can clean it out a bit.

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

You must be logged in to reply to this topic.

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