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.
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,730 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

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 />

×