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.1k
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
1k
Modulare Webentwicklung
flocke
1
560
Neuer Workflow für ein modernes Web
flocke
1
2k
CSS-Cookbook - Auszug
flocke
1
190
Modulare Webentwicklung mit Sass
flocke
0
1.4k
Webseiten modular entwickeln
flocke
1
13k
Responsive Webdesign - wir müssen uns ändern
flocke
0
1.9k
Modulare Webentwicklung
flocke
1
850
Am Ende ist doch alles HTML
flocke
1
1.7k
Other Decks in Technology
See All in Technology
アクセス制御にまつわる改善 / Improving access control
itkq
0
560
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
350
Cracking the KubeCon CfP
inductor
2
250
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
400
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
230
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
840
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
360
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
190
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
370
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
132
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Building Applications with DynamoDB
mza
88
5.6k
Designing the Hi-DPI Web
ddemaree
276
33k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
What the flash - Photography Introduction
edds
64
11k
How to train your dragon (web standard)
notwaldorf
73
5.2k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
A Tale of Four Properties
chriscoyier
151
22k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
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