DEV Community

loading...

Styleguide setup

Giulia Chiola
Front-end Developer. πŸ‘Ύ Media engineer. ⚑ Facing life one bug at a time. πŸ”₯ Easily bribed with chocolate. 🍫 she/her.
Originally published at giuliachiola.dev ・Updated on ・3 min read

Regardless of which tool I use to build my styleguides, it helps a lot to have a checklist of packages I need for (almost) every project setup.

Styles

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

npm install node-sass --save-dev
Enter fullscreen mode Exit fullscreen mode

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

npm install postcss postcss-cli postcss-preset-env postcss-import --save-dev
Enter fullscreen mode Exit fullscreen mode

To configure postcss, add .postcss.config.js in project root folder

πŸ™ GitHub snippet

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

npm install stylelint stylelint-scss stylelint-order --save-dev
Enter fullscreen mode Exit fullscreen mode

To configure stylelint, add .stylelintrc.json in project root folder

πŸ™ GitHub snippet

A Sass mixin that helps you compose media queries in an elegant way.

npm install sass-mq --save-dev
Enter fullscreen mode Exit fullscreen mode

Add sass-mq configuration in styles folder src/scss/00-settings/_sass-mq-config.scss

πŸ™ GitHub snippet

In a static project, as a styleguide, to use sass-mq in our styles, we have to import it from node_modules and add our configuration

// src/scss/00-settings/__settings.scss

@import 'node_modules/sass-mq/_mq.scss';
@import 'sass-mq-config';
Enter fullscreen mode Exit fullscreen mode

In projects that use webpack, we could add sass-mq using this syntax

// With webpack (and boilerplates such as create-react-app)
@import '~sass-mq';
Enter fullscreen mode Exit fullscreen mode

This project is the Sass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.

npm install normalize-scss --save-dev
Enter fullscreen mode Exit fullscreen mode

Import normalize-scss from node_modules

// src/scss/02-generic/__generic.scss

@import 'node_modules/normalize-scss/sass/_normalize.scss';
Enter fullscreen mode Exit fullscreen mode

Styles structure

  • scssΒ folder contains BEMIT SASS file structure
  • cssΒ folder contains compiled CSS output
β”œβ”€β”€ src/
β”‚Β Β  β”œβ”€β”€ scss/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 00-settings/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 01-tools/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 02-generic/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 03-elements/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 04-objects/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 06-components/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 07-utilities/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ style.scss
β”‚Β Β  β”œβ”€β”€ css/
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ style.css
Enter fullscreen mode Exit fullscreen mode

πŸ“š More info

BEMIT: Taking the BEM Naming Convention a Step Further

Styles scripts

Use package.json scriptsΒ object to list all styles commands

"scripts": {
    "_____________________________Styles_____________________________": "",
    "stylelint": "stylelint 'src/scss/**/*.scss' || echo \"Stylelint failed for some file(s).\"",
    "cleanup:dev": "rimraf dist src/css/*.css",
    "scss:to:css:dev": "node-sass --output-style expanded src/scss/ -o src/css/",
    "css:to:postcss:dev": "postcss src/css --dir dist/css",
    "styles:dev": "npm run stylelint && npm run scss:to:css:dev && npm run css:to:postcss:dev",
  },
Enter fullscreen mode Exit fullscreen mode

SVG

Node.js tool for optimizing SVG files

npm install svgo --save-dev
Enter fullscreen mode Exit fullscreen mode

Create two folders, one for original SVG files src/svgΒ and a second one optimized SVGs src/svgo

β”œβ”€β”€ src/
β”‚Β Β  β”œβ”€β”€ svg/
β”‚Β Β  β”‚Β Β  git.svg
β”‚Β Β  β”‚Β Β  nodejs.svg
β”‚Β Β  β”‚Β Β  vuejs.svg
β”‚Β Β  β”œβ”€β”€ svgo/
β”‚Β Β  β”‚Β Β  git.svg (optimized)
β”‚Β Β  β”‚Β Β  nodejs.svg (optimized)
β”‚Β Β  β”‚Β Β  vuejs.svg (optimized)
Enter fullscreen mode Exit fullscreen mode

Add SVGO script configuration

πŸ™ GitHub snippet

SVG scripts

Use package.json scriptsΒ object to list all SVG manipulation commands

"scripts": {
  "_____________________________SVG________________________________________________": "",
  "clean:svgo": "rimraf src/icons/svgo/*",
  "svg:optimize": "npm run clean:svgo && node scripts/svgo.js",
}
Enter fullscreen mode Exit fullscreen mode

Ok now I am ready to develop my components and build a styleguide! πŸ’ͺ🏻

Discussion (1)

Collapse
titungdup profile image
dhondup

Can we use stylelint-order to sort CSS working files?