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

Webseiten modular entwickeln

521db10df5241d9b2b70a555cc54e9e8?s=47 Jens Grochtdreis
May 28, 2015
Technology
0
1.9k

Webseiten modular entwickeln

Vortrag auf der Contao Konferenz in Lüneburg

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

May 28, 2015
Tweet

More Decks by Jens Grochtdreis

See All by Jens Grochtdreis
Pattern Libraries im Zentrum von Entwicklung und Design
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
760
Modulare Webentwicklung
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
290
Neuer Workflow für ein modernes Web
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
1.8k
CSS-Cookbook - Auszug
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
170
Modulare Webentwicklung mit Sass
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
1k
Webseiten modular entwickeln
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
10k
Responsive Webdesign - wir müssen uns ändern
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
0
1.7k
Modulare Webentwicklung
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
820
Am Ende ist doch alles HTML
521db10df5241d9b2b70a555cc54e9e8?s=48 flocke
1
1.6k

Other Decks in Technology

See All in Technology
20220622_FinJAWS_あのときにAWSがあったらこうできた
Feb135945a82ac9c12e91ba5f7e8bce2?s=48 taketakekaho
0
110
IoTLT88-NTKanazawa-laundry-dry
4256c3dc4c4b6933bb2ffb4176a595a0?s=48 yukima0707
0
230
Scrum Fest Osaka 2022 フルリモート下でのチームビルディング
478bd912a17b65fa0ab8c1d81912b9b1?s=48 moritamasami
2
1.2k
データ分析で切り拓け！ エンジニアとしてのデータ分析職キャリア戦略
43ba5a2227c580ce2290544d81c6261c?s=48 ksnt
0
150
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
6ff7b4622483547899dd09918d83732e?s=48 alvarosanchez
0
120
誰が正解を知っているのか / Who knows the right answer
95aaab3d693889550fd2e7ae02f2f789?s=48 takaking22
1
250
Modern Android dependency injection
A9f24621ff57d380b4e85799edd4a984?s=48 hugovisser
1
130
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
640727b1a8120669de9b6d7f1d469893?s=48 ch6noota
0
840
The Fractal Geometry of Software Design
B90ab53ba7cf16ed1a4bb679cc6751d7?s=48 vladikk
1
1k
マネージャーからみたスクラムと自己管理化
D14332b39b012820d44d362a3e2a8d98?s=48 shibe23
0
1.1k
紙にまつわる苦しみを機能化してきた カミナシの歴史
238459e9ada6420a85e157aa1d65268b?s=48 kaminashi
0
1.2k
ソフトウェアテスト自動化、一歩前へ
73ffa4b34cfd87eb417ee531b8224d7a?s=48 yoshikiito
5
740

Featured

See All Featured
Teambox: Starting and Learning
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
123
7.7k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Learning to Love Humans: Emotional Interface Design
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
37k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
57
5.3k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k
ReactJS: Keep Simple. Everything can be a component!
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k

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