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

Webseiten modular entwickeln

Jens Grochtdreis
May 28, 2015
Technology
0
2k

Webseiten modular entwickeln

Vortrag auf der Contao Konferenz in Lüneburg

Jens Grochtdreis

May 28, 2015
Tweet

More Decks by Jens Grochtdreis

See All by Jens Grochtdreis
Pattern Libraries im Zentrum von Entwicklung und Design
flocke
0
840
Modulare Webentwicklung
flocke
1
370
Neuer Workflow für ein modernes Web
flocke
1
1.9k
CSS-Cookbook - Auszug
flocke
1
180
Modulare Webentwicklung mit Sass
flocke
0
1.1k
Webseiten modular entwickeln
flocke
1
11k
Responsive Webdesign - wir müssen uns ändern
flocke
0
1.8k
Modulare Webentwicklung
flocke
1
830
Am Ende ist doch alles HTML
flocke
1
1.7k

Other Decks in Technology

See All in Technology
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
100
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
11
3.5k
Pentesting Password Reset Functionality
anugrahsr
0
190
マネーフォワードクラウドを支える事業者基盤
machisuke
0
220
Kaggleシミュレーションコンペの動向
nagiss
0
220
オンプレk8sとEKSの並行運用の実際
ch1aki
0
130
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
100
re:Inventで発表があったIoT事例の紹介と考察
kizawa2020
0
130
EMになって最初の失敗談 - コミュニケーション編 -
fukuiretu
1
330
OpenShiftのリリースノートを整理してみた
loftkun
2
190
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
120
プログラミング支援AI GitHub Copilot すごいの話
moyashi
0
280

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
The Pragmatic Product Professional
lauravandoore
21
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Bootstrapping a Software Product
garrettdimon
299
110k
Ruby is Unlike a Banana
tanoku
93
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Practical Orchestrator
shlominoach
178
8.9k
Making the Leap to Tech Lead
cromwellryan
116
7.6k
Navigating Team Friction
lara
176
12k
Visualization
eitanlees
128
12k

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