There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to op
GWT.create 2015
CSS3 and GWT in perfect harmony JULIEN DRAMAIX
Julien Dramaix Software Engineer at Arcbees +JulienDramaix @jDramaix
What is this about?
What is this about ?
New syntax for CssResource based on GSS
Why?
Why ?
DRY principle is missing with CSS.
Why ?
Missing CSS3 support.
What is Closurestylesheets?
What is Closure-stylesheets?
It’s an extension to CSS
What is Closure-stylesheets?
It’s an extension to CSS
Write gss and compile to CSS
What is Closure-stylesheets?
Support variables, conditionals, mixing...
What is Closure-stylesheets?
Support minification, linting, RTL flipping, renaming
What is Closure-stylesheets?
Full CSS3 support!
What is Closure-stylesheets?
Open Source project written and maintained by Google!
Example: @def BG_COLOR rgb(235, 239, 249); @defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } body { background-color: BG_COLOR; }
.logo { @mixin size(150px, 55px); background-image: url('http://www.google.com/images/logo_sm.gif'); }
Compile to: body { background-color: #ebeff9; } .logo { width: 150px; height: 55px; background-image: url('http://www.google. com/images/logo_sm.gif'); }
How to use it?
How to use it ?
1. Create a GSS file.
myFirstGss.gss: @def BG_COLOR rgb(235, 239, 249); @defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } body { background-color: BG_COLOR; }
.logo { @mixin size(150px, 55px); background-image: url('http://www.google.com/images/logo_sm.gif'); }
How to use it ?
2. Create your CssResource interface as usual.
public interface MyFirstGss extends CssResource { String foo(); } public interface Resources extends ClientBundle { MyFirstGss myFirstGss(); }
public interface MyFirstGss extends CssResource { String foo(); } public interface Resources extends ClientBundle { @Source("myFirstGss.gss") MyFirstGss css(); }
How to use it ?
3. Enable GSS in your GWT module file.
How to use it ?
4. For UiBinder, use the attribute GSS in your inline style.
/* Constants*/ @def PADDING_RIGHT 50px; @def PADDING_LEFT 50px; /*mixin */ @defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } /* … */
How to use it ?
GSS will be the default syntax in GWT 2.8.
Features and syntax.
Features and syntax
Constants.
@def BG_COLOR rgb(235, 239, 249); @def PADDING_RIGHT 15px; @def CONTAINER_COLOR BG_COLOR;
@def BG_COLOR rgb(235, 239, 249); @def PADDING_RIGHT 15px; @def CONTAINER_COLOR BG_COLOR;
Constant name in UPPERCASE !
Features and syntax
Runtime evaluation.
@def BLUE eval("com.foo.bar.client.resource.Colors.BLUE"); .red { color: eval("com.foo.bar.client.resource.Colors.RED"); }
@def BLUE eval("com.foo.bar.client.resource.Colors.BLUE"); .red { color: eval("com.foo.bar.client.resource.Colors.RED"); }
Any valid Java expression
Features and syntax
Functions.
.content { position: absolute; margin-left: add(LEFT_PADDING, /* padding left */ LEFT_HAND_NAV_WIDTH, RIGHT_PADDING); /* padding right */ }
FUNCTIONS
Built-in arithmetic functions
➔ ➔ ➔ ➔ ➔ ➔
add() sub() mult() divide() min() max()
FUNCTIONS
Built-in color manipulation function
➔ ➔ ➔ ➔ ➔ ➔
blendColorsHsb(startColor, endColor) blendColorsRgb(startColor, endColor) makeMutedColor(backgroundColor, foregroundColor [, saturationLoss]) addHsbToCssColor(baseColor, hueToAdd, saturationToAdd, brightnessToAdd) makeContrastingColor(color, similarityIndex) adjustBrightness(color, brightness)
FUNCTIONS
You can define your own function...
FUNCTIONS
… or not.
FUNCTIONS
Should be available in GWT 2.8 Stay tuned!
… or not.
Features and syntax
Mixins.
@defmixin size(WIDTH, HEIGHT) { width: WIDTH; height: HEIGHT; } .container { @mixin size(550px, 500px); }
Compile to: .container { width: 550px; height: 500px; }
@defmixin borderradius(TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT, TOP_LEFT) { -webkit-border-top-right-radius: TOP_RIGHT; -webkit-border-bottom-right-radius: BOTTOM_RIGHT; -webkit-border-bottom-left-radius: BOTTOM_LEFT; -webkit-border-top-left-radius: TOP_LEFT; -moz-border-radius-topright: TOP_RIGHT; -moz-border-radius-bottomright: BOTTOM_RIGHT; -moz-border-radius-bottomleft: BOTTOM_LEFT; -moz-border-radius-topleft: TOP_LEFT; border-top-right-radius: TOP_RIGHT; border-bottom-right-radius: BOTTOM_RIGHT; border-bottom-left-radius: BOTTOM_LEFT; border-top-left-radius: TOP_LEFT; }
.foo { @mixin borderradius(5px, 0, 5px, 0) }
http://dev.arcbees.com/gsss/mixins/
Css animations done with GSSS: visit http://www.arcbees.com
Features and syntax
Conditional CSS.
CONDITIONAL CSS
Compile time conditional versus Runtime conditional.
CONDITIONAL CSS
Conditional evaluated at compile time.
CONDITIONAL CSS
Conditional evaluated at compile time.
Based on permutations or properties you define in your module file.
@if (is("ie8") || is("ie9") && !is("locale", "en")) { .foo{ /* … */ } } @elseif (is("safari")) { .foo{ /* … */ } } @elseif is("customProperty", "customValue") { .foo{ /* … */ } } @else { .foo{ /* … */ } }
CONDITIONAL CSS
Special case: single boolean value configuration property defined in uppercase.
@if (USE_EXTERNAL) { @external '*'; }
CONDITIONAL CSS
Conditional evaluated at runtime.
@if (eval("com.foo.Bar.FOO")) { /* ... */ } @elseif (eval('com.foo.Bar.foo("foo")')) { /* ... */ }
@if (eval("com.foo.Bar.FOO")) { /* ... */ } @elseif (eval('com.foo.Bar.foo("foo")')) { /* ... */ }
Any valid Java expression returning a boolean.
CONDITIONAL CSS
Differences between runtime and compile-time conditionals.
This is valid
@if (is("ie8") || is("ie9")) { @def PADDING 15px; } @else { @def PADDING 0; }
This is not
@if (eval("com.foo.Bar.useLargePadding()")) { @def PADDING 15px; } @else { @def PADDING 0; }
This is valid
@if (USE_EXTERNAL) { @external '*'; }
This is not
@if (eval("com.foo.Bar.useExternal()")) { @external '*';' }
CONDITIONAL CSS
Runtime conditionals can only contain CSS rules.
Features and syntax
Resources Url
public interface Resources extends ClientBundle { ImageResource iconPrintWhite(); ImageResource logout(); $ java -cp $CONVERTER_CLASS_PATH \ com.google.gwt.resources. converter.Css2Gss /path/to/cssFileToconvert.css
THE CONVERTER
Batch conversion.
$ CONVERTER_CLASS_PATH="/path/to/gwt-user.jar:/path/to/gwt-dev. jar" $ java -cp $CONVERTER_CLASS_PATH \ com.google.gwt.resources.converter.Css2Gss -r /path/to/project
THE CONVERTER
Converter Web Application: http://css2gss.appspot.com
How to migrate
Support of legacy?
SUPPORT OF LEGACY
Two conversion modes: strict or lenient
SUPPORT OF LEGACY
Two conversion mode: strict or lenient => Use strict only
How to migrate
Migration path.
MIGRATION PATH
➔ Enable GSS and the auto-conversion in strict mode. ➔ Fix issues. ➔ Use the converter and convert all your css files ➔ Set back auto-conversion to off.
Configuration
CONFIGURATION
CssResource.obfuscationPrefix
CssResource.obfuscationPrefix
Disable the obfuscation prefix if your page contains only one GWT application.
CONFIGURATION
CssResource.allowedAtRules
