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
950
Neuer Workflow für ein modernes Web
Avatar for Jens Grochtdreis flocke
1
2.2k
CSS-Cookbook - Auszug
Avatar for Jens Grochtdreis flocke
1
230
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
930
Am Ende ist doch alles HTML
Avatar for Jens Grochtdreis flocke
1
1.8k

Other Decks in Technology

See All in Technology
AR Guitar: Expanding Guitar Performance from a Live House to Urban Space
Avatar for Ekito ekito_station
0
250
ソフトウェアエンジニアとAIエンジニアの役割分担についてのある事例
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
300
AgentCoreとStrandsで社内d払いナレッジボットを作った話
Avatar for 元島優 motojimayu
1
990
AWSインフルエンサーへの道 / load of AWS Influencer
Avatar for WHIsaiyo whisaiyo
0
230
New Relic 1 年生の振り返りと Cloud Cost Intelligence について #NRUG
Avatar for PLAY, inc. play_inc
0
240
202512_AIoT.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
AI時代のワークフロー設計〜Durable Functions / Step Functions / Strands Agents を添えて〜
Avatar for やくも yakumo
3
2.3k
20251203_AIxIoTビジネス共創ラボ_第4回勉強会_BP山崎.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
140
[2025-12-12]あの日僕が見た胡蝶の夢 〜人の夢は終わらねェ AIによるパフォーマンスチューニングのすゝめ〜
Avatar for tosite tosite
0
190
なぜ あなたはそんなに re:Invent に行くのか？
Avatar for Kazuki Miura miu_crescent
PRO
0
210
Claude Codeを使った情報整理術
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
11
8.5k
2025年の医用画像AI/AI×medical_imaging_in_2025_generated_by_AI
Avatar for YoshihiroTodoroki tdys13
0
110

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
120
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.8k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
180
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.4k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
39
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.5k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.9k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
44k

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