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
830
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
TypeScript をより型安全に扱うプラクティス #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2.1k
これならできる!Kotlin・Spring・DDDを活用したAll in oneのマイクロサービス開発術
demaecan
0
210
AIエージェント実践集中コース LT
okaru
1
200
OpenTelemetry Collector internals
ymotongpoo
4
430
「伝える」を加速させるCursor術
naomix
0
490
AI Engineering Summit Pre Event LT #10
okaru
2
500
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
1
580
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
48
33k
おれのAI活用の現状とこれから
tsukasagr
0
130
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
1
740
ai bot got sick (abc 2025s version)
kojira
0
150
メルカリにおけるデータアナリティクス AI エージェント「Socrates」と ADK 活用事例
na0
15
8.1k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Building an army of robots
kneath
306
45k
Scaling GitHub
holman
459
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Practical Orchestrator
shlominoach
188
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Thoughts on Productivity
jonyablonski
69
4.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
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