📢 Big Change! Primer version 4.0.0

[jonrohan]

This PR introduces a big reorganization to how we distribute primer.

Previously primer/primer was a single repository that contained a bunch of different components and modules to build out the source.

What we're moving too is a npm distributed model where each module is a smaller piece of CSS tied into the larger distribution package, (this repository).

All of the CSS that was in this repository previously is now in the following repositories, and available via http://npmjs.com/

• primer/alerts
• primer/avatars
• primer/base
• primer/blankslate
• primer/buttons
• primer/flex-table
• primer/forms
• primer/layout
• primer/markdown
• primer/navigation
• primer/states
• primer/support
• primer/tooltips
• primer/truncate
• primer/utilities

The future of this repository is that it will most likely stay around and include all the modules for primer. So if you want everything you'll use this, if you want a more granular approach, you can build a package with any of the modules available.

[petetnt]

Out of interest: why separate repos for everything instead of going for a monorepo-like design like Babel, React and others?

[jonrohan]

Out of interest: why separate repos for everything instead of going for a monorepo-like design like Babel, React and others?

The secret is, we actually are, the monorepo will be back in our github/github codebase. We'll probably write a more in-depth article about it later when we get all the workflows smoothed out.

[petetnt]

@jonrohan Cool! Thanks for answering! 👍

[tunnckoCore]

It also be good if there's the ready css and min versions in the repos :)

[jonrohan]

@tunnckoCore see #191 and #193 I'm including the css in the npm module

[tunnckoCore]

Great, but i'm talking each component to have its css in its github repo to be accessed through cdn. Like Semantic UI works - they have both css and less on each repo.

[jonrohan]

I've done the same for all the components, they have built css in each repo. and include the scss versions.

What cdn are you using, it can't pull from npmjs.com?

[tunnckoCore]

Can't see the css haha.

I like to use rawgit while i play with the things.

[jonrohan]

~/Desktop/example
❯ npm install primer-markdown
/Users/jonrohan/Desktop/example
└─┬ primer-markdown@3.1.2 
  └── primer-support@0.3.2 

~/Desktop/example
❯ ls node_modules/primer-markdown/build 
build.css

~/Desktop/example
❯ cat node_modules/primer-markdown/build/build.css 
.markdown-body{font-family:"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:16px;line-height:1.6;word-wrap:break-word}.markdown-body::before{display:table;content:""}.markdown-body::after{display:table;clear:both;content:""}.markdown-body>*:first-child{margin-top:0 !important}.markdown-body>*:last-child{margin-bottom:0 !important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#c00}.markdown-body .anchor{display:inline-block;padding-right:2px;margin-left:-18px}.markdown-body .anchor:focus{outline:none}.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre{margin-top:0;margin-bottom:16px}.markdown-body hr{height:4px;padding:0;margin:16px 0;background-color:#e7e7e7;bor....

[tunnckoCore]

Hm, maybe. I'm just looking the github page and talking for that. Access without nodejs and npm, just directly through github :) Cuz don't have time for dev env currently and want to play with some things.

[jonrohan]

https://npmcdn.com/primer-css@4.0.2/build/build.css
https://npmcdn.com/primer-alerts@0.2.6/build/build.css

[tunnckoCore]

Oh yea, thanks, just forgot for npmcdn. :)