andros/pattern-7-1-lite-with-split-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
e3a254fc20
pattern-7-1-lite-with-split.../README.md
Andros Fenollosa f22c109e6a
Update README.md
2023-01-02 10:43:42 +01:00

1.7 KiB
Raw Blame History

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

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

HTML


<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Split media</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
        <link href="css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
        <link href="css/desktop.css" rel="stylesheet" media="all and (min-width: 600px)">
    </head>
    <body>
        <h1>Gravida arcu ac tortor.</h1>
    </body>
</html>

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