18 ms·
Primer – CSS toolkit and guidelines that power GitHub
- ChikkaChiChi 12y ago@mdo is one of the maintainers. Is this a spiritual successor to Bootstrap?
- RazorCrusade 12y agoFrom the blog post: "Primer isn’t another large front-end framework, though. It’s rather limited in functionality and isn’t intended to replace something like Bootstrap. It will always be GitHub’s internal toolkit first, designed to help build GitHubby things. That said, we love to share." That was kinda my take away, too. It's pretty minimalist overall.
- lbotos 12y agoIt looks to be pretty tied to git terms: http://primercss.io/states/ http://primercss.io/states/
- techpeace 12y agoIndeed. From the announcement blog post: "It will always be GitHub’s internal toolkit first, designed to help build GitHubby things. That said, we love to share." [1] [1]: http://markdotto.com/2015/03/23/introducing-primer/ http://markdotto.com/2015/03/23/introducing-primer/
- hswolff 12y agoRelated blog post: http://markdotto.com/2015/03/23/introducing-primer/ http://markdotto.com/2015/03/23/introducing-primer/
- armandososa 12y agoI loved the tooltips implementation. I'd like to grab just that.
- baddox 12y ago> Primer is the basecoat... That's an interesting confusion within the analogy.
- magic_beans 12y agoThey seem to have missed the opportunity for a great pun here.
- smt88 12y ago"Primer is the primer" is accurate but unclear. I wonder if most people even know what primer is, especially considering most paints are now supposedly "self-priming".
- BerislavLopac 12y agoI like it, as it's much more semantically oriented than Bootstrap. But why do the buttons still need the "BTN class?
- blackant 12y agomdo mentions this in his recent talk: http://jqueryuk.com/2015/videos.php?s=mdo-ular-css http://jqueryuk.com/2015/videos.php?s=mdo-ular-css tl;dr; It makes for cleaner grep results.
- oneeyedpigeon 12y agoWithout having watched the video, that sounds like a weak justification at best. I'm sure best practises could be ignored in many scenarios with the effect of slightly more greppable source, but that would normally be counterproductive. I guess we need better command-line search tools, really, ones that understand the structure of the file they're inspecting beyond a line-by-line representation.
- mdo 12y agoThat is one of the reasons—you can view the slides also at https://speakerdeck.com/mdo/at-mdo-ular-css https://speakerdeck.com/mdo/at-mdo-ular-css if you don't want to watch the video. I like to use prefixes and base classes. It's faster for browsers to paint, leads to fewer rules overall, reduces selectors, and helps prevent unnecessary overrides.
- oneeyedpigeon 12y agoMy aesthetic senses have always led me to a preference for button {} over .btn {}, class="foo bar" over class="foo-bar", etc. But I realise I'm in the minority and I need to get pragmatic. The slides have convinced me to check out the video tomorrow, which will be a start. codeguide.co also looks well worth checking out. At the risk of derailing the conversation further, what's the reason for leaving a trailing slash out of self-closing elements? I recognise it's optional, but including it gives you the option of XML-parsing your HTML; is there a non-aesthetic advantage?
- bshimmin 12y agoSometimes I hate web development. Comparing the buttons (http://primercss.io/buttons/ http://primercss.io/buttons/) between Chrome and Safari on my Mac, the text is a pixel further up in Chrome and thus looks slightly wonky to me. Here's a screenshot of the two side-by-side (Chrome left, Safari right), zoomed to 500% in Photoshop with a 1px grid: http://imgur.com/dhZrxFH http://imgur.com/dhZrxFH
- baddox 12y agoI use Chrome, and GitHub's button text alignment has always bugged me. I chuckled when I noticed that this CSS framework of theirs has the same issue.
- sorahn 12y agoThe real problem here is using vertical paddings. One solution I've found to getting vertical heights the same across browsers is to use no vertical padding, and large line-heights.
- mdo 12y agoAbsolutely no problem with vertical padding—this particular problem is a Chrome bug.
- mdo 12y agoThis is due to a Chrome bug with how they render Helvetica. We could hack it ourselves, but it's a regression on their end and it'd just be more work for us.
- mantasm 12y agoI'm surprised at the lack of semantic meaning in most popular grid frameworks. Years ago, we moved away from layout with tables because <table><tr> is a horrible way to separate presentation from content but <div class="two-thirds columns"> is just as bad.
- currysausage 12y agoReminds me of @hsivonen's wonderful "HOWTO Spot a Wannabe Web Standards Advocate": https://hsivonen.fi/wannabe/ https://hsivonen.fi/wannabe/ Edit: Curious why this is being downvoted. Is humor (intelligent humor in this case IMO) really that frowned upon at HN? Or did someone think I was calling the parent commenter a "Wannabe Web Standards Advocate"? (I certainly wasn't. Quite the opposite.)
- deleted 12y ago[deleted]
- k__ 12y agoAFAIK you shouldn't get this problem if you use the sass/less sources of these frameworks directly. But I didn't find any good tutorials on this. Also, I don't know how this should change the html-elements needed by stuff like the bootstrap components.
- smt88 12y agoNo tutorial needed. 1. Create your HTML using only semantics. If you're tempting to create a class called, say, "column" or "left-container", stop yourself. If you have multiple items that will be presented the same way, give them the same class. For a shopping site, for example, a class might be "product". 2. Use a CSS preprocessor to inherit non-semantic classes from your framework of choice into the classes you created in step 1. You might use the framework's classes as they are or modify them a little.
- k__ 12y ago(didn't down-vote) This may work for simple cases. But what about stuff like the Bootstrap components, which consist of many HTML-elements?
- pearjuice 12y agoWith this, the updated rankings are in: new JavaScript frameworks this month: 24 new CSS frameworks this month: 21 Will front-end developers be able to catch up to JavaScript's score or is it going to be the third month in row JavaScript gets more frameworks out there than CSS? With less than 10 days left on the clock, avid front-enders will have to give everything they have to release at least 3 more frameworks. And as you know, unless it is a MAJOR update according to the semver standard, current framework updates don't count! .satire {}
- mdo 12y agoThe number of frameworks of any kind has no bearing on the willingness of more people to share their knowledge and experience with the open source community. I'd write 10 more CSS frameworks if it helped just one more person make something they loved on the web.
- beatboxrevival 12y agoThis just seems kinda boring - visually and technically. Do we really need another CSS toolkit with an almost replicated feature set. Every year, I think github is going to somehow release a long awaited product that blows me away with all the talent they have. Every year, I'm surprised at how little they change, and how all the opportunities that seem obvious slip to the wayside.
- mdo 12y agoMight be boring to you, but it isn't to us. This is (part of) our job :). When I stopped to think about it, there was honestly no reason to not open source Primer. If the goal of open source is the share and learn and improve, then what does it matter what we release? Especially as open source?
- mrottenkolber 12y agoNot to piss on the pie BUT: The GitHub CSS breaks when one sets a minimum font-size (as required for high DPI screens). Heck every web page based on bootstrap or most "modern" CSS frameworks breaks the same way. How about you "CSS experts" get your shit together and start respecting the fucking standard. Assuming being able to force a font size (other than relative) is UNPORTABLE. It always has been and (hopefully) it WILL ALWAYS BE. I am NO GOD DAMN DESIGNER. I just know CSS because its fucking 2015. I knew this bug since fucking 2010. Only because I fucking PLAYED WITH CSS. Why is that the GitHub (successful company, right?) CSS team makes mistakes I stopped making when I was in high school and CSS based layouts were a new thing? Now wait for it: "But minimum font size is not a default setting in any browser. You're less than 1% of out userbase. We don't care." /end unforgivable vulgar rant. No harm intended. Consider it comedy. But seriously: CSS people are so wrong right now. I should be the pope of web design and I don't even care about it. mdo: It's not your fault. I am barking at the wrong tree. In fact there are more pressing issues I have that GitHub ignores. It just vulcanoed out of me. If you have any influence in the CSS scene, please try to address this common mistake.
- ubercow 12y ago
- jbeja 12y agoWhy do I have to put 3 divs in order to make work the grid?
- jordanlev 12y agoHow else would you do it (assuming you wanted to use floats)?
- andreash 12y agoLove this. What other companies have released their CSS/HTML guidelines? I much prefer to read guidelines like this, than using a full framework.
- marcins 12y agoIt's not down to the code style level, but Atlassian has the Atlassian Design Guidelines (ADG) and Atlassian UI (AUI). ADG is the general patterns and UX stuff, AUI is a UI library which covers both CSS and JS components and implements the patterns in the ADG. ADG: https://design.atlassian.com/latest/ https://design.atlassian.com/latest/ AUI: https://docs.atlassian.com/aui/latest/ https://docs.atlassian.com/aui/latest/
- andreash 12y agoI think the "Pixels vs ems" was a bit short. Anyone?http://primercss.io/guidelines/ http://primercss.io/guidelines/
- gcb0 12y agowhy would i want a css toolkit from a site that can't even show usable scroll bars in a text area? it is simply impossible to see diffs with slightly longer lines without scrolling all the way to the bottom of the page, away from the line you want to read, so you can reach the horizontal scroll bar. meh.
- tracker1 12y agoI'm looking forward to seeing their GFM styles... that's probably the most compelling to me.
- mcenedella 12y agoTerrific and very useful.