Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Webseiten modular entwickeln
Jens Grochtdreis
May 28, 2015
Technology
0
2k
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
840
Modulare Webentwicklung
flocke
1
370
Neuer Workflow für ein modernes Web
flocke
1
1.9k
CSS-Cookbook - Auszug
flocke
1
180
Modulare Webentwicklung mit Sass
flocke
0
1.1k
Webseiten modular entwickeln
flocke
1
11k
Responsive Webdesign - wir müssen uns ändern
flocke
0
1.8k
Modulare Webentwicklung
flocke
1
830
Am Ende ist doch alles HTML
flocke
1
1.7k
Other Decks in Technology
See All in Technology
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
100
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
11
3.5k
Pentesting Password Reset Functionality
anugrahsr
0
190
マネーフォワードクラウドを支える事業者基盤
machisuke
0
220
Kaggleシミュレーションコンペの動向
nagiss
0
220
オンプレk8sとEKSの並行運用の実際
ch1aki
0
130
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
100
re:Inventで発表があったIoT事例の紹介と考察
kizawa2020
0
130
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
1
330
OpenShiftのリリースノートを整理してみた
loftkun
2
190
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
120
プログラミング支援AI GitHub Copilot すごいの話
moyashi
0
280
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
The Pragmatic Product Professional
lauravandoore
21
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Bootstrapping a Software Product
garrettdimon
299
110k
Ruby is Unlike a Banana
tanoku
93
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Practical Orchestrator
shlominoach
178
8.9k
Making the Leap to Tech Lead
cromwellryan
116
7.6k
Navigating Team Friction
lara
176
12k
Visualization
eitanlees
128
12k
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