Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webseiten modular entwickeln
Search
Jens Grochtdreis
May 28, 2015
Technology
0
2.1k
Webseiten modular entwickeln
Vortrag auf der Contao Konferenz in Lüneburg
Jens Grochtdreis
May 28, 2015
Tweet
Share
More Decks by Jens Grochtdreis
See All by Jens Grochtdreis
Pattern Libraries im Zentrum von Entwicklung und Design
flocke
0
1.1k
Modulare Webentwicklung
flocke
1
660
Neuer Workflow für ein modernes Web
flocke
1
2.1k
CSS-Cookbook - Auszug
flocke
1
200
Modulare Webentwicklung mit Sass
flocke
0
1.5k
Webseiten modular entwickeln
flocke
1
14k
Responsive Webdesign - wir müssen uns ändern
flocke
0
2k
Modulare Webentwicklung
flocke
1
860
Am Ende ist doch alles HTML
flocke
1
1.8k
Other Decks in Technology
See All in Technology
Functional TypeScript
naoya
7
3.4k
タイミーのBraze活用 ~PUSH通知を活用したレコメンド~
ozeshun
2
130
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
200
歴史と背景から改めて振り返るVPC
shotashiratori
2
220
エンジニアリングマネージャーが紐解く、事業視点から組織文化まで、包括的アプローチの探求 / READYFOR
9ma3r
14
2.3k
SAVEPOINT α版
savepoint
0
350
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
2.8k
Datadog を使ったプロダクトとクラウドの セキュリティモニタリング
mrtc0
0
560
分野に潜むツールの紹介
pojiro
1
340
RAGHack: Kickoff and RAG 101
pamelafox
0
250
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
390
日経電子版から始まった内製開発の現在地と向き合っている課題/inhouse
nishiuma
0
240
Featured
See All Featured
Building Applications with DynamoDB
mza
89
5.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
47
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Into the Great Unknown - MozCon
thekraken
28
1.4k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Scaling GitHub
holman
458
140k
Adopting Sorbet at Scale
ufuk
72
8.9k
How to Ace a Technical Interview
jacobian
275
23k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Automating Front-end Workflow
addyosmani
1365
200k
Transcript
Webseiten modular entwickeln Jens Grochtdreis
Ziele ‣ Mehrere Personen arbeiten an einem Projekt. ‣ Einzelne
Seitenbestandteile können in anderen Projekten wiederverwendet werden. ‣ Theming ‣ Dokumentation in einem Living Styleguide ‣ Arbeit in einem Living Styleguide http://upload.wikimedia.org/wikipedia/commons/3/32/Lego_Color_Bricks.jpg
Seite ist eine Ansammlung von Modulen
http://daverupert.com/2013/04/responsive-deliverables/
None
None
Platzierung sollte egal sein
http://styletil.es/
http://styletil.es/
http://styletil.es/
http://styletil.es/
http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
Wichtigste Grundbedingung
Die Module müssen für sich selber stehen!
None
Möglichst wenige Ebenen!
None
None
Styleguides
http://codeforamerica.clearleft.com/
http://codeforamerica.clearleft.com/
http://ux.mailchimp.com/patterns/tables
http://rackerlabs.github.io/canon/ui-components/#tables
https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05
http://styleguides.io/
Mein aktueller Ansatz
None
None
Nächste Modifikation
None
inc/ sass/
None
Richtiger Umgang mit Klassen
https://github.com/stubbornella/oocss/wiki
None
None
None
Modifikator
None
Das media-Element http://jsbin.com/ipupew/2/
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
https://smacss.com/
1. Base 2. Layout 3. Module 4. State (Zustand) 5.
Theme Die einzelnen Bestandteile
None
None
http://bem.info/method/ BEM
Block, Element, Modifier
Namenskonventionen
http://snap.kapowaz.net/loloocss.png https://twitter.com/kapowaz/status/474195847694274561
https://twitter.com/oknoblich/status/472320546202742784
https://css-tricks.com/bem-101/
http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d
1 2 3 1
None
http://sassmeister.com/gist/c608e47ffd21f2166c56 Ab Sass 3.3
NCSS https://github.com/redaxmedia/ncss
Strukturelle Klassen
Typ-Klassen
Modifikator-Klassen
Funktionale Klassen
Namespace-Klassen
Zusammenfassen und Ausnahmen gestalten
None
None
Unpraktische Klassennamen
None
None
Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de http://slideshare.net/Flocke669 https://speakerdeck.com/flocke