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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Jens Grochtdreis
May 28, 2015
Technology
2.2k
0
Share
Webseiten modular entwickeln
Vortrag auf der Contao Konferenz in Lüneburg
Jens Grochtdreis
May 28, 2015
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
1k
Neuer Workflow für ein modernes Web
flocke
1
2.2k
CSS-Cookbook - Auszug
flocke
1
230
Modulare Webentwicklung mit Sass
flocke
0
1.8k
Webseiten modular entwickeln
flocke
1
14k
Responsive Webdesign - wir müssen uns ändern
flocke
0
2.1k
Modulare Webentwicklung
flocke
1
950
Am Ende ist doch alles HTML
flocke
1
1.8k
Other Decks in Technology
See All in Technology
No Types Needed, Just Callable Method Check
dak2
1
940
コードや知識を組み込む / Incorporate Code and Knowledge
ks91
PRO
0
130
AIを共同作業者にして書籍を執筆する方法 / How to Write a Book with AI as a Co-Creator
ama_ch
2
130
え!?初参加で 300冊以上 も頒布!? これは大成功!そのはずなのに わいの財布は 赤字 の件
hellohazime
0
160
実践ハーネスエンジニアリング:TAKTで実現するAIエージェント制御 / Practical Harness Engineering: AI Agent Control Enabled by TAKT
nrslib
9
4.4k
マルチエージェント × ハーネスエンジニアリング × GitLab Duo Agent Platformで実現する「AIエージェントに仕事をさせる時代へ。」 / 20260421 GitLab Duo Agent Platform
n11sh1
0
150
Good Enough Types: Heuristic Type Inference for Ruby
riseshia
0
150
[最強DB講義]推薦システム | 基礎編
recsyslab
PRO
1
170
[OpsJAWS 40]リリースしたら終わり、じゃなかった。セキュリティ空白期間をAWS Security Agentで埋める
sh_fk2
3
230
"SQLは書けません"から始まる データドリブン
kubell_hr
2
470
インターネットの技術 / Internet technology
ks91
PRO
0
200
職能の壁を取り払った先で見えた壁 -AI時代のクロスファンクショナル組織-
shimotaroo
1
120
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
My Coaching Mixtape
mlcsv
0
99
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Visualization
eitanlees
150
17k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
710
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.9k
First, design no harm
axbom
PRO
2
1.2k
Product Roadmaps are Hard
iamctodd
PRO
55
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