Blank Template - less is more #jd13ch

  • View
    2.675

  • Download
    0

Embed Size (px)

DESCRIPTION

Vortrag über Blank Template auf dem Joomla!Day Schweiz (Bern) am 21.09.2013

Text of Blank Template - less is more #jd13ch

  • 1. Alexander Schmidt Blank Template Blank Template Blank Template less is more

2. Joomla! Junkie CSS Guru Schreibt Code, Bcher, Artikel, Tweets ... Hlt Vorlesungen, Vortrge, Workshops ... Alexander Schmidt 3. 2006 Basis-Template 2009 1. Buchverffentlichung 2011 http://blank.vc 2013 BT on GitHub 4. 100.000 Downloads 5. 185 Staaten 6. deutsch englisch spanisch portugiesisch russisch chinesisch 7. Ziel? 8. Der einfachste und schnellste Weg, sein eigenes Template zu entwickeln. 9. gleich anfangen normalize.css 10. cross browser search input input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } 11. Schnelle Ladezeiten zusammenfhren und komprimieren 12. CSS-Kompressor template.css.php 13. ... // unntige Leerzeichen lschen $buffer = str_replace('{ ', '{', $buffer); $buffer = str_replace(' }', '}', $buffer); ... 14. Schnelle Entwicklung Bibliotheken - CSS-Prprozessoren - Frameworks 15. jQuery Die weniger-schreiben-mehr-machen JavaScript Bibliothek 16. $( "a.drupal" ).attr( "href","http://joomla.org" ); 17. Vorsicht! Keine essentiellen Logiken mit jQuery! 18. 1. [die Tonne] B. [Drupal Core] Manipulationen wenns geht in ... [WordPress3] D. [Overrides] J. 19. LESS und SASS CSS-Prprozessoren 20. Variablen Mixins Verschachtelung Funktionen Operatoren 21. // LESS@color: #4D926F;#header { color: @color;}h2 { color: @color;} /* CSS */#header { color: #4D926F;}h2 { color: #4D926F;} Variablen 22. // LESS.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners;}#footer { .rounded-corners(10px);} /* CSS */#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}#footer { border-radius: 10px; -webkit- border-radius: 10px; -moz-border- radius: 10px;} Mixins 23. // LESS#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text- decoration: none; &:hover { border-width: 1px } } }} /* CSS */#header h1 { font-size: 26px; font-weight: bold;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;} Verschachtelung 24. // LESS@the-border: 1px;@base-color: #111;@red: #842210;#header { color: (@base-color * 3); border-left: @the-border; border-right: (@the- border * 2);}#footer { color: (@base- color + #003300); border-color: desaturate(@red, 10%);} /* CSS */#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;} Funktionen & Operatoren 25. Wichtig! Nach der Entwicklung kompilieren. 26. Aus template.less mache template.css 27. Nutze Compiler oder Plugins 28. Frameworks Bootstrap und Foundation 29. Grid System flexibel und gerteunabhngig 30. 960 Pixel Breite 12 Spalten je 60 Pixel 10 Pixel Abstand links und rechts 31. div class="col-md-8">content

s 32. Typografie 33. h1. Sehr groe berschrift h2. Groe berschrift h3. Mittlere berschrift h4. Moderate berschrift h5. Kleine berschrift h6. Winzige berschrift 34. h1. Sehr groe berschrift h2. Groe berschrift h3. Mittlere berschrift h4. Moderate berschrift h5. Kleine berschrift h6. Winzige berschrift 35. Dropdown, Tooltips, Thumbnails, Buttons, Icons, Input groups, Breadcrumbs, Navs, Pagination, Labels Badges, Alerts, Progress bars, Media Objects, List groups, Panels, Wells, Tables, Orbit, Modal, Section, Joyride, Interchange, Reveal, ... 36. Dropdown, Tooltips, Thumbnails, Buttons, Icons, Input groups, Breadcrumbs, Navs, Pagination, Labels Badges, Alerts, Progress bars, Media Objects, List groups, Panels, Wells, Tables, Orbit, Modal, Section, Joyride, Interchange, Reveal, ... 37.
Erfolgreich! Du konntest bis hier her folgen.
38. So weit, so gut. 39. Das Blank Template ist ein Werkzeug. 40. Kein fertiges Template! 41. Geschrieben auf dem Editor Sublime Text 2 42. Perfect Workflow in Sublime Text 2 http://itr.im/stt 43. Entwickelt unter GitHub http://itr.im/btgit 44. http://try.github.io 45. Mach mit! 46. Ach ja ... 47. Frei fr kommerzielle Projekte 48. Danke frs Zuhren! 49. Fragen? 50. Dankeschn! http://blank.vc Fr frei Software