Less, bootstrap and more

3,379 views

Published on

A simple introduction.

Published in: Technology, Education
1 Comment
5 Likes
Statistics
Notes
  • Here is an example of using LESS mixins with Bootstrap : http://blog.appliedis.com/2013/02/04/bootstrap-with-less/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,379
On SlideShare
0
From Embeds
0
Number of Embeds
291
Actions
Shares
0
Downloads
66
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Less, bootstrap and more

  1. 1. Less, Bootstrap and more<br />A simple introduction.<br />1<br />
  2. 2. What is LESS?<br />{Less} extends CSS with variables, nested rules, operators and more. If you're still building websites without it, you're an idiot.<br />2<br />
  3. 3. Why LESS?<br />So you can define 变量(like colors, distances etc.), which then can be used in the rest of the file – great to have all used colors in one place only. <br />Furthermore there are user-defined 函数, like .rounded here, a shortcut to add the three possible border-radius methods.<br />You can even add 参数(in this case radius) with a default value.<br />And 嵌套classes (.navi a) can be written more naturally.<br />3<br />
  4. 4. How LESS?<br />2 ways:<br />编译版本<br />put your Less-files and automatically creates the corresponding CSS-file, with error checking and minification if desired.<br />JS驱动版本<br /><link rel="stylesheet/less" type="text/css" href="site.less"><script type="text/javascript" src="less-1.0.41.min.js"></script><br />4<br />
  5. 5. Sample<br />@linkcolor:       #9999C9;@spacing_left:    60px;.rounded(@radius: 3px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    border-radius: @radius;}.navi {   .rounded(5px);   a {      color: @linkcolor;   }}div.navigation {   padding-left: @spacing_left;}<br />5<br />
  6. 6. More<br />.darker {   color: darken(@mycolor, 10%);   background-color: lighten(@mybg, 15%);   padding-right: @spacing_left * 2;   padding-bottom: (@spacing_left + 5) * 2;}<br />6<br />
  7. 7. Fxxk GFW<br />7<br />
  8. 8. What is Bootstrap?<br />Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />8<br />
  9. 9. Why Bootstrap?<br />Easy<br />Fast<br />Consistent<br />9<br />
  10. 10. How Bootstrap?<br />2 ways<br />直接引用样式<br /><link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css"><br />+Less<br /><link rel="stylesheet/less" href="/path/to/bootstrap.less"><br /><script src="/path/to/less.js"></script><br />10<br />
  11. 11. +<br />11<br />
  12. 12. +<br />12<br />
  13. 13. +<br />13<br />
  14. 14. +<br />14<br />
  15. 15. 转变思维<br />以1kb grid为例,传统CSS:<br />15<br />
  16. 16. 转变思维<br />转变为LESS思维——变量:<br />16<br />
  17. 17. 转变思维<br />转变为LESS思维——变量+函数:<br />17<br />
  18. 18. 实战?<br />适合跟v6整体关联不大、页面较多、更新块的业务。<br />18<br />
  19. 19. Thx~<br />19<br />

×