$ npm install @atomic-package/css
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 '/node_modules/@atomic-package/css';
or
@import "~@atomic-package/css";
css file import
@import "~@atomic-package/css/dist/atomic-package.css";
node-sass & sass-loader package install
$ npm install --save-dev node-sass sass-loadernuxt.config.js
...
/*
** Global CSS
*/
css: ['@atomic-package/css'],
...
https://atomic-package.github.io/css/
directory
docs/
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
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
$ npm run dev
Open http://localhost:3000 in your browser.
Using fractal Style Guide.
$ npm run docs.build
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent