XL CSS

Estilos para aplicações de larga-escala significa lidar com necessidades diversas, opiniões diferentes e muitos contribuintes. Se você está no meio dessa bagunça, aí vão algumas dicas e práticas que podem te ajudar - tanto em aplicações grandes, quanto em menores. Como: organizar sistemas e convenções, compartilhar configurações entre componentes, administrar base de assets, gerar diferentes stylesheets de acordo com as necessidades.

Transcript

1. css XL @AtilaFassina
2. atilafassina.com | front-end developer
3. Extra-Large ?
4. + Usuários + Código + Devs + ideias + opiniões
5. + Usuários + Código + Devs + ideias + opiniões +problemas
6. Drill by Daniel Garrett Hickey from The Noun Project Fluorescent Light Bulb by Matt Brooks from The Noun Project x manutenção criação $
7. < /> Bug by im from The Noun Project bug chance code
8. metodologias
9. OOCSS
10. OOCSS - seletores por função - repetição de estrutura
11. nomenclatura - heirárquica - bem definida
12. - modificadores explícitos
13. case
14. - baixa curva de aprendizagem - comunidade muito forte ➔ muitas ferramentas disponíveis .scss
15. scss |------------ config | |----- _compiler.scss | |------------ settings | |---- _settings.scss | |----_helpers.scss | |------------- partials | |--- … | |------------ main.scss Tree by David Chapman from The Noun Project
16. _compile.scss Tree by David Chapman from The Noun Project
18. .json .scss grunt-shared-config
19. grunt-shared-config var configRegular = {}; configRegular['modern'] = true, configRegular['standalone'] = false, configRegular['mob'] = false, configRegular['font-url'] = "'//cdn.com/fonts/'"; configRegular['update'] = "'update-"+updateTime+"'"; var regularMorph = JSON.stringify(configRegularMorph, null, 4); grunt.file.write('./._tmp/regularConfig.json', regularCSS);
20. grunt-shared-config $standalone: false; $modern: false; $mob: true; $update: 'update-1412185474374'; $font-url: '//cdn.com/fonts/';
21. - legacy ≠ style sheets - whatever... - mobile - standalone
22. Tree by David Chapman from The Noun Project _settings.scss _settings.scss
23. Tree by David Chapman from The Noun Project _settings.scss - Cores - Valores padrão ➔ font-family ➔ text color ➔ etc… - Espaçamentos
24. _helpers.scss Tree by David Chapman from The Noun Project
25. Tree by David Chapman from The Noun Project _helpers.scss - mixins - clearfix - transition - transform - functions - px to rem - placeholders - ...
26. disseminar
28. { "repository": "http://github.com/Framework/center", "name": "center", "description": "tasks, themes and files", "version": "1.3.8", "scripts": {}, "dependencies": { "request": "2.34.0" } }
29. { "devDependencies": { "zaz-center": "http://github. com/Framework/center/tarball/master", ... } } package.json
30. fonts
31. .woff2 ✓ 4.4* .woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4 .ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓ .eot 6-8 .svg ✓ ✓ ✓ 3.x *Chrome only
32. .woff2 ✓ 4.4* .woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4 .ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓ .eot 6-8 .svg ✓ ✓ ✓ 3.x
33. @font-face { font-family: 'Ubuntu'; src: url($font-url + 'ubuntu/ubuntu-regular.woff2') format off2'), url($font-url + 'ubuntu/ubuntu-regular.woff') format('woff'); font-weight: normal; font-style: normal; }
34. .woff2 ✓ 4.4* .woff ✓ ✓ 9+ ✓ ✓ ✓ 4.4 .ttf/.otf ✓ ✓ ✓ ✓ ✓ ✓ .eot 6-8 .svg ✓ ✓ ✓ 3.x
35. @font-face { font-family: 'Ubuntu'; src: url($font-url + 'ubuntu/ubuntu-normal.woff2') format('woff2'), url($font-url + 'ubuntu/ubuntu-normal.woff') format('woff'), url($font-url + 'ubuntu/ubuntu-normal.eot) format(eot), url($font-url + 'ubuntu/ubuntu-normal.svg) format(svg); font-weight: normal; font-style: normal; }
36. icons
37. Tree by David Chapman from The Noun Project font icons - 1 request - 1 cor - difícil manutenção + - - fácil de estilizar - retina friendly
39. Unload custom font \32 ~ □ https://code.google.com/p/chromium/issues/detail?id=322125 https://github.com/FortAwesome/Font-Awesome/issues/2763
40. CORS Font Request https://bugzilla.mozilla.org/show_bug.cgi?id=604421 - cabeçalhos CORS - mesmo domínio
41. CSS3111 “Unknown error”
42. FontForge
44. Flash Of Unstyled Text
45. Tree by David Chapman from The Noun Project svg icons - múltiplas cores - fácil de estilizar - retina friendly - fácil manutenção - aceita media queries - múltiplas requests + -
46. Tree by David Chapman from The Noun Project svg sprites - múltiplas cores - 1 request - retina friendly - fácil manutenção - aceita media queries - difícil de estilizar + -
47. png fallback
48. grunt-svgmin dr-grunt-svg-sprites grunt-contrib-sass grunt-shared-config
49. @each $icon in $allsets { $collection-name: nth($icon, 1); @if $collection-name == $set { $collection-name: convert-stringList($collection-name); $icon-name: nth($icon, 2); .#{$icon-name}16 { @include zaz-icon($icon-collection, #{$icon-name}, 2); } ... }
50. créditos
51. zaz team Beto @FelipeNMoura @Jaydson
52. @Jaydson http://goo.gl/22MjA3 sobre o Terra... http://goo.gl/DItj6I @FelipeNMoura framework continuous integration
53. @AtilaFassina AtilaFassina.com hey@AtilaFassina.com Grazie