Atomic Package - CSS

css npm package install

$ npm install @atomic-package/css

include dist files

dist/
├── atomic-package
│ ├── atomic-package.scss
│ ├── atomic-package.css
│ └── atomic-package.min.css
├── atomic-package-theme
│ ├── atomic-package-theme.scss
│ ├── atomic-package-theme.css
│ └── atomic-package-theme.min.css
└── font
├── FontAwesome.otf
├── fontawesome-webfont.ttf
├── fontawesome-webfont.woff
└── fontawesome-webfont.woff2

import SCSS File

@import '/node_modules/@atomic-package/css';

or

@import "~@atomic-package/css";

css file import

@import "~@atomic-package/css/dist/atomic-package.css";

User Nuxt.js

node-sass & sass-loader package install

$ npm install --save-dev node-sass sass-loader

nuxt.config.js

...
/*
** Global CSS
*/
css: ['@atomic-package/css'],
...

Style Guide

Atomic Package Style Guide Page

https://atomic-package.github.io/css/

directory

docs/

develop SCSS directory details

scss atomic-package directory

src/scss/atomic-package
├── _common_inc.scss
├── _parts.scss
├── atomic-package.scss
├── base
│ ├── _base.scss
│ ├── _helper.scss
│ ├── _mixin.scss
│ ├── _reset.scss
│ └── _setting.scss
├── pages
│ ├── _pages_inc.scss
│ └── _top.scss
└── parts
├── _animation.scss
├── _base.scss
├── _bg.scss
├── _box.scss
├── _button.scss
├── _footer.scss
├── _form.scss
├── _header.scss
├── _icon.scss
├── _list.scss
├── _media_queries.scss
├── _modal.scss
├── _navigation_menu.scss
├── _paragraph.scss
├── _separate.scss
├── _table.scss
└── _title.scss

scss all directory

src/scss/
├── atomic-package
│ ├── _common_inc.scss
│ ├── _parts.scss
│ ├── atomic-package.scss
│ ├── base
│ │ ├── _base.scss
│ │ ├── _helper.scss
│ │ ├── _mixin.scss
│ │ ├── _reset.scss
│ │ └── _setting.scss
│ ├── pages
│ │ ├── _pages_inc.scss
│ │ └── _top.scss
│ └── parts
│ ├── _animation.scss
│ ├── _base.scss
│ ├── _bg.scss
│ ├── _box.scss
│ ├── _button.scss
│ ├── _footer.scss
│ ├── _form.scss
│ ├── _header.scss
│ ├── _icon.scss
│ ├── _list.scss
│ ├── _media_queries.scss
│ ├── _modal.scss
│ ├── _navigation_menu.scss
│ ├── _paragraph.scss
│ ├── _separate.scss
│ ├── _table.scss
│ └── _title.scss
└── atomic-package-theme
├── _common_inc.scss
├── _parts.scss
├── atomic-package-theme.scss
├── base
│ ├── _base.scss
│ ├── _mixin.scss
│ ├── _reset.scss
│ └── _setting.scss
├── pages
│ ├── _pages_inc.scss
│ └── _top.scss
└── parts
├── _animation.scss
├── _bg.scss
├── _box.scss
├── _button.scss
├── _footer.scss
├── _form.scss
├── _header.scss
├── _icon.scss
├── _list.scss
├── _media_queries.scss
├── _modal.scss
├── _navigation_menu.scss
├── _paragraph.scss
├── _separate.scss
└── _title.scss

Start Develop

$ npm run dev

Open http://localhost:3000 in your browser.

Using fractal Style Guide.

Build Fractal Style Guide. Document Files

$ npm run docs.build