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

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

2. Joomla! Junkie
CSS Guru
Schreibt Code, Bücher,
Artikel, Tweets ...
Hält Vorlesungen, Vorträge,
Workshops ...
Alexander
Schmidt

3. 2006 Basis-Template
2009 1. Buchveröffentlichung
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
zusammenführen und komprimieren

12. CSS-Kompressor
template.css.php

13. ...
// unnötige Leerzeichen löschen
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
...

14. Schnelle Entwicklung
Bibliotheken - CSS-Präprozessoren - 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 wenn‘s geht in ...
[WordPress3] D.
[Overrides] J.

19. LESS und SASS
CSS-Präprozessoren

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

26. Wichtig!
Nach der Entwicklung kompilieren.

27. Aus
template.less
mache
template.css

28. Nutze
Compiler
oder
Plugins

29. Frameworks
Bootstrap und Foundation

31. Grid System
flexibel und geräteunabhängig

32. 960 Pixel Breite
12 Spalten je 60 Pixel
10 Pixel Abstand links und rechts

33. div class="col-md-8">content</div> <div class="col-md-4">s

36. Typografie

37. h1. Sehr große
Überschrift
h2. Große Überschrift
h3. Mittlere Überschrift
h4. Moderate Überschrift
h5. Kleine Überschrift
h6. Winzige Überschrift

38. <h1>h1. Sehr große Überschrift</h1>
<h2>h2. Große Überschrift</h2>
<h3>h3. Mittlere Überschrift</h3>
<h4>h4. Moderate Überschrift</h4>
<h5>h5. Kleine Überschrift</h5>
<h6>h6. Winzige Überschrift</h6>

39. 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, ...

40. 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, ...

41. <div class="alert alert-success"> <button aria-hidden="true"
data-dismiss="alert"
class="close" type="button">×</button>
<strong>Erfolgreich!</strong> Du konntest bis hier her
folgen.</div>

42. So weit,
so gut.

43. Das Blank Template
ist ein Werkzeug.

44. Kein
fertiges Template!

45. Geschrieben auf dem Editor
Sublime Text 2

46. Perfect Workflow in Sublime Text 2
http://itr.im/stt

47. Entwickelt unter GitHub
http://itr.im/btgit

48. http://try.github.io

49. Mach mit!

50. Ach ja ...

51. Frei
für kommerzielle Projekte

52. Danke fürs Zuhören!

53. Fragen?

54. Dankeschön!
http://blank.vc
Für frei Software