Blank Template - less is more #jd13ch

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