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: about 2 months 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 (about 4 years ago)
• Last Synced: 2024-11-14T09:43:46.780Z (3 months 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/

```

![2019-02-04 16 20 18](https://user-images.githubusercontent.com/1584153/52194860-e7c38000-2898-11e9-8757-5e4679bc122f.png)

## 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

```