├── .gitignore ├── dist ├── img │ └── logo.png ├── index.html └── style.css ├── package-lock.json ├── package.json ├── postcss.config.js ├── readme.md └── src ├── card.css ├── input.css └── vars.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /dist/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/postcss-crash/928a238049514760aa15384519877d82cc19631c/dist/img/logo.png -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Traversy Media 9 | 10 | 11 |

Traversy Media

12 |
13 | 14 |
15 | 16 |
17 |

Welcome

18 |

19 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam sequi 20 | similique atque nisi sed dolor hic quis ad voluptas mollitia! 21 |

22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /dist/style.css: -------------------------------------------------------------------------------- 1 | .card{background-image:url(/dist/img/logo.png);background-position:50%;background-repeat:no-repeat;border:2px solid #000;height:300px;margin-top:20px;padding:20px;width:300px}.card h2{color:red}body{background-color:#fafafa}@media (max-width:500px){h1,h2,h3,h4,h5,h6{font-size:40px}}input::-moz-placeholder{color:#4682b4}input::placeholder{color:#4682b4} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-crash", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "watch:css": "postcss src/input.css -o dist/style.css -w", 8 | "build:css": "postcss src/input.css -o dist/style.css" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "autoprefixer": "^10.4.12", 15 | "cssnano": "^5.1.13", 16 | "postcss": "^8.4.18", 17 | "postcss-assets": "^6.0.0", 18 | "postcss-cli": "^10.0.0", 19 | "postcss-preset-env": "^7.8.2", 20 | "precss": "^4.0.0" 21 | }, 22 | "dependencies": { 23 | "postcss-import": "^15.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer'), 4 | require('postcss-preset-env')({ 5 | stage: 1, 6 | }), 7 | require('precss'), 8 | require('postcss-import'), 9 | require('postcss-assets')({ 10 | loadPaths: ['dist/img'], 11 | }), 12 | require('cssnano')({ 13 | preset: 'default', 14 | }), 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # PostCSS Crash Course 2 | 3 | Files for my [YouTube PostCSS crash course](https://www.youtube.com/watch?v=SP8mSVSAh6s). 4 | 5 | ### Usage 6 | 7 | Install dependencies: 8 | 9 | ```bash 10 | npm install 11 | ``` 12 | 13 | Run the watch or build script: 14 | 15 | ```bash 16 | npm run build:css 17 | npm run watch:css 18 | ``` 19 | -------------------------------------------------------------------------------- /src/card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | padding: 20px; 3 | margin-top: 20px; 4 | border: $borderWidth solid $borderColor; 5 | background-image: resolve('logo.png'); 6 | background-repeat: no-repeat; 7 | background-position: center; 8 | width: width('logo.png'); 9 | height: height('logo.png'); 10 | 11 | h2 { 12 | color: red; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/input.css: -------------------------------------------------------------------------------- 1 | @import 'vars'; 2 | @import 'card'; 3 | @custom-selector :--heading h1, h2, h3, h4, h5, h6; 4 | @custom-media --viewport-small (width <= 500px); 5 | 6 | body { 7 | background-color: $lightColor; 8 | } 9 | 10 | :--heading { 11 | @media (--viewport-small) { 12 | font-size: 40px; 13 | } 14 | } 15 | 16 | input::placeholder { 17 | color: steelblue; 18 | } 19 | -------------------------------------------------------------------------------- /src/vars.css: -------------------------------------------------------------------------------- 1 | $lightColor: #fafafa; 2 | $darkColor: #333; 3 | $borderWidth: 2px; 4 | $borderColor: #000; 5 | $borderRadius: 5px; 6 | --------------------------------------------------------------------------------