Netlify Styleguide

This is the living styleguide for Netlify.

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:

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:

npm run build

Install via NPM

via npm

npm install netlify-styleguide --save

via git

npm install git+https://github.com/netlify/styleguide --save

Add the a reference to the entry point for your css in webpack

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.

npm pubslih

Always update the version number prior to publishing to npm

CSS Linting

Linting is set up using the open source project stylelint. Rules for the linter are set up in the .stylelintrc and can be sourced from here