54
Alexander Schmidt Blank Template less is more

Blank Template - less is more #jd13ch

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Blank Template - less is more #jd13ch

Alexander Schmidt

Blank Template

less is more

Page 2: Blank Template - less is more #jd13ch

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

2006 Basis-Template

2009 1. Buchveröffentlichung

2011 http://blank.vc

2013 BT on GitHub

Page 4: Blank Template - less is more #jd13ch

100.000 Downloads

Page 5: Blank Template - less is more #jd13ch

185 Staaten

Page 6: Blank Template - less is more #jd13ch

deutschenglischspanisch

portugiesischrussisch

chinesisch

Page 7: Blank Template - less is more #jd13ch

Ziel?

Page 8: Blank Template - less is more #jd13ch

Der einfachste und schnellste Weg,

sein eigenes Templatezu entwickeln.

Page 9: Blank Template - less is more #jd13ch

gleich anfangennormalize.css

Page 10: Blank Template - less is more #jd13ch

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

Schnelle Ladezeiten

zusammenführen und komprimieren

Page 12: Blank Template - less is more #jd13ch

CSS-Kompressortemplate.css.php

Page 13: Blank Template - less is more #jd13ch

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

Page 14: Blank Template - less is more #jd13ch

Schnelle Entwicklung

Bibliotheken - CSS-Präprozessoren - Frameworks

Page 15: Blank Template - less is more #jd13ch

jQueryDie „weniger-schreiben-mehr-machen“

JavaScript Bibliothek

Page 16: Blank Template - less is more #jd13ch

$( "a.drupal" ).attr( "href","http://joomla.org" );

Page 17: Blank Template - less is more #jd13ch

Vorsicht!Keine essentiellen Logiken mit jQuery!

Page 18: Blank Template - less is more #jd13ch

1. [die Tonne]

B. [Drupal Core]

Manipulationen wenn‘s geht in ...

[WordPress3] D.

[Overrides] J.

Page 19: Blank Template - less is more #jd13ch

LESS und SASSCSS-Präprozessoren

Page 20: Blank Template - less is more #jd13ch

VariablenMixins

VerschachtelungFunktionenOperatoren

Page 21: Blank Template - less is more #jd13ch

// 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

// 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

// 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

// 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
Page 26: Blank Template - less is more #jd13ch

Wichtig!Nach der Entwicklung kompilieren.

Page 27: Blank Template - less is more #jd13ch

Aus

template.less

mache

template.css

Page 28: Blank Template - less is more #jd13ch

Nutze

Compiler

oder

Plugins

Page 29: Blank Template - less is more #jd13ch

FrameworksBootstrap und Foundation

Page 30: Blank Template - less is more #jd13ch
Page 31: Blank Template - less is more #jd13ch

Grid Systemflexibel und geräteunabhängig

Page 32: Blank Template - less is more #jd13ch

960 Pixel Breite12 Spalten je 60 Pixel

10 Pixel Abstand links und rechts

Page 33: Blank Template - less is more #jd13ch

<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
Page 35: Blank Template - less is more #jd13ch
Page 36: Blank Template - less is more #jd13ch

Typografie

Page 37: Blank Template - less is more #jd13ch

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

<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

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

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

<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

So weit, so gut.

Page 43: Blank Template - less is more #jd13ch

Das Blank Templateist ein Werkzeug.

Page 44: Blank Template - less is more #jd13ch

Keinfertiges Template!

Page 45: Blank Template - less is more #jd13ch

Geschrieben auf dem Editor

Sublime Text 2

Page 46: Blank Template - less is more #jd13ch

Perfect Workflow in Sublime Text 2

http://itr.im/stt

Page 47: Blank Template - less is more #jd13ch

Entwickelt unter GitHub

http://itr.im/btgit

Page 48: Blank Template - less is more #jd13ch

http://try.github.io

Page 49: Blank Template - less is more #jd13ch

Mach mit!

Page 50: Blank Template - less is more #jd13ch

Ach ja ...

Page 51: Blank Template - less is more #jd13ch

Freifür kommerzielle Projekte

Page 52: Blank Template - less is more #jd13ch

Danke fürs Zuhören!

Page 53: Blank Template - less is more #jd13ch

Fragen?

Page 54: Blank Template - less is more #jd13ch

Dankeschön!http://blank.vc

Für frei Software