Software programming tools for creating/managing CSS files<br />DinuSuman<br />
What kind of software tools can be?<br />IDE<br />Tools for generating templates<br />CSS Frameworks with existing plugins...
Some Languages that extend css:<br />Less (http://lesscss.org/)<br />xCSS (http://xcss.antpaw.org)<br />Sass/Scss (http://...
Why simple css isn’t enough?<br />Why do we need extending languages?<br />
What do we get?<br />Variables<br />Mixins<br />Nested Rules<br />Functions & Operations<br />
Variables<br />// LESS <br />@color: #4D926F;<br />#header { <br />color:@color;<br />} <br />h2 { <br />color:@color; <br...
Mixins<br />// LESS <br />.rounded-corners (@radius: 5px) { <br />border-radius:@radius;<br />-webkit-border-radius:@radiu...
Nested Rules<br />// LESS <br />#header { <br />h1 { <br />font-size: 26px; <br />font-weight: bold; <br />	} <br />p {   ...
		Functions & Operations  <br />// LESS <br />@the-border: 1px; <br />@base-color: #111; <br />@red: #842210; <br />#heade...
	Other Operations:<br />@base: 5%; <br />@filler: @base * 2; <br />@other: @base + @filler; <br />color: #888 / 4; <br />b...
Functions:<br />lighten(@color, 10%); // return a color which is 10% *lighter* than @color <br />darken(@color, 10%); // r...
Other:<br />//Scope<br />@var: red; <br />#page { <br />@var: white; <br />#header { color: @var; // white } <br />} <br /...
Usage<br />Client:<br />CSS + JS:<br /><linkrel="stylesheet/less" type="text/css"href="styles.less"><br /><scriptsrc="less...
vs<br />/* CSS */<br />.selector { <br />	background-image:   url(../img/tmpl1/png/head_bg.png); background-color: #FF00FF...
vs<br />Nested selectors:<br />.selector { <br />	self { <br />		margin: 20px; <br />	} <br />	a { <br />		display: block;...
vs<br />Extending Objects:<br />.basicClass { <br />	padding: 20px; <br />	background-color: #FF0000; <br />} <br />.speci...
vs<br />Math Operations:<br />.selector { <br />	padding: [5px * 2]; <br />	color: [#ccc * 2]; <br />// lets assume $color...
vs<br />Usage:<br />Download xCSS archive.<br />Add this lines:<br /><script type="text/javascript"src="path_to_xcss/"></s...
vs			   &<br />Variables:<br />$blue: #3bbfce <br />$margin: 16px <br />.content-navigation <br />	border-color: $blue <br...
vs			   &<br />Nesting rules:<br />table.hl<br />	margin: 2em 0 <br />td.ln<br />		text-align: right <br />li<br />	font: ...
vs			   &<br />Mixins:<br />@mixintable-base <br />th<br />		text-align: center 	<br />		font-weight: bold <br />	td, th<b...
vs			   &<br />Selector Inheritance:<br />.error <br />	border: 1px #f00<br />	background: #fdd<br />.error.intrusion<br /...
vs			   &<br />Control Directives:<br />p { <br />@if 1 + 1 == 2 { border: 1px solid; } <br />@if 5 < 3 { border: 2px dott...
vs			   &<br />Usage:<br />$ gem install haml <br />$ sassinput.sass output.css<br />$sass --watch style.sass:style.css<br...
Q&A?<br />
Thanks.<br />
Upcoming SlideShare
Loading in...5
×

Software programming tools for creating/managing CSS files

2,294

Published on

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Software programming tools for creating/managing CSS files

  1. 1. Software programming tools for creating/managing CSS files<br />DinuSuman<br />
  2. 2. What kind of software tools can be?<br />IDE<br />Tools for generating templates<br />CSS Frameworks with existing plugins, …<br />Languages that extend css<br /> (will be covered in this presentation)<br />
  3. 3. Some Languages that extend css:<br />Less (http://lesscss.org/)<br />xCSS (http://xcss.antpaw.org)<br />Sass/Scss (http://sass-lang.com/)<br />Hss (http://ncannasse.fr/projects/hss)<br />CleverCss (http://sandbox.pocoo.org/clevercss/)<br />
  4. 4. Why simple css isn’t enough?<br />Why do we need extending languages?<br />
  5. 5. What do we get?<br />Variables<br />Mixins<br />Nested Rules<br />Functions & Operations<br />
  6. 6. Variables<br />// LESS <br />@color: #4D926F;<br />#header { <br />color:@color;<br />} <br />h2 { <br />color:@color; <br />}<br />/* Compiled CSS */ <br />#header { <br /> color: #4D926F; <br />} <br />h2 { <br /> color: #4D926F; <br />}<br />
  7. 7. Mixins<br />// LESS <br />.rounded-corners (@radius: 5px) { <br />border-radius:@radius;<br />-webkit-border-radius:@radius;<br />-moz-border-radius:@radius; <br />} <br />#header { <br />.rounded-corners;<br />} <br />#footer { <br />.rounded-corners(10px); <br />}<br />/* Compiled CSS */ <br />#header { <br /> border-radius: 5px; <br /> -webkit-border-radius: 5px; <br /> -moz-border-radius: 5px; <br />} <br />#footer { <br /> border-radius: 10px; <br /> -webkit-border-radius: 10px; <br /> -moz-border-radius: 10px; <br />}<br />
  8. 8. Nested Rules<br />// LESS <br />#header { <br />h1 { <br />font-size: 26px; <br />font-weight: bold; <br /> } <br />p { font-size:12px; <br />a { <br />text-decoration: none; <br />&:hover { <br />border-width: 1px ;<br />}<br />}<br /> } <br />}<br />/* Compiled CSS */ <br />#headerh1 { <br />font-size: 26px; <br />font-weight: bold; <br />} <br />#header p { <br />font-size: 12px; <br />} <br />#header p a { <br />text-decoration: none; <br />} <br />#header p a:hover { <br />border-width: 1px; <br />}<br />
  9. 9. Functions & Operations <br />// LESS <br />@the-border: 1px; <br />@base-color: #111; <br />@red: #842210; <br />#header { <br />color: @base-color * 3; <br />border-left: @the-border; <br />border-right: @the-border * 2; <br />} <br />#footer { <br />color: @base-color + #003300; <br />border-color: desaturate(@red, 10%); <br />}<br />/* Compiled CSS */ <br />#header { <br />color: #333; <br />border-left: 1px; <br />border-right: 2px; <br />} <br />#footer { <br />color: #114411; <br />border-color: #7d2717; <br />}<br />
  10. 10. Other Operations:<br />@base: 5%; <br />@filler: @base * 2; <br />@other: @base + @filler; <br />color: #888 / 4; <br />background-color: @base-color + #111; <br />Height: 100% / 2 + @filler;<br />@var: 1px + 5;<br />width: (@var+ 5) * 2;<br />border: (@width * 2) solidblack;<br />
  11. 11. Functions:<br />lighten(@color, 10%); // return a color which is 10% *lighter* than @color <br />darken(@color, 10%); // return a color which is 10% *darker* than @color <br />saturate(@color, 10%); // return a color 10% *more* saturated than @color <br />desaturate(@color, 10%); // return a color 10% *less* saturated than @color <br />fadein(@color, 10%); // return a color 10% *less* transparent than @color <br />fadeout(@color, 10%); // return a color 10% *more* transparent than @color <br />spin(@color, 10); // return a color with a 10 degree larger in hue than @color <br />spin(@color, -10); // return a color with a 10 degree smaller hue than @color<br />hue(@color); // returns the `hue` channel of @color <br />saturation(@color); // returns the `saturation` channel of @color <br />lightness(@color); // returns the 'lightness' channel of @color<br />
  12. 12. Other:<br />//Scope<br />@var: red; <br />#page { <br />@var: white; <br />#header { color: @var; // white } <br />} <br />#footer { color: @var; // red }<br />//importing<br />@import "lib.less"; <br />//or<br />@import"lib";<br />//if css<br />@import "lib.css";<br />
  13. 13. Usage<br />Client:<br />CSS + JS:<br /><linkrel="stylesheet/less" type="text/css"href="styles.less"><br /><scriptsrc="less.js" type="text/javascript"></script><br />Server:<br />$npm install less<br />Command-line usage:<br />$lesscstyles.less<br />$lesscstyles.less > styles.css<br />Options: -x (minified)<br />
  14. 14. vs<br />/* CSS */<br />.selector { <br /> background-image: url(../img/tmpl1/png/head_bg.png); background-color: #FF00FF; <br /> border-top: 1px solid #FF00FF;<br />} <br />Variables:<br />vars { <br /> $path = ../img/tmpl1/png; <br /> $color1 = #FF00FF; <br /> $border = border-top: 1px solid $color1; <br />}<br />.selector { <br /> background-image: url($path/head_bg.png); <br /> background-color: $color1; <br /> $border; <br />}<br />
  15. 15. vs<br />Nested selectors:<br />.selector { <br /> self { <br /> margin: 20px; <br /> } <br /> a { <br /> display: block; <br /> } <br /> strong { <br /> color: blue; <br /> }<br />} <br />/* CSS */<br />.selector { margin: 20px; }<br />.selector a { display: block; } <br />.selector strong { color: blue; } <br />
  16. 16. vs<br />Extending Objects:<br />.basicClass { <br /> padding: 20px; <br /> background-color: #FF0000; <br />} <br />.specialClassextends .basicClass { <br /> padding: 10px; <br /> font-size: 14px; <br />} <br />/* CSS */<br />.specialClass, .basicClass { <br />padding: 20px; <br />background-color: #FF0000; <br />} <br />.specialClass { <br />padding: 10px; <br />font-size: 14px; <br />} <br />
  17. 17. vs<br />Math Operations:<br />.selector { <br /> padding: [5px * 2]; <br /> color: [#ccc * 2]; <br />// lets assume $color is '#FFF555' <br /> background-color: [$color - #222 + #101010]; <br />} <br />.selector { <br /> padding: [5px - 3em + 5px]cm; margin: [20 - 10] [30% - 10]; <br />}<br />/* CSS */<br />.selector { <br /> padding: 10px; <br /> color: #ffffff; <br /> background-color: #ede343; <br />} <br />.selector { <br />padding: 7cm; <br />margin: 10px 20%; <br />}<br />
  18. 18. vs<br />Usage:<br />Download xCSS archive.<br />Add this lines:<br /><script type="text/javascript"src="path_to_xcss/"></script><br /><linkrel="stylesheet“ type="text/css“href=“/css/master.css”/><br />Edit the configuration file config.php as needed.<br />$config['path_to_CSS_dir']<br />$config['xCSS_files']<br />$config['use_master_file']<br />$config['master_filename']<br />$config['reset_files']<br />$config['minify_output']<br />…<br />Done!<br />
  19. 19. vs &<br />Variables:<br />$blue: #3bbfce <br />$margin: 16px <br />.content-navigation <br /> border-color: $blue <br /> color: darken($blue, 9%) <br />.border <br /> padding: $margin / 2 <br /> margin: $margin / 2 <br /> border-color: $blue<br />/* CSS */<br />.content-navigation { <br /> border-color: #3bbfce; <br /> color: #2b9eab; <br />} <br />.border { <br /> padding: 8px; <br /> margin: 8px; <br /> border-color: #3bbfce; <br />}<br />
  20. 20. vs &<br />Nesting rules:<br />table.hl<br /> margin: 2em 0 <br />td.ln<br /> text-align: right <br />li<br /> font: <br /> family: serif <br /> weight: bold <br /> size: 1.2em<br />/* CSS */<br />table.hl { <br /> margin: 2em 0; <br />} <br />table.hltd.ln { <br /> text-align: right; <br />} <br />li { <br /> font-family: serif; <br /> font-weight: bold; <br /> font-size: 1.2em; <br />}<br />
  21. 21. vs &<br />Mixins:<br />@mixintable-base <br />th<br /> text-align: center <br /> font-weight: bold <br /> td, th<br /> padding: 2px <br />@mixin left($dist) <br /> float: left <br /> margin-left: $dist <br />#data <br />@include left(10px)<br />@include table-base<br />/* CSS */<br />#data { <br /> float: left; <br /> margin-left: 10px; <br />} <br />#data th { <br /> text-align: center; <br /> font-weight: bold; <br />} <br />#data td, #data th {<br /> padding: 2px; <br />}<br />
  22. 22. vs &<br />Selector Inheritance:<br />.error <br /> border: 1px #f00<br /> background: #fdd<br />.error.intrusion<br /> font-size: 1.3em <br /> font-weight: bold <br />.badError<br />@extend .error<br /> border-width: 3px<br />/* CSS */<br />.error, .badError { <br /> border: 1px #f00; <br /> background: #fdd; <br />} <br />.error.intrusion, .badError.intrusion { <br /> font-size: 1.3em; <br /> font-weight: bold; <br />} <br />.badError { <br /> border-width: 3px; <br />}<br />
  23. 23. vs &<br />Control Directives:<br />p { <br />@if 1 + 1 == 2 { border: 1px solid; } <br />@if 5 < 3 { border: 2px dotted; } <br />}<br />@for $ifrom 1 through 3 { <br /> .item-#{$i} { width: 2em * $i; } <br />}<br />$i: 6; <br />@while $i > 0 { <br /> .item-#{$i} { width: 2em * $i; } <br /> $i: $i - 2; <br />}<br />/* CSS */<br />p { border: 1px solid; }<br />.item-1 { width: 2em; } <br />.item-2 { width: 4em; } <br />.item-3 { width: 6em; }<br />.item-6 { width: 12em; } <br />.item-4 { width: 8em; } <br />.item-2 { width: 4em; }<br />
  24. 24. vs &<br />Usage:<br />$ gem install haml <br />$ sassinput.sass output.css<br />$sass --watch style.sass:style.css<br />$sass --watch app/sass:public/stylesheets<br />Options: --style (:nested, :expanded, :compact, :compressed)<br /># Convert Sass to SCSS <br />$sass-convertstyle.sassstyle.scss<br /># Convert SCSS to Sass <br />$sass-convertstyle.scssstyle.sass<br />
  25. 25. Q&A?<br />
  26. 26. Thanks.<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×