Download - Blank Template - less is more #jd13ch
![Page 1: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/1.jpg)
Alexander Schmidt
Blank Template
less is more
![Page 2: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/2.jpg)
Joomla! JunkieCSS Guru
Schreibt Code, Bücher, Artikel, Tweets ...
Hält Vorlesungen, Vorträge, Workshops ...
Alexander Schmidt
![Page 3: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/3.jpg)
2006 Basis-Template
2009 1. Buchveröffentlichung
2011 http://blank.vc
2013 BT on GitHub
![Page 4: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/4.jpg)
100.000 Downloads
![Page 5: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/5.jpg)
185 Staaten
![Page 6: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/6.jpg)
deutschenglischspanisch
portugiesischrussisch
chinesisch
![Page 7: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/7.jpg)
Ziel?
![Page 8: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/8.jpg)
Der einfachste und schnellste Weg,
sein eigenes Templatezu entwickeln.
![Page 9: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/9.jpg)
gleich anfangennormalize.css
![Page 10: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/10.jpg)
cross browser search input
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
![Page 11: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/11.jpg)
Schnelle Ladezeiten
zusammenführen und komprimieren
![Page 12: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/12.jpg)
CSS-Kompressortemplate.css.php
![Page 13: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/13.jpg)
...// unnötige Leerzeichen löschen $buffer = str_replace('{ ', '{', $buffer);$buffer = str_replace(' }', '}', $buffer);...
![Page 14: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/14.jpg)
Schnelle Entwicklung
Bibliotheken - CSS-Präprozessoren - Frameworks
![Page 15: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/15.jpg)
jQueryDie „weniger-schreiben-mehr-machen“
JavaScript Bibliothek
![Page 16: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/16.jpg)
$( "a.drupal" ).attr( "href","http://joomla.org" );
![Page 17: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/17.jpg)
Vorsicht!Keine essentiellen Logiken mit jQuery!
![Page 18: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/18.jpg)
1. [die Tonne]
B. [Drupal Core]
Manipulationen wenn‘s geht in ...
[WordPress3] D.
[Overrides] J.
![Page 19: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/19.jpg)
LESS und SASSCSS-Präprozessoren
![Page 20: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/20.jpg)
VariablenMixins
VerschachtelungFunktionenOperatoren
![Page 21: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/21.jpg)
// LESS@color: #4D926F;#header { color: @color;}h2 { color: @color;}
/* CSS */#header { color: #4D926F;}h2 { color: #4D926F;}
Variablen
![Page 22: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/22.jpg)
// 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
![Page 23: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/23.jpg)
// 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
![Page 24: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/24.jpg)
// 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
![Page 25: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/25.jpg)
![Page 26: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/26.jpg)
Wichtig!Nach der Entwicklung kompilieren.
![Page 27: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/27.jpg)
Aus
template.less
mache
template.css
![Page 28: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/28.jpg)
Nutze
Compiler
oder
Plugins
![Page 29: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/29.jpg)
FrameworksBootstrap und Foundation
![Page 30: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/30.jpg)
![Page 31: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/31.jpg)
Grid Systemflexibel und geräteunabhängig
![Page 32: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/32.jpg)
960 Pixel Breite12 Spalten je 60 Pixel
10 Pixel Abstand links und rechts
![Page 33: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/33.jpg)
<div class="row"> <div class="col-md-8">content</div> <div class="col-md-4">sidebar</div></div>
![Page 34: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/34.jpg)
![Page 35: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/35.jpg)
![Page 36: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/36.jpg)
Typografie
![Page 37: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/37.jpg)
h1. Sehr große Überschrifth2. Große Überschrifth3. Mittlere Überschrifth4. Moderate Überschrifth5. Kleine Überschrift
h6. Winzige Überschrift
![Page 38: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/38.jpg)
<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>
![Page 39: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/39.jpg)
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, ...
![Page 40: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/40.jpg)
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, ...
![Page 41: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/41.jpg)
<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>
![Page 42: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/42.jpg)
So weit, so gut.
![Page 43: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/43.jpg)
Das Blank Templateist ein Werkzeug.
![Page 44: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/44.jpg)
Keinfertiges Template!
![Page 45: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/45.jpg)
Geschrieben auf dem Editor
Sublime Text 2
![Page 46: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/46.jpg)
Perfect Workflow in Sublime Text 2
http://itr.im/stt
![Page 47: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/47.jpg)
Entwickelt unter GitHub
http://itr.im/btgit
![Page 48: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/48.jpg)
http://try.github.io
![Page 49: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/49.jpg)
Mach mit!
![Page 50: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/50.jpg)
Ach ja ...
![Page 51: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/51.jpg)
Freifür kommerzielle Projekte
![Page 52: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/52.jpg)
Danke fürs Zuhören!
![Page 53: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/53.jpg)
Fragen?
![Page 54: Blank Template - less is more #jd13ch](https://reader033.vdocuments.site/reader033/viewer/2022061221/54bd88e34a7959913b8b4647/html5/thumbnails/54.jpg)
Dankeschön!http://blank.vc
Für frei Software