CSS架構如何加速功能開發
21 likes1,533 views
The document describes the CSS structure for an education application called InterSIS. It shows the folder structure for stylesheets, with main files like application.css and modules/_all.scss. Entries are the main style files for each page. Partials contain shared and page-specific styles. The entry for the student profile page is _student_profile.css. It also discusses using Ruby on Rails helpers and a grid system for layout. Examples demonstrate integrating styles into views. The document warns against bad practices like duplicating styles.
CSS架構如何加速功能開發
- 6. 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
- 9. Bootstrap-Keybridge dribbble.com/shots/1501436 Master UI Kit - Derek Designer
- 11. 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
- 13. InterSIS CSS entry example - Namespace defined by resources
- 15. 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
- 20. InterSIS Grid System .grid-compact .grid-full .grid-nav min-width: 960px
- 21. InterSIS Ruby on Rails Helper
- 22. How does this help us?
- 23. InterSIS Example
- 24. InterSIS Example
- 25. Bad~~~ Practice
- 29. 不要急，但是要快！“ “
- 33. CSS !
- 34. Aaron FE Lead 19 Sr. FE Dev Joseph FE Lead Thanks to all ex-front end team menbers!
- 35. Oliver Front End Developer Thank you ! Q&A