Upload
alexander-schmidt
View
2.697
Download
0
Embed Size (px)
DESCRIPTION
Vortrag über Blank Template auf dem Joomla!Day Schweiz (Bern) am 21.09.2013
Citation preview
Alexander Schmidt
Blank Template
less is more
Joomla! JunkieCSS Guru
Schreibt Code, Bücher, Artikel, Tweets ...
Hält Vorlesungen, Vorträge, Workshops ...
Alexander Schmidt
2006 Basis-Template
2009 1. Buchveröffentlichung
2011 http://blank.vc
2013 BT on GitHub
100.000 Downloads
185 Staaten
deutschenglischspanisch
portugiesischrussisch
chinesisch
Ziel?
Der einfachste und schnellste Weg,
sein eigenes Templatezu entwickeln.
gleich anfangennormalize.css
cross browser search input
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
Schnelle Ladezeiten
zusammenführen und komprimieren
CSS-Kompressortemplate.css.php
...// unnötige Leerzeichen löschen $buffer = str_replace('{ ', '{', $buffer);$buffer = str_replace(' }', '}', $buffer);...
Schnelle Entwicklung
Bibliotheken - CSS-Präprozessoren - Frameworks
jQueryDie „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 SASSCSS-Präprozessoren
VariablenMixins
VerschachtelungFunktionenOperatoren
// LESS@color: #4D926F;#header { color: @color;}h2 { color: @color;}
/* CSS */#header { color: #4D926F;}h2 { color: #4D926F;}
Variablen
// 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
// 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
// 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
Wichtig!Nach der Entwicklung kompilieren.
Aus
template.less
mache
template.css
Nutze
Compiler
oder
Plugins
FrameworksBootstrap und Foundation
Grid Systemflexibel und geräteunabhängig
960 Pixel Breite12 Spalten je 60 Pixel
10 Pixel Abstand links und rechts
<div class="row"> <div class="col-md-8">content</div> <div class="col-md-4">sidebar</div></div>
Typografie
h1. Sehr große Überschrifth2. Große Überschrifth3. Mittlere Überschrifth4. Moderate Überschrifth5. Kleine Überschrift
h6. Winzige Überschrift
<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>
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, ...
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, ...
<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>
So weit, so gut.
Das Blank Templateist ein Werkzeug.
Keinfertiges 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 ...
Freifür kommerzielle Projekte
Danke fürs Zuhören!
Fragen?
Dankeschön!http://blank.vc
Für frei Software