Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/atomic-package/css
atomic package style css
https://github.com/atomic-package/css
apb apb-css atomic atomic-package css css-framework nuxt sass-framework scss
Last synced: 2 days ago
JSON representation
atomic package style css
- Host: GitHub
- URL: https://github.com/atomic-package/css
- Owner: atomic-package
- Created: 2017-06-24T02:25:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-17T03:09:53.000Z (almost 4 years ago)
- Last Synced: 2024-09-03T22:37:57.556Z (24 days ago)
- Topics: apb, apb-css, atomic, atomic-package, css, css-framework, nuxt, sass-framework, scss
- Language: SCSS
- Homepage: https://atomic-package.github.io/css/
- Size: 4.43 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```.env
$ 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
```