Your SlideShare is downloading. ×
  • Like
Software programming tools for creating/managing CSS files
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Software programming tools for creating/managing CSS files

  • 2,188 views
Published

 

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,188
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
24
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Software programming tools for creating/managing CSS files
    DinuSuman
  • 2. What kind of software tools can be?
    IDE
    Tools for generating templates
    CSS Frameworks with existing plugins, …
    Languages that extend css
    (will be covered in this presentation)
  • 3. Some Languages that extend css:
    Less (http://lesscss.org/)
    xCSS (http://xcss.antpaw.org)
    Sass/Scss (http://sass-lang.com/)
    Hss (http://ncannasse.fr/projects/hss)
    CleverCss (http://sandbox.pocoo.org/clevercss/)
  • 4. Why simple css isn’t enough?
    Why do we need extending languages?
  • 5. What do we get?
    Variables
    Mixins
    Nested Rules
    Functions & Operations
  • 6. Variables
    // LESS
    @color: #4D926F;
    #header {
    color:@color;
    }
    h2 {
    color:@color;
    }
    /* Compiled CSS */
    #header {
    color: #4D926F;
    }
    h2 {
    color: #4D926F;
    }
  • 7. Mixins
    // LESS
    .rounded-corners (@radius: 5px) {
    border-radius:@radius;
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    }
    #header {
    .rounded-corners;
    }
    #footer {
    .rounded-corners(10px);
    }
    /* Compiled CSS */
    #header {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    }
    #footer {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    }
  • 8. Nested Rules
    // LESS
    #header {
    h1 {
    font-size: 26px;
    font-weight: bold;
    }
    p { font-size:12px;
    a {
    text-decoration: none;
    &:hover {
    border-width: 1px ;
    }
    }
    }
    }
    /* Compiled CSS */
    #headerh1 {
    font-size: 26px;
    font-weight: bold;
    }
    #header p {
    font-size: 12px;
    }
    #header p a {
    text-decoration: none;
    }
    #header p a:hover {
    border-width: 1px;
    }
  • 9. Functions & Operations
    // LESS
    @the-border: 1px;
    @base-color: #111;
    @red: #842210;
    #header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
    }
    #footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
    }
    /* Compiled CSS */
    #header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
    }
    #footer {
    color: #114411;
    border-color: #7d2717;
    }
  • 10. Other Operations:
    @base: 5%;
    @filler: @base * 2;
    @other: @base + @filler;
    color: #888 / 4;
    background-color: @base-color + #111;
    Height: 100% / 2 + @filler;
    @var: 1px + 5;
    width: (@var+ 5) * 2;
    border: (@width * 2) solidblack;
  • 11. Functions:
    lighten(@color, 10%); // return a color which is 10% *lighter* than @color
    darken(@color, 10%); // return a color which is 10% *darker* than @color
    saturate(@color, 10%); // return a color 10% *more* saturated than @color
    desaturate(@color, 10%); // return a color 10% *less* saturated than @color
    fadein(@color, 10%); // return a color 10% *less* transparent than @color
    fadeout(@color, 10%); // return a color 10% *more* transparent than @color
    spin(@color, 10); // return a color with a 10 degree larger in hue than @color
    spin(@color, -10); // return a color with a 10 degree smaller hue than @color
    hue(@color); // returns the `hue` channel of @color
    saturation(@color); // returns the `saturation` channel of @color
    lightness(@color); // returns the 'lightness' channel of @color
  • 12. Other:
    //Scope
    @var: red;
    #page {
    @var: white;
    #header { color: @var; // white }
    }
    #footer { color: @var; // red }
    //importing
    @import "lib.less";
    //or
    @import"lib";
    //if css
    @import "lib.css";
  • 13. Usage
    Client:
    CSS + JS:
    <linkrel="stylesheet/less" type="text/css"href="styles.less">
    <scriptsrc="less.js" type="text/javascript"></script>
    Server:
    $npm install less
    Command-line usage:
    $lesscstyles.less
    $lesscstyles.less > styles.css
    Options: -x (minified)
  • 14. vs
    /* CSS */
    .selector {
    background-image: url(../img/tmpl1/png/head_bg.png); background-color: #FF00FF;
    border-top: 1px solid #FF00FF;
    }
    Variables:
    vars {
    $path = ../img/tmpl1/png;
    $color1 = #FF00FF;
    $border = border-top: 1px solid $color1;
    }
    .selector {
    background-image: url($path/head_bg.png);
    background-color: $color1;
    $border;
    }
  • 15. vs
    Nested selectors:
    .selector {
    self {
    margin: 20px;
    }
    a {
    display: block;
    }
    strong {
    color: blue;
    }
    }
    /* CSS */
    .selector { margin: 20px; }
    .selector a { display: block; }
    .selector strong { color: blue; }
  • 16. vs
    Extending Objects:
    .basicClass {
    padding: 20px;
    background-color: #FF0000;
    }
    .specialClassextends .basicClass {
    padding: 10px;
    font-size: 14px;
    }
    /* CSS */
    .specialClass, .basicClass {
    padding: 20px;
    background-color: #FF0000;
    }
    .specialClass {
    padding: 10px;
    font-size: 14px;
    }
  • 17. vs
    Math Operations:
    .selector {
    padding: [5px * 2];
    color: [#ccc * 2];
    // lets assume $color is '#FFF555'
    background-color: [$color - #222 + #101010];
    }
    .selector {
    padding: [5px - 3em + 5px]cm; margin: [20 - 10] [30% - 10];
    }
    /* CSS */
    .selector {
    padding: 10px;
    color: #ffffff;
    background-color: #ede343;
    }
    .selector {
    padding: 7cm;
    margin: 10px 20%;
    }
  • 18. vs
    Usage:
    Download xCSS archive.
    Add this lines:
    <script type="text/javascript"src="path_to_xcss/"></script>
    <linkrel="stylesheet“ type="text/css“href=“/css/master.css”/>
    Edit the configuration file config.php as needed.
    $config['path_to_CSS_dir']
    $config['xCSS_files']
    $config['use_master_file']
    $config['master_filename']
    $config['reset_files']
    $config['minify_output']

    Done!
  • 19. vs &
    Variables:
    $blue: #3bbfce
    $margin: 16px
    .content-navigation
    border-color: $blue
    color: darken($blue, 9%)
    .border
    padding: $margin / 2
    margin: $margin / 2
    border-color: $blue
    /* CSS */
    .content-navigation {
    border-color: #3bbfce;
    color: #2b9eab;
    }
    .border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
    }
  • 20. vs &
    Nesting rules:
    table.hl
    margin: 2em 0
    td.ln
    text-align: right
    li
    font:
    family: serif
    weight: bold
    size: 1.2em
    /* CSS */
    table.hl {
    margin: 2em 0;
    }
    table.hltd.ln {
    text-align: right;
    }
    li {
    font-family: serif;
    font-weight: bold;
    font-size: 1.2em;
    }
  • 21. vs &
    Mixins:
    @mixintable-base
    th
    text-align: center
    font-weight: bold
    td, th
    padding: 2px
    @mixin left($dist)
    float: left
    margin-left: $dist
    #data
    @include left(10px)
    @include table-base
    /* CSS */
    #data {
    float: left;
    margin-left: 10px;
    }
    #data th {
    text-align: center;
    font-weight: bold;
    }
    #data td, #data th {
    padding: 2px;
    }
  • 22. vs &
    Selector Inheritance:
    .error
    border: 1px #f00
    background: #fdd
    .error.intrusion
    font-size: 1.3em
    font-weight: bold
    .badError
    @extend .error
    border-width: 3px
    /* CSS */
    .error, .badError {
    border: 1px #f00;
    background: #fdd;
    }
    .error.intrusion, .badError.intrusion {
    font-size: 1.3em;
    font-weight: bold;
    }
    .badError {
    border-width: 3px;
    }
  • 23. vs &
    Control Directives:
    p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
    }
    @for $ifrom 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
    }
    $i: 6;
    @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
    }
    /* CSS */
    p { border: 1px solid; }
    .item-1 { width: 2em; }
    .item-2 { width: 4em; }
    .item-3 { width: 6em; }
    .item-6 { width: 12em; }
    .item-4 { width: 8em; }
    .item-2 { width: 4em; }
  • 24. vs &
    Usage:
    $ gem install haml 
    $ sassinput.sass output.css
    $sass --watch style.sass:style.css
    $sass --watch app/sass:public/stylesheets
    Options: --style (:nested, :expanded, :compact, :compressed)
    # Convert Sass to SCSS
    $sass-convertstyle.sassstyle.scss
    # Convert SCSS to Sass
    $sass-convertstyle.scssstyle.sass
  • 25. Q&A?
  • 26. Thanks.