1. No category

CSS 'n stuff
Antti Mattila
@anttti
Agenda
CSS: Käytännön ongelmat
CSS: Käytännön ratkaisut
Workflow
CSS
Käytännön ongelmat
Yksi namespace
Kehittäjä A, ajanhetkellä n:
/* style.css, line 30 */
.alert {
background: red;
color: white;
}
Kehittäjä B, ajanhetkellä n+100:
/* style.css, line 2564 */
.alert {
color: red;
border: 1px solid red;
}
!important
Konstikas cascade
.element {
float: left;
}
@media screen and (max-width: 600px) {
.element {
float: none;
}
}
vs. mobile first:
@media screen and (min-width: 600px) {
.element {
float: left;
}
}
Deep coupling HTML:n kanssa
<div id="box">
<ul>
<li>
<a href="#">This is a link</a>
</li>
</ul>
</div>
#box ul a {
display: block;
float: left;
margin: 0;
}
Deep coupling JavaScriptin
kanssa
.js--is-visible
Selainyhteensopivuus
CSS
Käytännön ratkaisut
Selainyhteensopivuus
Graceful degradation
Progressive enhancement
caniuse.com
Arkkitehtuuri
Mobile first
Tiedostojako
@import
@import
@import
@import
"general.css";
"header.css";
"footer.css";
"sidebar.css";
@import
@import
@import
@import
"general";
"header";
"footer";
"sidebar";
colors.scss
a {
color: #b4d455;
}
colors.scss
$link-color: #b4d455;
a {
color: $link-color;
}
colors.scss
$primary-color: #b4d455;
$link-color: $primary-color;
a {
color: $link-color;
}
variables.scss & typography.scss
// variables.scss
$baseFontFamily: "Open Sans", Helvetica, Arial, sans-serif;
$baseFontSize:
16px;
$baseFontWeight: 400;
// typography.scss
body {
font-family: $baseFontFamily;
font-size:
$baseFontSize;
font-weight: $baseFontWeight;
}
Metodologiat
• BEM
• SMACSS
• OOCSS
BEM
.block {}
.block__element {}
.block--modifier {}
BEM
.site-search {}
.site-search__field {}
.site-search--is-open {}
CSS Wizardry: MindBEMding
BEM & .u-- -luokat
Resetit
• * { margin: 0; padding: 0; }
• Meyer Reset
• Normalize.css
Sass-apukirjastot
• Compass
• Bourbon
Frameworkit
• Bootstrap
• Foundation
• Pure.css
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-8">
...
</div>
</div>
</div>
</div>
</div>
Workflow
Chrome DevTools
Setup
Develop
Build
Setup
• HTML5 Boilerplate
• Bootstrap / Foundation
• jQuery, Polymer, React...
Develop
• Watch
• Livereload
• Linttaus
• ...
Build
• Linttaus
• Concatenointi
• Minifiointi
• Kuvien optimointi
• ...
Develop
Build
Sass ➜ CSS
• CodeKit
Sass ➜ CSS
1
sass input.scss output.css
1
sass
Minifiointi
• Smaller
• cssminifier.com
Minifiointi
2
cleancss -o output.css input.css
2
cleancss
Linttaus
• CSS Lint
Linttaus
3
scss-lint sass/**/*.scss
3
SCSS-lint
Livereload
• LiveReload
Livereload
browser-sync start --server --files "css/*.css,
4
*.html"
4
BrowserSync
Kuvien optimointi
• ImageOptim
Kuvien optimointi
5
imagemin input output
5
imagemin
Sass → CSS
Minifiointi
Linttaus
Livereloadaus
Kuvien optimointi
CodeKit
CLI.
Node.js & NPM
1- install node.js
2- install git
...
15- install jscs
16- install jslint
...
21- install grunt
22- install broccoli
23- install gulp
...
32- install yeoman
...
45- install mocha
46- install karma
...
81- start coding HTML
82- start coding CSS
83- start coding JS
84- display "Hello w" in the browser window
85- start debugging and finding what part has swallow "orld"
CLI!
Toistettava
Jaettava
Automatisoitava
Gulp
Gulp
sass
cleancss
scss-lint
browser-sync
imagemin
!
!
!
!
!
gulp-sass
gulp-minify
gulp-scss-lint
browser-sync
gulp-imagemin
Duunia?
JBWS!
GitHub
T/π
tammerforce.futurice.com
Linkkejä
• CSS-tricks
• HTML5 Rocks
• Mozilla Developer Network
• DevDocs
• DevTools State of the Union
Lähteet
• Gulp streams -kuva: Addy Osmani, Front-end Tooling
Workflows
Kiitti!
@anttti
BONUS
@extend & @mixin
@extend
.is-highlighted {
font-weight: bold;
text-shadow: 1px 1px 0 #333;
}
strong {
@extend .is-highlighted;
}
.nav-menu-item {
@extend .is-highlighted;
}
p.important {
@extend .is-highlighted;
color: #555;
}
@extend
strong, .nav-menu-item, p.important {
font-weight: bold;
text-shadow: 1px 1px 0 #333;
}
p.important {
color: #555;
}
@extend
.product .single_add_to_cart_button, .cart .button,
input.checkout-button.alt.button, .shipping-calculator-form
.button, .multistep_step .button, #place_order.button,
.single-product .single_add_to_cart_button.button.alt,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond
input#submit, .woocommerce #content input.button,
.woocommerce-page a.button, .woocommerce-page
button.button, .woocommerce-page input.button,
.woocommerce-page #respond input#submit, .woocommerce-page
#content input.button {
background-color: #605f5e;
}
@mixin
HSLa
Hue
Saturation
Lightness
alpha
Hue (°)
Saturation (%)
Lightness (%)
alpha (0-1)
hsla(218, 54%, 32%, 1)
rgba(37, 68, 126, 1)
#25447e (ei alphaa)