pattern-7-1/README.md

63 lines
1.8 KiB
Markdown
Raw Normal View History

2019-03-03 09:28:16 +01:00
**Pattern Template 7-1**, an extraordinarily neat architecture that any Web Designer can understand at a glance. Structure with the help of SASS syntax (**.sass extension**).
``` txt
sass/
2019-03-03 09:34:00 +01:00
|
2023-01-02 10:32:51 +01:00
| abstracts/
2019-03-03 09:34:00 +01:00
| | _mixins.sass
| | _variables.sass
| base/
| | _base.sass
| | _fonts.sass
| | _helpers.sass
| | _typography.sass
2023-01-02 10:32:51 +01:00
| components/
| | _alert.sass
2019-03-03 09:34:00 +01:00
| | _button.sass
| ...
| layout/
| | _footer.sass
| | _header.sass
2019-03-03 09:28:16 +01:00
| pages/
| | _home.sass
2019-03-03 09:34:00 +01:00
| ...
| themes/
2023-01-02 10:32:51 +01:00
| | _dark.sass
| | _light.sass
2019-03-03 09:34:00 +01:00
| vendors/
2023-01-02 10:32:51 +01:00
| | _normalize.sass
| | _owl-carousel.sass
2019-03-03 09:34:00 +01:00
| ...
2019-03-03 09:28:16 +01:00
` main.sass
```
# Compile SASS.
## Install
``` bash
yarn global add node-sass
```
## Run
``` bash
node-sass --output-style compressed sass/main.sass css/main.css
```
## Watch: Autocompile if it detects changes
``` bash
node-sass --watch --source-map true --output-style compressed sass/main.sass css/main.css
```
**Note:** This template has been created with the help of SASS lang official style guides and [HugoGiraudel](https://github.com/HugoGiraudel/sass-boilerplate) repository.
2023-01-02 11:12:25 +01:00
## Other variants
- [Pattern 7-1 with Split media](https://github.com/tanrax/pattern-7-1-with-split-media): The best, highly recommended ❤️)
- [Pattern 7-1](https://github.com/tanrax/pattern-7-1): Standard. **Not responsive design**.
- [Pattern 7-1 Lite with Split media](https://github.com/tanrax/pattern-7-1-lite-with-split-media): Simplified version for students or very small web sites.
- [Pattern 7-1 Lite](https://github.com/tanrax/pattern-7-1-lite): Simplified version for students or very small web sites. **Not responsive design**.