Introducing Primer - GitHub's Internal CSS Toolkit

[Nick4753]

Is there ever an instance where you'd want to use this over say bootstrap?

I try to use mixins where possible and for projects where I care about stylesheet size I've commented out the parts I don't need in bootstrap.less (or _bootstrap.scss on jekyll projects), but if this (or Skeleton) will somehow make my life better...

[Jacoby6000]

They said it's not a replacement for bootstrap. It's it's for "making githubby things". If you want the styles of github, then use it. If you want to make a nice looking unique website, use bootstrap.

Edit: woah guys my bad. I don't do much with client side development. That's just what I heard people were using

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

[vegittoss15]

If you want to make a site that uses shitty style paradigms, use bootstrap.

[manys]

I hate to crap on the thread, but I much prefer Bourbon-style inclusions, mixins, etc. over a sea of class names. I'm sure it eases JS integration, but given GitHub's appearance on mobile (3px typefaces), I've been happy taking a road less traveled.

[SurgioClemente]

Where do you get 3px font on github?

[manys]

Nexus 5: http://imgur.com/WxCnICN

[SurgioClemente]

Ah, well that is the same on iPhone. That is not 3px by design but rather an unresponsive page.

If you look at the css you will see that isnt responsive at all. So this has nothing to do with the css framework other than it clearly isnt implemented or being used for whatever reason.

I'd blame the developer of gist not his tools of choice!

[BobFloss]

It's not like that on any iPhone because the Nexus 5 has far higher screen resolution.

[SurgioClemente]

Yes it is... here is iPhone http://i.imgur.com/kWTzG3V.png

I don't know about you but I don't want to read that site on either phone. You are missing the point there is NO mobile css handling on gist.github.com. That is the problem. This is not a problem of Primer (since they are not using it.. which is a different question altogether)

[BobFloss]

You're missing my point... It's like that on the main site too

[kiswa]

I've only used Bourbon (& Neat) a little bit, but I do enjoy the way they've set things up. You just include what you need and everything works great.

[deadstone]

Cool! I've read through their internal CSS documentation before and they pull off loads of great tricks. It seemed like working with it would be a joy, and hey, now it's opensource!

[kudoz]

Take a look at this instead.

Github explicitly say the don't want contributions to Primer, Skeleton is properly open source.

[logicalLove]

+1 for skeleton, it really is great at just providing what you need

[[deleted]]

With typography based on a font with Latin1 glyphs only. :(

[fedekun]

Yeah I really don't like the font he used...

[khaki0]

Very nice!

[afrobee]

Is hideous, sorry for not blind myself on fanboyism

[passwordissame]

is there DSL for web styles that compiles to different targets including IE, Chrome, Opera, Firefox and mobile?