Workshop - Front-End Design (#2)
= Syntactically Awesome Stylesheet
=Sassy CSS
//Colors
$main-color: #d10e0e;
$second-color: #fff;
//Animations
$transition-time: 0.2s;
//Padding
$vertical-rythm: 20px;
//Font-Size
$base: 16px;
//Colors
$main-color: #d10e0e;
$second-color: darken($main-color, 10%);
$highlight-color: lighten($main-color, 30%);
$border: 1px solid #EFC6F3;
.post {
border-radius: 3px;
background: #FFF8FF;
border: $border;
padding: 15px;
color: #333333;
.title {
color: #000000;
font-size: 20px;
.highlight {
color: #fff;
}
}
}
body {
div.container {
div.content {
div.articles {
& > div.post {
div.title {
h1 {
a {
}
}
}
div.content {
p { ... }
ul {
li { ... }
}
}
div.author {
a.display {
img { ... }
}
h4 {
a { ... }
}
p {
a { ... }
}
ul {
li { ... }
}
}
}
}
}
}
}
body { ... }
body div.content div.container { ... }
body div.content div.container div.articles { ... }
body div.content div.container div.articles > div.post { ... }
body div.content div.container div.articles > div.post div.title { ... }
body div.content div.container div.articles > div.post div.title h1 { ... }
body div.content div.container div.articles > div.post div.title h1 a { ... }
body div.content div.container div.articles > div.post div.content { ... }
body div.content div.container div.articles > div.post div.content p { ... }
body div.content div.container div.articles > div.post div.content ul { ... }
body div.content div.container div.articles > div.post div.content ul li { ... }
body div.content div.container div.articles > div.post div.author { ... }
body div.content div.container div.articles > div.post div.author a.display { ... }
body div.content div.container div.articles > div.post div.author a.display img { ... }
body div.content div.container div.articles > div.post div.author h4 { ... }
body div.content div.container div.articles > div.post div.author h4 a { ... }
body div.content div.container div.articles > div.post div.author p { ... }
body div.content div.container div.articles > div.post div.author p a { ... }
body div.content div.container div.articles > div.post div.author ul { ... }
body div.content div.container div.articles > div.post div.author ul li { ... }
@mixin button_style($color_border,$color,$text_color) {
border-bottom: 5px solid $color_border;
background-color: $color;
color: $text_color;
}
.button {
text-decoration: none;
text-align: center;
margin-top: 5px;
@include button_style($dark_grey,$grey,white);
}
=Scalable and Modular Architecture of CSS
stylesheets/
|
|-- __base.scss # Partial Base Rules
|-- __layout.scss # Partial Layout Rules
|
|-- modules/ # Common modules
| |-- _all.scss # Include to get all modules
| |-- _utility.scss # Module name
| |-- _colors.scss # Etc...
| ...
|
|-- __state.scss # Partial State Rules
|-- __theme.scss # Partial Theme Rules
|
`-- main.scss # primary Sass file, Include all Partials
= Block, Element, Modifier
<ul class="nav">
<li class="nav__item">Index</li>
<li class="nav__item nav_item--active">Products</li>
<li class="nav__item">Contact</li>
</ul>
Vorteile
Nachteile