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
1k
Modulare Webentwicklung
flocke
1
560
Neuer Workflow für ein modernes Web
flocke
1
2k
CSS-Cookbook - Auszug
flocke
1
190
Modulare Webentwicklung mit Sass
flocke
0
1.4k
Webseiten modular entwickeln
flocke
1
13k
Responsive Webdesign - wir müssen uns ändern
flocke
0
1.9k
Modulare Webentwicklung
flocke
1
850
Am Ende ist doch alles HTML
flocke
1
1.7k
Other Decks in Technology
See All in Technology
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
720
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.4k
いいたいことちゃんという
tkengo
0
260
Building Dashboards as a Hobby
egmc
0
430
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
950
同じ様なUIをiOS/Android間で合わせるヒントNo.2
fumiyasac0921
1
110
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.4k
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
310
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
790
生産性向上チームの紹介
cybozuinsideout
PRO
1
970
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.2k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
1.9k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
The Pragmatic Product Professional
lauravandoore
26
5.8k
KATA
mclloyd
16
12k
Into the Great Unknown - MozCon
thekraken
15
1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
44
How STYLIGHT went responsive
nonsquared
92
4.8k
The Mythical Team-Month
searls
217
42k
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