# netlify-styleguide > The official style guide used at Netlify. Latest version **0.1.8** (published 2016-11-08) · MIT license · 0 weekly downloads ## Install ```sh npm install netlify-styleguide pnpm add netlify-styleguide yarn add netlify-styleguide bun add netlify-styleguide ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.8 | | Published | 2016-11-08 | | First published | 2016-10-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 37 | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | bdougie, biilmann, calavera, elitricity, rafaelconde | ## Links - npm: https://www.npmjs.com/package/netlify-styleguide - npm.io page: https://npm.io/package/netlify-styleguide ## Dependencies (37) - [gulp](https://npm.io/package/gulp.md) ^3.9.1 - [eslint](https://npm.io/package/eslint.md) ^3.1.1 - [webpack](https://npm.io/package/webpack.md) ^1.13.1 - [stylefmt](https://npm.io/package/stylefmt.md) 4.3.1 - [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.7 - [stylelint](https://npm.io/package/stylelint.md) 7.4.2 - [css-loader](https://npm.io/package/css-loader.md) ^0.23.1 - [gulp-babel](https://npm.io/package/gulp-babel.md) ^6.1.2 - [pre-commit](https://npm.io/package/pre-commit.md) 1.1.3 - [url-loader](https://npm.io/package/url-loader.md) ^0.5.7 - [file-loader](https://npm.io/package/file-loader.md) ^0.9.0 - [lint-staged](https://npm.io/package/lint-staged.md) 3.2.0 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.3.7 - [babel-eslint](https://npm.io/package/babel-eslint.md) ^6.1.2 - [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.4 - [gulp-postcss](https://npm.io/package/gulp-postcss.md) ^6.1.1 - [postcss-at2x](https://npm.io/package/postcss-at2x.md) ^2.0.0 - [postcss-neat](https://npm.io/package/postcss-neat.md) ^2.5.2 - [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^1.0.0 - [babel-register](https://npm.io/package/babel-register.md) ^6.11.6 - [exports-loader](https://npm.io/package/exports-loader.md) ^0.6.3 - [imports-loader](https://npm.io/package/imports-loader.md) ^0.6.5 - [postcss-import](https://npm.io/package/postcss-import.md) ^8.1.2 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^0.9.1 - [postcss-nested](https://npm.io/package/postcss-nested.md) ^1.0.0 - [postcss-cssnext](https://npm.io/package/postcss-cssnext.md) ^2.7.0 - [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.9.0 - [postcss-simple-vars](https://npm.io/package/postcss-simple-vars.md) 3.0.0 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^1.11.1 - [postcss-simple-extend](https://npm.io/package/postcss-simple-extend.md) ^1.0.0 - [postcss-colour-functions](https://npm.io/package/postcss-colour-functions.md) ^1.5.1 - [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) 13.0.2 - [stylelint-declaration-block-order](https://npm.io/package/stylelint-declaration-block-order.md) 0.2.0 - [babel-plugin-transform-object-assign](https://npm.io/package/babel-plugin-transform-object-assign.md) ^6.8.0 - [babel-plugin-syntax-object-rest-spread](https://npm.io/package/babel-plugin-syntax-object-rest-spread.md) ^6.13.0 - [babel-plugin-transform-class-properties](https://npm.io/package/babel-plugin-transform-class-properties.md) ^6.10.2 - [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.8.0 ## Recent versions - 0.1.8 (latest) — 2016-11-08 - 0.0.4 (beta) — 2016-10-27 - 0.1.7 — 2016-10-27 - 0.1.6 — 2016-10-27 - 0.0.3 — 2016-10-27 - 0.0.2 — 2016-10-27 - 0.0.1 — 2016-10-27 - 0.1.5 — 2016-10-27 - 0.1.4 — 2016-10-26 - 0.1.3 — 2016-10-24 - 0.1.2 — 2016-10-17 - 0.1.1 — 2016-10-17 - 0.1.0 — 2016-10-15 ## README # Netlify Styleguide This is the living styleguide for Netlify. [styleguide.netlify.com](https://styleguide.netlify.com) As with www.netlify.com, it's based on Victor Hugo and use the same general structure. The goal is to build out our universal base CMS - the `bootstrap` of Netlify, and be able to pull it into both the marketing site and the app via NPM. ## Usage Be sure that you have the latest node and npm installed Next, clone this repository and run: ```bash npm install npm start ``` Then visit http://localhost:3000/ - BrowserSync will automatically reload CSS or refresh the page when stylesheets or content changes. To build your static output to the `/dist` folder, use: ```bash npm run build ``` ## Install via NPM via npm ```bash npm install netlify-styleguide --save ``` via git ```bash npm install git+https://github.com/netlify/styleguide --save ``` Add the a reference to the entry point for your css in webpack ```js import "netlify-styleguide/src/css/main.css" ``` ## Working on the styleguide Each page in the styleguide is a markdown document in the folder `site/content/styleguide`. Within the styleguide you can use the `{{< example >}}` shortcode to show your HTML snippets. Header tags will automatically be used to build a table of contents for the page in the sidebar. To work on the actual CSS edit `src/css/main.css` and any files imported there. ## NPM publishing To make the styleguide project available via npm, deploy from the command using the following command. ```bash npm pubslih ``` Always update the [version number](https://github.com/netlify/styleguide/blob/master/package.json#L3) prior to publishing to npm ## CSS Linting Linting is set up using the open source project [stylelint](https://github.com/stylelint/stylelint). Rules for the linter are set up in the [.stylelintrc](https://github.com/netlify/master/blob/style-lint/.stylelintrc) and can be sourced from [here](https://github.com/netlify/styleguide/blob/master/.eslintrc.) --- _Source: https://npm.io/package/netlify-styleguide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._