I need help with a CSS framework.

[nixnerd]

So,
I’ve tried some of the frameworks out there and I’m just not loving them for some reason. The grids seem pretty confusing to me. A lot of them are not responsive out of the box (which I understand is really hard to do in a generic fashion… as I’m attempting it right now) and they seem to not be as customizable as I’d like… at least not in a really quick and dirty sort of way.

So, I’m rolling my own framework out. It’s something like flat ui meets bootstrap meets flexbox. Normally, I don’t use frameworks but I find myself working on a few projects that need RAPID prototyping in a way that never breaks and doesn’t need a ton of fine-tuning.

The basic premise is this:

A responsive framework that will nicely arrange whatever photos or text you give it, in a way that looks totally custom, i.e. scratch built.

Also, it needs to be fully cross-browser compatible.

Most of this is not a problem for me. The default is a float-based grid system that uses modernizr to detect if flexbox is supported, if it is, the grid then makes use of flexbox for the nice little enhancements one gets… like faux DOM order and flex-grow… stuff like that.

HERE IS THE PROBLEM: I find myself making a bowl of div soup. This is not my intention… it’s just that in order to make everyone nice and tidy no-matter what content is in a given column or module, things get a little dirty.

Are all these ridiculous divs going to destroy my semantics? Or should I be fine as long as I use proper tags inside the divs?

The only real negative I see is that in its current state, the markup is a TAD hard to read. But… you gain the easy of building that simply wasn’t there before. Tradeoffs…

[nixnerd]

I kind of view this framework as something akin to Legos. Basically, someone should be able to “snap” the pieces of their website together, without really touching the CSS. All they do is bang out the markup and it’s fully styled, right off the bat.

Now, if modifications are needed, one can make those in the “_mods.scss” partial as something akin to a child theme.

[nixnerd]

I’m realizing this is kind of unavoidable. I’m only like 3 levels deep on divs at the most. I’ll use sections, articles, objects, images, videos etc where I can and try to apply classes to them and try to do some fancy display work… but at the end of the day, I might have to have some crazy divs.

[__]

I all but abandoned floats (for “not-actually-floating” layout, I mean) after realizing what can be done with inline-block elements. (Especially in conjunction with box-sizing and relative positioning; table-* display properties are actually very useful too.)

I’m still not really “in to” flexbox.

edit:

Never seen this before, but it articulates what I love about inline-block.

[Senff]

If you make your own framework, you can of course set your own rules. Who cares if there are too many divs except for yourself?

Not saying that no one cares, but what I mean is, do it for yourself first and foremost. However, if you’re set out to reinvent (and significantly improve) the wheel, then yes, maybe you can have too many divs, and maybe it’s better to use modern HTML5 tags. Actually, there’s no reason NOT to use articles, headers, sections, etc.

Having said that, some of the existing frameworks out there don’t seem to care all too much about being too clean with divs and end up with ridiculous markups. Sometimes there’s a reason behind it. I mean, Bootstrap and Foundation weren’t just slapped together — they were thoroughly tested and improved in order to come up with the best product that caters to as many people as possible, so they can’t be “bad” or something.

I’m not a fan of frameworks myself. Most of the time it’s bloated and has too much unnecessary stuff because I only actually use 20% of it’s possibilities.

I second @traq’s hesitance to use flexbox at this time.

[nixnerd]

Literally 2 minutes before you posted this… it dawned on me that floats are not the way to go for the non-flexbox version.

Then, it dawned on me that I’m just trying to be cool. Instead, I should be pragmatic.

Let me explain:

I’ve been working with NOTHING BUT flexbox for the last 2 weeks. And after this period, I don’t think there is a single thing it can do that is all that compelling. Sure, it can manipulate the DOM order, or at least how it’s displayed, and it can do flex-grow, which is kind of cool but it’s purely stylistic.

So, I decided that I’ll be using a combo of inline-block and display: table|table-cell|col

If you implement these correctly, it behaves exactly like flexbox.

Flexbox negative: Really hard on laptops graphically. If I open a flexbox page on my lappy that makes any use of flex-grow, it’s like instant fan burst.

[nixnerd]

FYI: I don’t EVER use frameworks and I’m not a huge fan. But… it’s nice to have a prototyping tool that can make fully-functioning sites in a fraction of the time.

However, if you’re set out to reinvent (and significantly improve) the wheel, then yes, maybe you can have too many divs, and maybe it’s better to use modern HTML5 tags.

I’m not setting out to re-invent the wheel per se, but I do think there are edge cases that bootstrap doesn’t cover. That’s my domain. I’ll put it on github and create a page. If people like it, great.

Actually, there’s no reason NOT to use articles, headers, sections, etc.

I said something confusing. My bad. It’s not that I’m NOT going to use these tags. I wouldn’t dream of it. But with a float layout, I needed lots of generic containers, which I can’t use real semantic tags for. But… now I’m abandoning that layout.

[nixnerd]

What’s worse?

float layout? or deal with those pesky spaces between inline-block elements?

The only good way I’ve found to get rid of the spaces between inline-block elements is to use negative margins. This is totally a personal feeling… but I think negative margins are filthy and try not to use them whenever possible.

[Senff]

I think there is absolutely nothing wrong with negative margins. It’s valid, it’s not hacky, it’s just….not used often.

This is a 5-year old article about that but a lot of it (the theory behind it, mostly) still applies: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

[nixnerd]

This is totally a personal feeling… but I think negative margins are filthy and try not to use them whenever possible.

Perhaps I was a bit harsh. It just feels to me as though I’ve failed at solving the ‘puzzle’ when I use negative margin. I always feel like there’s a cleaner way. That’s not to say they can’t be used.

I was reading this article:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

And I was trying to get my inline-block elements to behave. Chris says to use margin: -4px;, well, that didn’t work. Mine happened to be 5px. What’s the big deal about 1 pixel? Well, my entire grid breaks if it’s one pixel off with inline-block.

Now, Chris DOES SAY that it depends on a few things like the size of the container… but I won’t be able to control the size of the container on some projects (really long story). However, I’m wondering how much it depends on the browser? I don’t want a broken layout because of it.

So, at this point, floats seem safer. The devil you know right?

I do like that article and I think they’re legit. But, they just don’t feel right to me. I can GENERALLY accomplish what I need with some other method. However, I’ve got some h2 tags that absolutely need negative margin on the left… for whatever reason.

[Alen]

We shouldn’t be afraid to include additional HTML elements if they help create more robust, flexible, and reusable components. Doing so does not make the HTML “unsemantic”, it just means that you use elements beyond the bare minimum needed to markup the content. — Nicolas Gallagher

[nixnerd]

OMG Alen that’s the best quote ever. Made my day.

[__]

OMG Alen that’s the best quote ever.

+1

float layout? or deal with those pesky spaces between inline-block elements?

What I’ve done is completely separate “layout” elements from “content” classes. For example, a row is a row, and never an article that displays like a row. This seems a bit unsemantic at first, but it’s very helpful, both for styling and for integrating content-management-like features.

So, the immediate parent of all those inline-block elements will be a container element (which contains only the desired inline-block elements).

.container { font-size: 0; }
.container > * { display: inline-block; font-size: 1rem; }

Adjust as needed; but that’s what I base a lot of stuff on.

(BTW, you can also get rid of them by making sure there is no whitespace between elements in your markup, but this is not always convenient.)

Then, it dawned on me that I’m just trying to be cool. Instead, I should be pragmatic.

Hells yeah. It’s great to know how to do cutting edge stuff, what is ideal, and so forth. Necessary, even, to grow as a developer. But it’s not what you use to create something production-oriented.

[nixnerd]

Hells yeah. It’s great to know how to do cutting edge stuff, what is ideal, and so forth. Necessary, even, to grow as a developer. But it’s not what you use to create something production-oriented.

Yeah… I always get too excited. A lot of these features are over-hyped and blogged about WAAAY too much. So, they become ubiquitously anticipated and for what? Flexbox doesn’t really solve ALL my problems, at least not in a way that’s compelling.

Anyway, so you’re saying you have 1 container that wraps EVERY inline-block element? Like a 1:1 child to parent ratio?

[__]

No; more like what you might think of as a “row” in a grid. All of its children will be “columns”.

codepen

[Author]

Posts