2022-12-15 13:41:47 +01:00
# 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.
2023-01-02 10:43:42 +01:00
## SASS
2022-12-15 13:41:47 +01:00
``` txt
sass/
|
|–
| |–
| |–
| |–
| | |–
| | |–
| | ...
|–
| |–
| |–
| |–
| | |–
| | |–
| | ...
|–
|–
|–
|–
|–
2023-01-02 10:41:22 +01:00
| |–
| |–
2022-12-15 13:41:47 +01:00
| ...
`–
`–
```
2023-01-02 10:43:42 +01:00
## HTML
```html
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< title > Split media< / title >
2023-06-14 12:41:15 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >
2023-01-02 10:43:42 +01:00
< 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 >
```
2022-12-15 13:41:47 +01:00
# Compile SASS.
## Install
``` bash
yarn global add node-sass
```
## Run
``` bash
node-sass --output-style compressed sass/mobile.sass css/mobile.css
node-sass --output-style compressed sass/desktop.sass css/desktop.css
```
2023-01-02 11:13:36 +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** .
