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
890
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
米軍Platform One / Black Pearlに学ぶ 極限環境DevSecOps
Avatar for jyoshise jyoshise
2
530
変わるもの、変わらないもの ：OSSアーキテクチャで実現する持続可能なシステム
Avatar for gree_tech gree_tech
PRO
0
860
『星の世界の地図の話: Google Sky MapをAI Agentでよみがえらせる』 - Google Developers DevFest Tokyo 2025
Avatar for Tomohiro Tani taniiicom
0
360
経営から紐解くデータマネジメント
Avatar for Jun Ernesto Okumura pacocat
3
570
DDD x Microservice Architecture : Findy Architecture Conf 2025
Avatar for syobochim syobochim
13
5k
その意思決定、まだ続けるんですか？ ~痛みを超えて未来を作る、AI時代の撤退とピボットの技術~
Avatar for Michiru Kato applism118
42
24k
Excelデータ分析で学ぶディメンショナルモデリング ～アジャイルデータモデリングへ向けて～ by @Kazaneya_PR / 20251126
Avatar for 風音屋 (Kazaneya) kazaneya
PRO
3
210
ブラウザ拡張のセキュリティの話 / Browser Extension Security
Avatar for GMO Flatt Security flatt_security
0
110
SRE視点で振り返るメルカリのアーキテクチャ変遷と普遍的な考え
Avatar for foostan foostan
2
1.6k
TypeScript 6.0で非推奨化されるオプションたち
Avatar for uhyo uhyo
15
5.2k
事業状況で変化する最適解。進化し続ける開発組織とアーキテクチャ
Avatar for recruiting@caddi.jp caddi_eng
1
7.6k
Datadog LLM Observabilityで実現するLLMOps実践事例 / practical-llm-observability-with-datadog
Avatar for 逆井（さかさい） k6s4i53rx
0
160

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.8k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
970

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