Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other I need help with a CSS framework.

  • This topic is empty.
Viewing 8 posts - 16 through 23 (of 23 total)
  • Author
    Posts
  • #174300
    jurotek
    Participant

    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

    #174356
    nixnerd
    Participant

    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.

    #174357
    nixnerd
    Participant

    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.

    #174361
    Josh
    Participant

    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.

    #174363
    nixnerd
    Participant

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

    #174390
    Josh
    Participant

    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.

    #174395
    nixnerd
    Participant

    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?

    #174398
    Josh
    Participant

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

Viewing 8 posts - 16 through 23 (of 23 total)
  • The forum ‘Other’ is closed to new topics and replies.