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
1.1k
Modulare Webentwicklung
flocke
1
620
Neuer Workflow für ein modernes Web
flocke
1
2.1k
CSS-Cookbook - Auszug
flocke
1
200
Modulare Webentwicklung mit Sass
flocke
0
1.4k
Webseiten modular entwickeln
flocke
1
13k
Responsive Webdesign - wir müssen uns ändern
flocke
0
2k
Modulare Webentwicklung
flocke
1
860
Am Ende ist doch alles HTML
flocke
1
1.7k
Other Decks in Technology
See All in Technology
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
140
Classmethod Odyssey 登壇資料
yamahiro
0
390
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Optimizing for Happiness
mojombo
373
69k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
GitHub's CSS Performance
jonrohan
1026
450k
BBQ
matthewcrist
82
9k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
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