Skip to content

sethvincent/css-via-npm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

css via npm

@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

Releases

No releases published

Sponsor this project

 

Packages

No packages published

Languages