Grow your CSS skills. Land your dream job.

I need help with a CSS framework.

  • # July 1, 2014 at 7:05 pm

    Content usually varies in height so it’s good to add vertical-align:top property to inline-block class selector to make sure that our columns align properly

    NIX
    # July 2, 2014 at 8:14 am

    No; more like what you might think of as a “row” in a grid.

    Oh, ok gotcha. I tried the row approach a few days ago with flexbox but it comes with it’s own set of problems for me. The MAIN issue like you said is that it feels verbose and unnecessary at first and may actually be unnecessary for my purposes. But… you do gain a great deal of granular control. Like, you can control each row’s padding more finely because you can use pseudo selectors like :first-of-type and :last-of-type or :first-child and :last child more easily.

    NIX
    # July 2, 2014 at 8:16 am

    Thanks @jurotek… this is one area where flexbox sort of shines, in that vertical alignment is really, really easy. Vertical centering might be the coolest thing flexbox can do.

    But, like you said, there are other methods with inline-block that work almost as well with much less trouble.

    # July 2, 2014 at 9:16 am

    I’m curious what “div soup” looks like to you. Do you have an example? Based on some of the themes I’ve seen out there where the content is nested like 7 div’s deep, I’m not imagining it to be that bad.

    I personally abandoned floats also – I never liked the need to clear them with another div or with hacks. Everything is inline with an addition to help IE see it as well.

    I don’t think you need to worry about whether or not you “just made another framework”. The reason that most of us don’t like frameworks to begin with is that they come with a lot of extra baggage. If there was a framework that looked exactly the way I’d put something together, I’d use it. Most of us have some kind of framework we’ve built that is lightweight.

    NIX
    # July 2, 2014 at 9:40 am

    @Josh You’re right, I’m probably being too picky. I’m NOWHERE NEAR 7 divs deep. That’s absurd. I’m like 3 deep, 4 at the most. I just like to be as clean as possible and in this case, I’ve been as clean as possible. But, it’s not possible to get a super robust and modular framework, without taking various cases into account.

    The basic structure is that there is a .grid(parent), a .col(child) and a .module(content). Now, I’ve largely done away with the .module because sometimes it’s just not necessary. I can just add the .col class to a p or img tag.

    So, it’s basically just a grid with columns. That’s it. The magic is in the @mixins though. Every element makes absolutely no assumptions about what you want. No hard coded padding, widths, units… nothing. And I’m trying to create a robust system to easily modify breakpoints. The idea is that it’s more or less responsive out of the box… which is really hard but I think I’ve almost got it.

    # July 2, 2014 at 12:44 pm

    I don’t think that’s too deep at all. I can’t imagine anything else unless your trying to actually classify the elements within, which is something no one would ever want to do. That’s pretty similar to mine – container > content > columns (as necessary).

    How are you addressing the responsiveness? What I’ve done on my basic “framework” is I’ve defined the columns to collapse accordingly with the media queries. So 1/3, 1/4 and 2/3 shift to 100% width block elements at around 800, leaving the 1/2′s. Then those go to 100% at around 500. Just curious how you’re tackling that.

    NIX
    # July 2, 2014 at 1:02 pm

    I’m largely doing media queries, as there’s not REALLY another way with a generic framework. Each column is set to a percentage based on it’s class. So, that handles the fluid/flexy part. But then, I use media queries to change column sizes/stack based on how big the screen is relative to the grid size. Does that make sense?

    # July 2, 2014 at 1:09 pm

    Yeah sounds like we’re doing the same thing for the most part.

Viewing 8 posts - 16 through 23 (of 23 total)

You must be logged in to reply to this topic.

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