Nicely Pointed Mandibles


    0.1.8 • Public • Published

    Netlify Styleguide

    This is the living styleguide for Netlify.

    As with, 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.


    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+ --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




    npm i netlify-styleguide

    DownloadsWeekly Downloads






    Last publish


    • bdougie
    • biilmann
    • calavera
    • elitricity
    • rafaelconde