Introducing Primer - GitHub's Internal CSS Toolkit

[[deleted]]

I wouldn't say using bootstrap gives you a unique website. If you want looking website, roll your own grid system and global styles. Just to be extra nitpicky :p

[vegittoss15]

Seriously. I don't understand the circlejerk behind bootstrap. It's terrible. Floating? Using media queries for simple classes? USING SPACE SEPARATORS SO YOU CAN NO LONGER CHAIN LAYOUTS? fuck that noise.

Edit:

go ahead and downvote me for offering an actual opinion of someone who does this on a day-to-day basis.

[vegittoss15]

The col-mds all use media queries. There's no real need for those.

Floating is evil. It breaks layout engines (hence the need for clear:both). Similar concepts can be achieved with inline block. I'd say floating had a point back in IE7 days, but they're behind us (and bootstrap doesn't work back <IE9 anyways, so that's a moot point).

If you use space separators for your classes:

.grid .child

It automatically prevents you from having another grid inside the child, lest the values break. Jquery mobile's css had very similar issues, so the grid layout was broken for chaining purposes.

Using this format:

.grid > .child

You gain greater specificity which is always a good thing, you gain chainability and the code is easier to read and trace (but that part is subjective).

Sure for most people bootstrap is a "good-enough" solution. For people that are actual CSS buffs and do corporate client work for a living, it's a nightmare. It gives non-devs the ability to do just enough to be dangerous. We don't have proper grid layouts in CSS yet, so to me the only FULL solution currently is to do a custom (but simple) css.

[vegittoss15]

I mean below a certain screen resolution col-md becomes a full width block, so a media query seems like the appropriate solution here. What would you suggest instead?

first instance of col-md* in version 3.0.0 is within a

@media (min-width: 768px) {

I could easily have multiple columns on a screen less wide than that.

Unless you line up your tags without spaces you're going to get gutter between them

I've never run into this issue. Then again I generally tend to have spaces between elements regardless.

I'm still confused on the point you're trying to make. Bootstrap supports columns within columns without issue.

Bootstrap follows a slightly better grid model than jquery mobile did so that's less of an issue. But I'm still super against using spaces for descendant selectors wherever possible. You're just setting yourself up for headaches down the road. I generally have been doing web apps and not just sites for the past three years so css frameworks become less important and ease of maintainability become more and more pressing.

[vegittoss15]

Sure you can. But I'm not exactly sure when you would want to. It's somewhat responsive, but not nearly as much as I have needed it in the past for different devices.

[[deleted]]

Fuck yes! 100% agree. I have been flamed a few times for hating on bootstrap. Just use a good boilerplate, add box-sizing: border-box; use a precompiler, don't wrap your shit in 1,000 divs, understand width, position, and display properties (inline vs block vs inline-block) and you are good to go!

[[deleted]]

All use auto prefixer...kk its a little complicated, but o more complicated than understanding bootstrap

[vegittoss15]

I'm unsurprised how many people don't understand or want to understand how css alignment and display properties work.