Getting Started
Legacy version
You’re browsing the documentation for v4. View the docs for the latest version →
Prerequisites
Install the CLI globally:
bash
npm install -g front-end-styleguide-cli
Create a new project
bash
# Create a new folder for the project
mkdir project-name
# Change to the newly created folder
cd project-name
# Initialize a new styleguide project
# and follow the on-screen questions
# to customize the new project
front-end-styleguide init
# Install dependencies
npm install
Project structure
The styleguide initialization creates the following folder and file structure:
txt
.
├── config
│ └── branding.scss
├── src
│ ├── assets
│ │ └── water.jpg
│ ├── components
│ │ ├── hello
│ │ │ ├── docs.njk
│ │ │ ├── scripts.js
│ │ │ ├── styles.scss
│ │ │ └── templates.njk
│ │ ├── image
│ │ │ ├── docs.njk
│ │ │ ├── styles.scss
│ │ │ └── templates.njk
│ │ ├── index.js
│ │ └── index.scss
│ ├── functions
│ │ └── hello.js
│ ├── prototypes
│ │ └── index.njk
│ ├── setup
│ │ ├── scaffolding.scss
│ │ └── variables.scss
│ ├── templates
│ │ └── prototypes.njk
│ ├── main.js
│ └── main.scss
├── .babelrc
├── .browserslistrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .stylelintignore
└── .stylelintrc.json