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
850
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
モダンフロントエンド 開発研修
recruitengineers
PRO
4
1k
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
660
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
7
790
あなたの知らない OneDrive
murachiakira
0
240
LLMエージェント時代に適応した開発フロー
hiragram
1
420
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
340
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.9k
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
650
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
2.9k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Gamification - CAS2011
davidbonilla
81
5.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Bash Introduction
62gerente
614
210k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Ace a Technical Interview
jacobian
279
23k
Balancing Empowerment & Direction
lara
2
590
How GitHub (no longer) Works
holman
315
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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