Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webseiten modular entwickeln

Avatar for Jens Grochtdreis Jens Grochtdreis
May 28, 2015
Technology
0
2.2k

Webseiten modular entwickeln

Vortrag auf der Contao Konferenz in Lüneburg

Avatar for Jens Grochtdreis

Jens Grochtdreis

May 28, 2015
Tweet

More Decks by Jens Grochtdreis

See All by Jens Grochtdreis
Pattern Libraries im Zentrum von Entwicklung und Design
Avatar for Jens Grochtdreis flocke
0
1.2k
Modulare Webentwicklung
Avatar for Jens Grochtdreis flocke
1
860
Neuer Workflow für ein modernes Web
Avatar for Jens Grochtdreis flocke
1
2.2k
CSS-Cookbook - Auszug
Avatar for Jens Grochtdreis flocke
1
220
Modulare Webentwicklung mit Sass
Avatar for Jens Grochtdreis flocke
0
1.7k
Webseiten modular entwickeln
Avatar for Jens Grochtdreis flocke
1
14k
Responsive Webdesign - wir müssen uns ändern
Avatar for Jens Grochtdreis flocke
0
2.1k
Modulare Webentwicklung
Avatar for Jens Grochtdreis flocke
1
910
Am Ende ist doch alles HTML
Avatar for Jens Grochtdreis flocke
1
1.8k

Other Decks in Technology

See All in Technology
テストを軸にした生き残り術
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
220
Unlocking the Power of AI Agents with LINE Bot MCP Server
Avatar for LINE Developers Thailand linedevth
0
120
Django's GeneratedField by example - DjangoCon US 2025
Avatar for Paolo Melchiorre pauloxnet
0
160
AIエージェントで90秒の広告動画を制作！台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
Avatar for Kiminori Yokoi nasuvitz
3
360
20250913_JAWS_sysad_kobe
Avatar for Takuya Yonezawa takuyay0ne
2
250
データ分析エージェント Socrates の育て方
Avatar for na0 na0
7
2.6k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
Avatar for a-thug athug
1
500
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
Avatar for Naoko Shinagawa ratsbane666
0
100
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
Avatar for 株式会社ログラス loglass2019
4
65k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
130
2025/09/16 仕様駆動開発とAI-DLCが導くAI駆動開発の新フェーズ
Avatar for オカムラ masahiro_okamura
0
140
LLM時代のパフォーマンスチューニング：MongoDB運用で試したコンテキスト活用の工夫
Avatar for ishikawa-pro ishikawa_pro
0
170

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
252
21k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
3
620
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
113
20k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Code Review Best Practice
Avatar for Trisha Gee trishagee
71
19k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k

Transcript

  1. Webseiten modular entwickeln Jens Grochtdreis

  2. 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

  3. Seite ist eine Ansammlung von Modulen

  4. http://daverupert.com/2013/04/responsive-deliverables/

  5. None
  6. None

  7. Platzierung sollte egal sein

  8. http://styletil.es/

  9. http://styletil.es/

  10. http://styletil.es/

  11. http://styletil.es/

  12. http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/

  13. Wichtigste Grundbedingung

  14. Die Module müssen für sich selber stehen!

  15. None

  16. Möglichst wenige Ebenen!

  17. None
  18. None

  19. Styleguides

  20. http://codeforamerica.clearleft.com/

  21. http://codeforamerica.clearleft.com/

  22. http://ux.mailchimp.com/patterns/tables

  23. http://rackerlabs.github.io/canon/ui-components/#tables

  24. https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05

  25. http://styleguides.io/

  26. Mein aktueller Ansatz

  27. None
  28. None

  29. Nächste Modifikation

  30. None

  31. inc/ sass/

  32. None

  33. Richtiger Umgang mit Klassen

  34. https://github.com/stubbornella/oocss/wiki

  35. None
  36. None
  37. None

  38. Modifikator

  39. None

  40. Das media-Element http://jsbin.com/ipupew/2/

  41. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

  42. https://smacss.com/

  43. 1. Base 2. Layout 3. Module 4. State (Zustand) 5.

    Theme Die einzelnen Bestandteile
  44. None
  45. None

  46. http://bem.info/method/ BEM

  47. Block, Element, Modifier

  48. Namenskonventionen

  49. http://snap.kapowaz.net/loloocss.png https://twitter.com/kapowaz/status/474195847694274561

  50. https://twitter.com/oknoblich/status/472320546202742784

  51. https://css-tricks.com/bem-101/

  52. http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d

  53. 1 2 3 1

  54. None

  55. http://sassmeister.com/gist/c608e47ffd21f2166c56 Ab Sass 3.3

  56. NCSS https://github.com/redaxmedia/ncss

  57. Strukturelle Klassen

  58. Typ-Klassen

  59. Modifikator-Klassen

  60. Funktionale Klassen

  61. Namespace-Klassen

  62. Zusammenfassen und Ausnahmen gestalten

  63. None
  64. None

  65. Unpraktische Klassennamen

  66. None
  67. None

  68. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de http://slideshare.net/Flocke669 https://speakerdeck.com/flocke