Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sass&rwd前端版型架構規劃

21,423 views

Published on

Sass&rwd前端版型架構規劃

Published in: Software
  • Login to see the comments

Sass&rwd前端版型架構規劃

  1. 1. .header { .. } @media(max-width: 768px) { .header { .. } } @media(max-width: 320px) { .header { .. } }
  2. 2. @mixin Pad{ @media(max-width: 768px) { @content } } @mixin iPhone6{ @media(max-width: 375px) { @content } }
  3. 3. .header { .. @include Pad{ .. } @include iPhone6{ .. } }
  4. 4. .header .. +Pad .. +iPhone ..
  5. 5. <div class="media"> <div class="body"> <h3 class="alpha"></h3> <p class="lede"></p> </div> </div>
  6. 6. button button <input type="button" class="btn"> <input type="button" class="btn btn-primary"> <input type="button" class="btn btn-primary btn-large"> button btn hack btn-primary btn-large padding
  7. 7. <table class="pure-table"> <table class="pure-table pure-table-bordered">
  8. 8. // (JS) .block--active // .block--MobileShake //block title Float .block__title--float //BEM .block-title--float //
  9. 9. <div class="table table-h trailer"> <div class="table-row table-row--MobileInline"> <div class="table-title w20"> </div> <div class="table-content"> </div> </div> <div class="table-row"> <div class="table-title"> </div> <div class="table-content"> </div> </div> </div> display:table display:table-row display:table-cell display:table-cell PC Mobile
  10. 10. <div class="table table-h trailer"> <div class="table-row table-row--MobileIline"> <div class="table-title w20"> </div> <div class="table-content"> </div> </div> <div class="table-row"> <div class="table-title"> </D> <div class="table-content"> </div> </div> </div> display:table display:table-row display:table-cell display:table-cell PC Mobile SMACSS 1.table 2.table-h table-v
  11. 11. <div class="table table-h trailer"> <div class="table-row table-row--MobileIline"> <div class="table-title w20"> </div> <div class="table-content"> </div> </div> <div class="table-row"> <div class="table-title"> </D> <div class="table-content"> </div> </div> </div> display:table display:table-row display:table-cell display:table-cell PC Mobile 1. div table 
 RWD 
 Mobile 
 2. table
  12. 12. <div class="table table-h trailer"> <div class="table-row table-row--MobileIline"> <div class="table-title w20"> </div> <div class="table-content"> </div> </div> <div class="table-row"> <div class="table-title"> </D> <div class="table-content"> </div> </div> </div> display:table display:table-row display:table-cell display:table-cell PC Mobile trailer = margin-bottom:1 w20 = 20% OOCSS - CSS Class
  13. 13. <div class="table table-h trailer"> <div class="table-row table-row--MobileInline"> <div class="table-title w20"> </div> <div class="table-content"> </div> </div> <div class="table-row"> <div class="table-title"> </D> <div class="table-content"> </div> </div> </div> display:table display:table-row display:table-cell display:table-cell PC Mobile table-row--MobileInline = div inline BEM -
  14. 14. <div class="table table-h trailer"> <div class="table-row table-row--MobileInline"> <div class="table-title w20"> </div> <div class="table-content"> </div> </div> <div class="table-row"> <div class="table-title"> </div> <div class="table-content"> </div> </div> </div>
  15. 15. |-- _variables.scss |-- _reset.scss |-- _mixins.scss |-- _layout.scss |-- _index.scss |-- _page1.scss |-- _page2.scss // // meyerweb Normalize // Mixin function // (header aside) // // //
  16. 16. |-- _variables.scss |-- _reset.scss |-- _grid.scss |-- _OOCSS.scss |-- _typography.scss |-- _mixins.scss |-- _layout.scss |-- _index.scss |-- _page1.scss |-- _page2.scss // // meyerweb Normalize // RWD // CSS // // Mixin function // (header aside) // // //
  17. 17. |-- config (reset variables typography grid) |-- helper (state Mixin OOCSS) |-- core (button table form) |-- component (button-group breadcrumb) |-- layout (header footer l-list) |-- page (page1 page2) |-- vendor (jqSlider jqValid) |-- inbox ( )
  18. 18. @import "config/*"; @import "helper/*"; @import "component/*"; @import "layout/*"; @import "page/*"; @import "vendor/*"; @import "inbox"; //
  19. 19. RFP ..
  20. 20. <link rel="stylesheet" href="/css/all.css"> <link rel="stylesheet" href="/css/version/bsp.css"> 1.all.css CSS 2.bsp.css theme
  21. 21. 1. scss bsp.scss red.scss 2. _subtheme.scss bsp.scss
  22. 22. _subtheme.scss _subtheme.scss
  23. 23. code GG

×