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

Webseiten modular entwickeln

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
970
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.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
940
Am Ende ist doch alles HTML
Avatar for Jens Grochtdreis flocke
1
1.8k

Other Decks in Technology

See All in Technology
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.8k
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
300
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
Avatar for soudai sone soudai
PRO
12
5.6k
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
310
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
Avatar for ないとー bwkw
3
970
日本の85%が使う公共SaaSは、どう育ったのか
Avatar for たけだ taketakekaho
1
230
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
180
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
93k
仕様書駆動AI開発の実践： Issue→Skill→PRテンプレで 再現性を作る
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
2
680
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
Avatar for AEON aeonpeople
1
240
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
480
Agent Skils
Avatar for ディップ株式会社 dip_tech
PRO
0
120

Featured

See All Featured
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
150
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
130
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
310
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
83
Between Models and Reality
Avatar for mayunak mayunak
1
190
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
350

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