My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
LanguageReference  

FLUID CSS Language Reference

Variables

You can add new CSS variable with the syntax :

@var_name:var_value;

And use them like this :

css_rule {css_property:@var_name;}

NOTE : Names could only have letters/numbers and - and _

Inclusion of rules inside other rules

You can add some class rules inside other rules with the syntax :

.css_source_rule { ... }

css_rule { @inc(.css_source_rule) }

NOTE : This only work on class, and I introduce the @inc keyword because I think the LESS way of mixins is not semanticaly correct... Spaces are not taken into account, so you can format your code as you want.

Inclusion of other CSS files

Without the W3C limitation of writing includes at the top of the file, you can add include instructions anywhere.

@include(...) /* TOP OF FILE */

...

@inc(/my/css_file.css);

Calcul on pixels or em units

Operators +, -, * and / are understood for unit based calculation or em-based... Units are remove from the calcul so you'll have to explicitly add it at the end of the instruction.

@page_width:900px;
@b_nav_height:18px;
@b_nav_font_size:10px;
@b_nav_padding:4px;
@b_anime_height:253px;

body#t-index #b-body-wrapper {
min-height:@eval(@b_nav_height+@b_anime_height)px;
min-width:@eval(@page_width+20px);
width:@page_width;
height:@eval(@b_nav_height+@b_anime_height)px;
position:absolute;
top:50%;
left:50%;
margin:-@eval((@b_nav_height+@b_anime_height)/2)px 0 0 -@eval(@page_width/2)px;
}

#b-brand {position:absolute; top:@eval(4px+@b_nav_height)px; left:459px;}
Powered by Google Project Hosting