css via npm

July 8, 2015 ยท View on GitHub

@sethdvincent sethvincent.com/css-via-npm

npm is great for js.

it's great for css, too.

simple workflow

  • npm i --save cool-css
  • @import "cool-css";
  • npm run bundle-css

bootstrap? sure.

  • npm i --save bootstrap
  • @import "bootstrap";
  • npm run bundle-css

hey, what's that bundle-css command?

There are a few tools for bundling css.

{
  "style": "style.css",
}

example bundle-css script

"scripts": {
  "bundle-css":  "sheetify style.css > bundle.css"
}

modular css

hi i'd like some button styles please.

modular css projects

preprocessors?

ok.

css tomorrow yesterday

example bundle-css script with cssnext

"scripts": {
  "bundle-css":  "sheetify style.css | cssnext > bundle.css"
}

publishing css modules

  • package.json style property
  • publish preprocessed file in style property
  • offer source files as option.

scss example:

@import "example/source.scss";

include local css files in a bundle by using a relative path

@import "./example.css";

usage example

how do i use this?

css dependencies

npm i --save normalize.css basscss-grid csskit

dev dependencies

npm i --save-dev sheetify cssnext

files:

  • css/
    • index.css
    • fonts.css
    • layout.css
    • forms.css
    • etc.

index.css

@import "normalize.css";
@import "basscss-grid";
@import "csskit";

@import "./fonts.css";
@import "./layout.css";
/* etc. */

bundle-css script

"scripts": {
  "bundle-css":  "sheetify css/index.css | cssnext > public/bundle.css"
}

module example

  • npm i -S pizza-background
  • @import "pizza-background";
  • npm run bundle-css
  • add bundled css script tag
  • <body class="pizza"></body>
pizza.gif ---

now you publish a css module!

@sethdvincent sethvincent.com/css-via-npm