Web Design Plus

A brief introduction about less, emmet and bootstrap.

Transcript

1. Web Design + Cathy Chen 13年8月11日星期日
2. ੽ʦ˂ක֐dሗձ CSS 13年8月11日星期日
3. 13年8月11日星期日
4. ΪމϞəһಏٙʈՈ 13年8月11日星期日
5. 可以寫比較 少的code， 好維護、 重複使用！ 動態樣式語言 13年8月11日星期日
6. ࠯΋ 13年8月11日星期日
7. 安裝 client side <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script> server side $ npm install -g less $ lessc styles.less > styles.css ( node package manager) 13年8月11日星期日
8. http://incident57.a/less/ 13年8月11日星期日
9. Ը޶ɓɨϞࡳԬतЍ 13年8月11日星期日
10. less css .box { a { color:#666666; } &:hover { color: #ffffff; } } ＃1. Nested .box a { color: #666666; } .box a:hover { color: #ffffff; } 13年8月11日星期日
11. less css @link-color: #D0D6D; @text-size: 14px; @text-sixe-l: @text- size + 2px; @text-size-s: @text- size - 2px; a { color: @link-color; } ＃2. Variables a { color: #D0D6D; } ࠠል͜Ցٙ᙮׌d ̙˸ணމᜊᅰ FYΌ१ஹഐٙᕙЍ 13年8月11日星期日
12. less css ＃3-1 Mixins ̙˸຅ᓒ̂ٙ˙όd྅݊ܲ ඐٙᅵόɽߧ޴ΝdШΪމ ͜ίʔΝًٙ࿒ɨdϾϞԬ ฆٙҷᜊࣛ .button { border: solid 1px #eee; } .button-danger{ .button; background: red; } .button-info{ .button; background: blue; } .button-danger{ border: solid 1px #eee; background: red; } .button-info{ border: solid 1px #eee; background: blue; } 13年8月11日星期日
13. less css ＃3-2 Parametric Mixins 不同瀏覽器的prefix也很適合 .border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .button { .border-radius(6px); } .button { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } 13年8月11日星期日
14. less css ＃4. Operations @base: 100px; width: @base *5; color: (#888 / 4); background:(@base-color + #111); width: 500px; 13年8月11日星期日
15. less css ＃5. Functions (color) color: lighten(#666, 5%); color: darken(#666, 5%); color: #737373; color: #595959; saturate(@color, 5%); desaturate(@color, 5%); fadein(@color, 5%); fadeout (@color, 5%); fade (@color, 5%); 搭配ColorSnapper app 13年8月11日星期日
16. http://colorsnapper.com/ 13年8月11日星期日
17. multiply(@color1, @color2); screen(@color1, @color2); overlay(@color1, @color2); softlight(@color1, @color2); hardlight(@color1, @color2); difference(@color1, @color2); exclusion(@color1, @color2); average(@color1, @color2); negation(@color1, @color2); rgb(@r, @g, @b); // converts to a color rgba(@r, @g, @b, @a); // converts to a color argb(@color); // creates a #AARRGGBB hsl(@hue, @saturation, @lightness); // creates a color hsla(@hue, @saturation, @lightness, @alpha); // creates a color hsv(@hue, @saturation, @value); // creates a color hsva(@hue, @saturation, @value, @alpha); // creates a color ceil(@number); // rounds up to an integer floor(@number); // rounds down to an integer percentage(@number); // converts to a %, e.g. 0.5 -> 50% round(number, [places: 0]); // rounds a number to a number of places sqrt(number); // * calculates square root of a number abs(number); // * absolute value of a number sin(number); // * sine function asin(number); // * arcsine - inverse of sine function cos(number); // * cosine function acos(number); // * arccosine - inverse of cosine function tan(number); // * tangent function atan(number); // * arctangent - inverse of tangent function pi(); // * returns pi pow(@base, @exponent); // * first argument raised to the power of the second argument mod(number, number); // * first argument modulus second argument 13年8月11日星期日
18. Less 告⼀一段落 13年8月11日星期日
19. ᒔϞɓԬλٙ͜ʈՈ 13年8月11日星期日
20. http://emmet.io/ 13年8月11日星期日
21. http://livestyle.emmet.io/ 13年8月11日星期日
22. http://getbootstrap.com/ 13年8月11日星期日
23. Extra small devices Phones (<768px) Grid Small devices Tablets (>768px) Medium devices Desktops (>992px) Large devices Desktops (>1200px) .col- .col-sm- .col-lg- 總和加起來12 13年8月11日星期日
24. <div class="row"> <div class="col-lg-8">8</div> <div class="col-lg-4">4</div> </div> <div class="row"> <div class="col-lg-4">4</div> <div class="col-lg-4">4</div> <div class="col-lg-4">4</div> </div> <div class="row"> <div class="col-lg-6">6</div> <div class="col-lg-6">6</div> </div> Grid 13年8月11日星期日
25. Try it ! 13年8月11日星期日
26. Thanks 13年8月11日星期日