Skip to content

Commit a49a838

Browse files
solygambassolygambas
committed
add precss, imports, assets and cssnano
1 parent 3b29e0b commit a49a838

File tree

11 files changed

+4155
-187
lines changed

11 files changed

+4155
-187
lines changed

‎playground/postcss-intro/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,18 @@
22

33
A quick intro to PostCSS.
44

5+
<p align="center">
6+
<img src="screenshot.png">
7+
</p>
8+
59
## Features
610

711
- setting up a project with PostCSS.
812
- using Autoprefixer to add vendor prefixes to CSS rules.
13+
- testing modern CSS features with PostCSS Preset Env.
14+
- enabling Sass-like markup with PreCSS.
15+
- importing variables and CSS files with postcss-import.
16+
- managing assets with postcss-assets.
17+
- optimizing CSS with cssnano.
918

1019
Based on [PostCSS Crash Course](https://www.youtube.com/watch?v=SP8mSVSAh6s) by Brad Traversy (2022).

‎playground/postcss-intro/dist/img/postcss.jpg

52.1 KB
Loading

‎playground/postcss-intro/dist/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,13 @@ <h1>PostCSS</h1>
1212
<form>
1313
<input type="text" name="" id="" placeholder="Enter a search term" />
1414
</form>
15+
<div class="card">
16+
<h3>Welcome</h3>
17+
<p>
18+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, soluta
19+
et? Labore, odio dolorum doloremque repudiandae possimus facere ullam
20+
eius.
21+
</p>
22+
</div>
1523
</body>
1624
</html>

‎playground/postcss-intro/dist/style.css

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,32 @@
1+
.card {
2+
background-image: url(./img/postcss.jpg);
3+
background-position: 50%;
4+
background-repeat: no-repeat;
5+
border: 2px solid #000;
6+
margin-top: 20px;
7+
max-width: 90%;
8+
padding: 20px;
9+
width: 500px;
10+
}
11+
.card h3 {
12+
color: #4682b4;
13+
}
114
body {
2-
background-color: #fff;
15+
background-color: #fafafa;
16+
}
17+
@media (max-width: 500px) {
18+
h1,
19+
h2,
20+
h3,
21+
h4,
22+
h5,
23+
h6 {
24+
font-size: 40px;
25+
}
326
}
4-
527
input::-moz-placeholder {
6-
color: steelblue;
28+
color: #4682b4;
729
}
8-
930
input::placeholder {
10-
color: steelblue;
31+
color: #4682b4;
1132
}

0 commit comments

Comments
 (0)