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.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
1.2k
Modulare Webentwicklung
flocke
1
840
Neuer Workflow für ein modernes Web
flocke
1
2.2k
CSS-Cookbook - Auszug
flocke
1
220
Modulare Webentwicklung mit Sass
flocke
0
1.7k
Webseiten modular entwickeln
flocke
1
14k
Responsive Webdesign - wir müssen uns ändern
flocke
0
2.1k
Modulare Webentwicklung
flocke
1
900
Am Ende ist doch alles HTML
flocke
1
1.8k
Other Decks in Technology
See All in Technology
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
160
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
2
1.3k
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
900
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
3
1.8k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
210
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
230
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
260
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
180
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
620
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
630
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Scaling GitHub
holman
460
140k
Speed Design
sergeychernyshev
32
1k
Making Projects Easy
brettharned
116
6.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Docker and Python
trallard
44
3.5k
Designing Experiences People Love
moore
142
24k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
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