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.
7 Commits 1 Branch 0 Tags 46 KiB
Sass 53.7%
HTML 46.3%
a85b9d4854
Go to file
Andros Fenollosa a85b9d4854
Create README.md
2022-12-15 13:41:47 +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 Create README.md 2022-12-15 13:41:47 +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/              
|   |– _bootstrap.sass   
|   |– _jquery-ui.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