Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
<p class="m-b:1">Shed.css came about after I got tired of writing CSS. All of the CSS in the world has already been written, and there's no need to rewrite it in every one of our projects. After a bikeshedding session with <a class="link" href="https://mobile.twitter.com/brnnbrn">@brnnbrn</a> & <a class="link" href="https://mobile.twitter.com/samselikoff">@samselikoff</a>, and <a class="link" href="http://mobile.twitter.com/vinspee">me</a>, we came up with a naming scheme we were satisfied with, and <a class="link" href="http://github.com/tedconf/shed-css">shed.css</a> was born.</p>
<ul>
<li><a href="//tedconf.github.io/shed-css/docs.html#essential-concepts" class="d:b m-b:5 link">What does shed accomplish?</a></li>
<li><a href="//tedconf.github.io/shed-css/docs.html#examples" class="d:b m-b:5 link">What does it look like?</a></li>
</ul>
<h2
class="
f:5
t-t:u
m-b:1
"
>Use</h2>
<h4><em>In a hurry? Clone <a class="link" href="https://github.com/VinSpee/shed-starter">this repo</a> to get going with a starter kit and skip all of the setup.</em></h4>
<h3>First, install shed using <a href="http://www.nearform.com/nodecrunch/nodejs-sudo-free/" class="link">npm</a>.</h3>
<pre class="language-bash"><code class="language-bash">❯ npm install --saveDev shed-css</code></pre>
<p class="m-b:7">At this point, we come to a fork in the road. Choose one of these options:</p>
<h4 class="f:3 c:blue a-i:m m-b:2"><div class="c:blue f-w:700 v-a:m f:4 t-t:u">🚳 Single Speed</div>— I just want to use it.</h4>
<pre class="language-scss m-b:7"><code class="language-scss">@import "shed-css/dist/index.css";</code></pre>
<h4 class="f:3 c:blue a-i:m m-b:2"><div class="c:blue f-w:700 v-a:m f:4 t-t:u">🖌 Fixie</div> — I want to customize the scale and fonts.</h4>
<p class="m-b:3">As of now, shed is written in <a class="link" href="http://postcss.org/">PostCSS</a> using future css syntax. To customize the scale and fonts, you should install shed's peer dependencies (<a href="http://postcss.org">postcss</a> and <a href="http://cssnext.io/postcss" class="link">cssnext</a>) and add them to your build pipeline.</p>
<h5 class="f:1 t-t:u">Install peer deps:</h5>
<pre class="language-bash m-b:5"><code class="language-bash">npm ls 2>/dev/null | grep \"UNMET PEER DEPENDENCY\" | awk '{print $NF}' | xargs npm install -D</code></pre>
<h5 class="f:1 t-t:u">Customize Variables:</h5>
<pre class="language-css m-b:7"><code class="language-css">@import "shed-css/lib/index.css";
:root { /* * These "z" values reflect the steps on the scale. * Numbers prefixed with "dot" mean they're below * the base font size. */ --z-dot1: .19381rem --z-dot2: .23257rem --z-dot3: .27908rem --z-dot4: .3349rem --z-dot5: .40188rem --z-dot6: .48225rem --z-dot7: .5787rem --z-dot8: .69444rem --z-dot9: .83333rem --z0: 0; --z1: 1rem --z2: 1.2rem --z3: 1.44rem --z4: 1.728rem --z5: 2.0736rem --z6: 2.48832rem --z7: 2.98598rem --z8: 3.58318rem --z9: 4.29982rem --z10: 5.15978rem
/*
* These "f-f" values change the font family utilties
* in the "font family" section.
*/
--f-f-sans: sans-serif;
--f-f-serif: serif;
--f-f-mono: monospace;
/*
* These "l-h" values change the line height utilties
* in the "line height" section. Unitless numbers recommended.
*/
--l-h--default: 1;
--l-h--tight: 1.2;
--l-h--normal: 1.5;
--l-h--loose: 1.75;
/*
* These "l-s" values change the letter spacing
* utilties in the "letter spacing" section.
* Em values recommended.
*/
--l-s--default: normal;
--l-s--tight: -.04em;
--l-s--normal: -.01em;
--l-s--loose: .1em;
}
Now, you might want to get your brand colors in there by creating a custom theme.
<h4 class="f:3 c:blue a-i:m m-b:2"><div class="f:4 c:blue f-w:700 v-a:m t-t:u">🚲🏚 Trailblazer</div> — I demand complete control (pro-level bikeshedder)</h4>
<a
href="//tedconf.github.io/shed-css/docs.html#custom-theme"
class="link d:i-b m-b:7"
>See the full customization guide</a>
FAQs
Functional and customizable CSS utilities with familiar names
The npm package shed-css receives a total of 9 weekly downloads. As such, shed-css popularity was classified as not popular.
We found that shed-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.