Alexander Schmidt
Blank Template
Blank Template
Blank Template
less is more
Joomla! Junkie
CSS Guru
Schreibt Code, Bücher,
Artikel, Tweets ...
Hält Vorlesungen, Vorträge,
Workshops ...
Alexander
Sch...
2006 Basis-Template
2009 1. Buchveröffentlichung
2011 http://blank.vc
2013 BT on GitHub
100.000 Downloads
185 Staaten
deutsch
englisch
spanisch
portugiesisch
russisch
chinesisch
Ziel?
Der einfachste und
schnellste Weg,
sein eigenes Template
zu entwickeln.
gleich anfangen
normalize.css
cross browser search
input
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box...
Schnelle Ladezeiten
zusammenführen und komprimieren
CSS-Kompressor
template.css.php
...
// unnötige Leerzeichen löschen
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
...
Schnelle Entwicklung
Bibliotheken - CSS-Präprozessoren - Frameworks
jQuery
Die „weniger-schreiben-mehr-machen“
JavaScript Bibliothek
$( "a.drupal" ).attr( "href","http://joomla.org" );
Vorsicht!
Keine essentiellen Logiken mit jQuery!
1. [die Tonne]
B. [Drupal Core]
Manipulationen wenn‘s geht in ...
[WordPress3] D.
[Overrides] J.
LESS und SASS
CSS-Präprozessoren
Variablen
Mixins
Verschachtelung
Funktionen
Operatoren
// LESS@color:
#4D926F;#header { color:
@color;}h2 { color:
@color;}
/* CSS */#header { color:
#4D926F;}h2 { color:
#4D926...
// LESS.rounded-corners (@radius:
5px) { border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radi...
// LESS#header { h1 { font-size:
26px; font-weight: bold; } p
{ font-size: 12px; a { text-
decoration: none; &:hover
{ bor...
// LESS@the-border: 1px;@base-color:
#111;@red: #842210;#header
{ color: (@base-color * 3); border-left:
@the-border; bord...
Wichtig!
Nach der Entwicklung kompilieren.
Aus
template.less
mache
template.css
Nutze
Compiler
oder
Plugins
Frameworks
Bootstrap und Foundation
Grid System
flexibel und geräteunabhängig
960 Pixel Breite
12 Spalten je 60 Pixel
10 Pixel Abstand links und rechts
div class="col-md-8">content</div> <div class="col-md-4">s
Typografie
h1. Sehr große
Überschrift
h2. Große Überschrift
h3. Mittlere Überschrift
h4. Moderate Überschrift
h5. Kleine Überschrift
...
<h1>h1. Sehr große Überschrift</h1>
<h2>h2. Große Überschrift</h2>
<h3>h3. Mittlere Überschrift</h3>
<h4>h4. Moderate Über...
Dropdown, Tooltips, Thumbnails,
Buttons, Icons, Input groups,
Breadcrumbs, Navs, Pagination,
Labels Badges, Alerts, Progre...
Dropdown, Tooltips, Thumbnails,
Buttons, Icons, Input groups,
Breadcrumbs, Navs, Pagination,
Labels Badges, Alerts, Progre...
<div class="alert alert-success"> <button aria-hidden="true"
data-dismiss="alert"
class="close" type="button">×</button>
<...
So weit,
so gut.
Das Blank Template
ist ein Werkzeug.
Kein
fertiges Template!
Geschrieben auf dem Editor
Sublime Text 2
Perfect Workflow in Sublime Text 2
http://itr.im/stt
Entwickelt unter GitHub
http://itr.im/btgit
http://try.github.io
Mach mit!
Ach ja ...
Frei
für kommerzielle Projekte
Danke fürs Zuhören!
Fragen?
Dankeschön!
http://blank.vc
Für frei Software
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Upcoming SlideShare
Loading in …5
×

Blank Template - less is more #jd13ch

3,263 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,263
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Blank Template - less is more #jd13ch

  1. 1. Alexander Schmidt Blank Template Blank Template Blank Template less is more
  2. 2. Joomla! Junkie CSS Guru Schreibt Code, Bücher, Artikel, Tweets ... Hält Vorlesungen, Vorträge, Workshops ... Alexander Schmidt
  3. 3. 2006 Basis-Template 2009 1. Buchveröffentlichung 2011 http://blank.vc 2013 BT on GitHub
  4. 4. 100.000 Downloads
  5. 5. 185 Staaten
  6. 6. deutsch englisch spanisch portugiesisch russisch chinesisch
  7. 7. Ziel?
  8. 8. Der einfachste und schnellste Weg, sein eigenes Template zu entwickeln.
  9. 9. gleich anfangen normalize.css
  10. 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. 11. Schnelle Ladezeiten zusammenführen und komprimieren
  12. 12. CSS-Kompressor template.css.php
  13. 13. ... // unnötige Leerzeichen löschen $buffer = str_replace('{ ', '{', $buffer); $buffer = str_replace(' }', '}', $buffer); ...
  14. 14. Schnelle Entwicklung Bibliotheken - CSS-Präprozessoren - Frameworks
  15. 15. jQuery Die „weniger-schreiben-mehr-machen“ JavaScript Bibliothek
  16. 16. $( "a.drupal" ).attr( "href","http://joomla.org" );
  17. 17. Vorsicht! Keine essentiellen Logiken mit jQuery!
  18. 18. 1. [die Tonne] B. [Drupal Core] Manipulationen wenn‘s geht in ... [WordPress3] D. [Overrides] J.
  19. 19. LESS und SASS CSS-Präprozessoren
  20. 20. Variablen Mixins Verschachtelung Funktionen Operatoren
  21. 21. // LESS@color: #4D926F;#header { color: @color;}h2 { color: @color;} /* CSS */#header { color: #4D926F;}h2 { color: #4D926F;} Variablen
  22. 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. 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. 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. 25. Wichtig! Nach der Entwicklung kompilieren.
  26. 26. Aus template.less mache template.css
  27. 27. Nutze Compiler oder Plugins
  28. 28. Frameworks Bootstrap und Foundation
  29. 29. Grid System flexibel und geräteunabhängig
  30. 30. 960 Pixel Breite 12 Spalten je 60 Pixel 10 Pixel Abstand links und rechts
  31. 31. div class="col-md-8">content</div> <div class="col-md-4">s
  32. 32. Typografie
  33. 33. h1. Sehr große Überschrift h2. Große Überschrift h3. Mittlere Überschrift h4. Moderate Überschrift h5. Kleine Überschrift h6. Winzige Überschrift
  34. 34. <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>
  35. 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. 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. 37. <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>
  38. 38. So weit, so gut.
  39. 39. Das Blank Template ist ein Werkzeug.
  40. 40. Kein fertiges Template!
  41. 41. Geschrieben auf dem Editor Sublime Text 2
  42. 42. Perfect Workflow in Sublime Text 2 http://itr.im/stt
  43. 43. Entwickelt unter GitHub http://itr.im/btgit
  44. 44. http://try.github.io
  45. 45. Mach mit!
  46. 46. Ach ja ...
  47. 47. Frei für kommerzielle Projekte
  48. 48. Danke fürs Zuhören!
  49. 49. Fragen?
  50. 50. Dankeschön! http://blank.vc Für frei Software

×