Embed Size (px)
Citation preview
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
