Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

CSS架構如何加速功能開發

Share @ Think Structure CSS meetup

  • Identifiez-vous pour voir les commentaires

CSS架構如何加速功能開發

  1. 1. Oliver CSS Front End Developer
  2. 2. bootstrap keybridge
  3. 3. stylesheets/! |! |-- keybridge/! | |-- fonts.css.sass! | |-- form.css.sass! | |-- _tag.css.sass! | …! |! |-- bootstrap_core.css.sass # import bootstrap stylesheet! — keybridge.css.sass # require all ! Bootstrap-Keybridge CSS structure
  4. 4. Bootstrap-Keybridge CSS structure
  5. 5. Bootstrap-Keybridge CSS structure
  6. 6. Bootstrap-Keybridge dribbble.com/shots/1501436 Master UI Kit - Derek Designer
  7. 7. Bootstrap-Keybridge Github wiki pages
  8. 8. stylesheets/! |-- application.css.sass! |! x-- modules/! x |-- _all.scss! x -- _utility.scss! |! |-- entries/ # Main syle entry at each page! | |-- dashboard.css.sass! | |-- contacts.css.sass! |! |-- partials/ # Partials! | |-- shared/! | | |-- _aside_siblings.css.sass! | | |-- _aside_parents.css.sass! | |! | -- contacts/! | |-- students/! | | |-- _student_form.css.sass! | | |-- _academic_progress.css.sass! | |! | `-- families/! | |-- _family_form.css.sass! |! |-- shared/! | |-- _mod_form.css.sass! | |-- _mod_slider.css.sass! | -- _icon_activity.css.sass! |! -- vendor/ # Style from other projects! |-- _nprogress.css! -- _tipsy.css Y Y InterSIS CSS structure Primary Sass File Defined in bootstrap-keybridge
  9. 9. InterSIS CSS entry example
  10. 10. InterSIS CSS entry example - Namespace defined by resources
  11. 11. Entry InterSIS CSS entry example
  12. 12. stylesheets/! |-- application.css.sass # primary Sass file! |! x-- modules/ # defined in bootstrap-keybridge! x |-- _all.scss! x `-- _utility.scss! |! |-- entries/ # Main syle entry at each page! | |-- dashboard.css.sass! | |-- contacts.css.sass! |! |-- partials/ # Partials! | |-- shared/! | | |-- _aside_siblings.css.sass! | | |-- _aside_parents.css.sass! | |! | `-- contacts/! | |-- students/! | | |-- _student_form.css.sass! | | |-- _academic_progress.css.sass! | |! | `-- families/! | |-- _family_form.css.sass! |! |-- shared/! | |-- _mod_form.css.sass! | |-- _mod_slider.css.sass! | `-- _icon_activity.css.sass! |! `-- vendor/ # Style from other projects! |-- _nprogress.css! `-- _tipsy.css Y InterSIS CSS structure
  13. 13. InterSIS Sample screenshot
  14. 14. InterSIS Sample screenshot
  15. 15. InterSIS _student_profile.html.erb
  16. 16. InterSIS _student_profile.css.sass
  17. 17. InterSIS Grid System .grid-compact .grid-full .grid-nav min-width: 960px
  18. 18. InterSIS Ruby on Rails Helper
  19. 19. How does this help us?
  20. 20. InterSIS Example
  21. 21. InterSIS Example
  22. 22. Bad~~~ Practice
  23. 23. OpenApply Applicant details v2
  24. 24. OpenApply Bad practice example
  25. 25. OpenApply Bad practice example
  26. 26. 不要急,但是要快!“ “
  27. 27. OpenApply Bad practice example
  28. 28. OpenApply Bad practice example
  29. 29. OpenApply Bad practice example
  30. 30. CSS !
  31. 31. Aaron FE Lead 19 Sr. FE Dev Joseph FE Lead Thanks to all ex-front end team menbers!
  32. 32. Oliver Front End Developer Thank you ! Q&A

×