Enhancing OpenCmsfront end developmentwith Sass and Grunt

OpenCms DaysNovember 3, 2014

Our goals

● Edit and compile Sass files directly in VFS

● Integrate Grunt Js

● Build a plug & play solution

Nesting

● Nest selectors within a parent selector

● Clear and organized code

● Code faster

Overview

● Short introduction to Sass

● What is Grunt js

● Our implementation: Glide

What is Sass

● Syntactically Awesome Style Sheet

● adds functionality to CSS

● CSS-like syntax

● Sass compiles to CSS

Nesting

Variables

● Only define a value once

● Easy maintenance

● Reusable code for modules

Variables

Colors in SASS

● Automatic conversion of hex to RGBA

● Functions on color:

darken and lighten, saturate, desaturate, fade, adjust the hue, inverted, complementary colors, mix colors, shade and tint

Colors in SASS

Extend

● Inherit style from another class

● Create placeholder style

● Keep code clean

Extend

mixin

● Functions that output CSS

● Similar to javascript

● Create a personal library

mixin

mixin

mixin

mixin

..and there is more!

● Control directives

if/else for while each

● Math operations

..and there is more!

..and there is more!

Compass

● Framework on the top of Sass

● Pre-built mixins

● Great for cross browser css3 support

Grunt

Grunt is a task runner that allows the automation of mundane development work

Why Grunt

● from simple workflow enhancements, to

complete production build systems

● active plugin development community

(~3600 plugins)

Automation in grunt

● Watch .scss, jsp and js

● Compile sass/compass

● Minify css for online project

● Minify javascript

● Auto publish

● Livereload

live reload

● Wait

● Concentrate

● Save time

Demo: extreme livereload

Glide

Demo: Glide in action

Overview 2nd part

● Glide implementation

● Configuration

● Installation: OpenCms 9 demo website

Glide implementation

● Grunt Process runs in a dedicated thread

● A pointer is stored in the ServletContext

● All users share a single Grunt instance

● Only members of the authorized group see and interact with Glide

● All the Java code is in a JSP for quick customization

Grunt optimization

● Sass cache files are stored outside the OpenCms VFS

● Configuration file is parameterized

● Required node packages are already bundled

● No symlinks as they're not supported by network shared folder

Server requirements

● Install Node and Compass

● Mount OpenCms network share

● Open port for livereload

users don't have to install anything on their workstations

OpenCms Module requirements

Configuration

Demo: installation in the 9.0.1 demo site

● drag & drop in an element group (the footer)

● configure Glide

● restart Grunt so it watches the new module

● change a formatter (e.g. Jumbotron)

● create Sass and JS files

Download Glide

www.opencmsitalia.it/glide

● main module

● demo site

Thanks!Alessandro Magnolo & Marco Rho

contact us at info@opencmsitalia.it