andros/pattern-7-1-lite-with-split-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Architecture to organize your CSS files.
8 Commits 1 Branch 0 Tags 46 KiB
Sass 53.7%
HTML 46.3%
d6a5d1816a
Go to file
Andros Fenollosa d6a5d1816a
Update README.md
2023-01-02 10:41:22 +01:00
sass Update mobile.sass 2022-12-15 13:37:03 +01:00
index.html Update index.html 2022-12-15 13:33:30 +01:00
README.md Update README.md 2023-01-02 10:41:22 +01:00

README.md

Pattern Template 7-1 Lite version with Split Media

An extraordinarily neat architecture that any Web Designer can understand at a glance. Structure with the help of SASS and media queries.

sass/                    
|
|– mobile/             
|   |– _header.sass          
|   |– _footer.sass                       
|   |– pages/                
|   |   |– _home.sass        
|   |   |– _contact.sass     
|   |   ... 
|– desktop/             
|   |– _header.sass          
|   |– _footer.sass                       
|   |– pages/                
|   |   |– _home.sass        
|   |   |– _contact.sass     
|   |   ... 
|– _base.sass                    
|– _mixins.sass          
|– _typography.sass      
|– _variables.sass                          
|– vendors/              
|   |– _normalize.sass       
|   |– _owl-carousel.sass
|   ...                  
`– mobile.sass      
`– desktop.sass

Compile SASS.

Install

yarn global add node-sass

Run

node-sass --output-style compressed sass/mobile.sass css/mobile.css
node-sass --output-style compressed sass/desktop.sass css/desktop.css