Front-end starter

Minimal development setup for my private projects based on webpack. To test the setup I modified some of the Bootstrap defaults in src/basics/typography/typography.scss:

• Grid
• Typographic scale based on on 1.414 (Augmented Fourth) scale
• Measure of 40 characters per line

Project structure

Project structure in src/ reflects popular way of spliting design systems into:

• Basics
• Components
• Templates

Some of the design systems that inspire me:

• brand estonia
• Mailchimp
• Polaris
• Audi

You can find more design system with: Website Style Guide Resources and Adele If you want to learn more about structering design systems, I encourage you to read: Atomic Design by Brad Frost and Design Systems by Alla Kholmatova.

How to run

nvm install --lts
nvm use --lts
npm install
npm run server

For production:

npm run build

Info about missing fonts

By default fonts are not included, but defined in src/basics/typography/typography.scss.

Related article

http://ryrych.pl/blog/2020-05-08-front-end-starter/ (in Polish)

Have fun!