Getting Started

From Documentation
Revision as of 10:36, 11 November 2011 by Tomyeh (talk | contribs) (→‎Overview)
Getting Started



Overview

ZUSS (ZK User-interface Style Sheet) is an extension to CSS. It is compatible with CSS, while allows to use variables, mixins, nested rules, expressions, and Java methods with existing CSS syntax.

Variables

/* ZUSS */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@dark-orange: orange - #010203;

div.hilite { color: @light-blue;}
div.hilite2 { color: @dark-orange;}
/* CSS */
div.hilite { color:  #6c94be;}
div.hilite2 { color: #fea300;}

Mixins

/* ZUSS */
@border_radious(@radius: 4px) {
  border-radius: @radius;
}

div.rounded {
  @border_radious();
}
button.rounded {
  @border_radious(3px);
}
/* CSS */
div.rounded {
  border-radius: 4px;
}
button.rounded {
  border-radius: 3px;
}

Nested Rules

/* ZUSS */
.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}
/* CSS */
.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

Functions

/* ZUSS */
@nice_grey: #5B5B5B;
@darken(@color, @diff: 10%): @color * (1 - @diff);

div {
  color: @darken(@nice_grey);
}
/* CSS */
div {
  color: #525252;
}

Conditional Content

Include

/* ZUSS */
.box_shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  @if (@gecko < 5) {
    -moz-box-shadow: @arguments;
  } @elif (@webkit) {
    -webkit-box-shadow: @arguments;
  }
}
/* ZUSS */
@include another.zuss;

Download

Servlet Usage

Command-line Usage

Java Usage

Version History

Last Update : 2011/11/11


Version Date Content
     



Last Update : 2011/11/11

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.