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
2.3k
0

Webseiten modular entwickeln

Vortrag auf der Contao Konferenz in Lüneburg

Avatar for Jens Grochtdreis

Jens Grochtdreis

May 28, 2015

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
1k
Neuer Workflow für ein modernes Web
Avatar for Jens Grochtdreis flocke
1
2.3k
CSS-Cookbook - Auszug
Avatar for Jens Grochtdreis flocke
1
230
Modulare Webentwicklung mit Sass
Avatar for Jens Grochtdreis flocke
0
1.8k
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
960
Am Ende ist doch alles HTML
Avatar for Jens Grochtdreis flocke
1
1.8k

Other Decks in Technology

See All in Technology
Databricks における 生成AIガバナンスの実践
Avatar for Takaaki Yayoi taka_aki
1
350
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
50k
MIERUNE JCT 発表資料「宇宙から伊能忠敬ごっこ」
Avatar for じゃらしまる syuchimu
0
190
OCI Oracle AI Database Services新機能アップデート(2026/03-2026/05)
Avatar for oracle4engineer oracle4engineer
PRO
0
290
社内 AI エージェント Synapse と セマンティックレイヤーの育て方
Avatar for Hiroaki Sano hiroakis
0
300
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
18
420k
Terraformモジュールは、なぜ「魔境」化するのか
Avatar for hayama hayama17
2
210
Djangoユーザが知っ得なPostgreSQL機能 - 設計の選択肢を増やす / Djang-use-PostgreSQL
Avatar for soudai sone soudai
PRO
0
210
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development with AI-DLC
Avatar for 吉田真吾 yoshidashingo
0
150
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.9k
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
210
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/3 - 2026/5
Avatar for oracle4engineer oracle4engineer
PRO
1
210

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
3.3k
Between Models and Reality
Avatar for mayunak mayunak
4
330
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
600
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
200
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
960
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
200
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
690

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