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
960
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
940
Am Ende ist doch alles HTML
Avatar for Jens Grochtdreis flocke
1
1.8k

Other Decks in Technology

See All in Technology
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
440
（金融庁共催）第4回金融データ活用チャレンジ勉強会資料
Avatar for tak takumimukaiyama
0
130
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.2k
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.3k
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
350
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
68k
MCPでつなぐElasticsearchとLLM - 深夜の障害対応を楽にしたい / Bridging Elasticsearch and LLMs with MCP
Avatar for Sashimimochi sashimimochi
0
140
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
Avatar for Kazuki Miura miu_crescent
PRO
1
100
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
Avatar for みのるん minorun365
3
150
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
130
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.5k
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
290

Featured

See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
110
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
46
KATA
Avatar for Megan Lloyd mclloyd
PRO
34
15k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
64
Abbi's Birthday
Avatar for Violet Bock coloredviolet
1
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
280
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130

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