User Interface Changes in DXP 7.0

This article highlights several changes to front-end tools and features with User Interface for Liferay DXP 7.0.

Resolution

Here are some highlighted changes followed by brief explanations of new projects:

Modularization; css and javascript files can be moved with modified file structures.
Moved some logic from portal code to separate repositories (Lexicon, Javascript Loader).
Updated Bootstrap to a newer version.
We changed SASS parser to libsass and discontinued dynamic parsing.
Moved from Compass to Bourbon as our toolkit for SASS mixins.
Since Yahoo does not maintain YUI3 anymore, our AlloyUI framework is deprecated.
New javascript library and framework, Metal.js.
We are using ES2015 code syntax in some places.
New Node.js based projects (Lexicon, Theme Generator, AlloyEditor, Metal.js, Javascript Loader).

Lexicon

The Liferay Experience Language is a new way to make use of HTML, CSS, and JS with Liferay. Lexicon provides consistent and easy-to-use API to help developers build clean UI components.
Please see the Lexicon website as the best source for examples.

Liferay Theme Generator

Allows for new themes to be generated and used with Liferay while providing necessary tools to deploy and modify your theme. Allows for .scss file extensions. Can build, create, import and deploy themes or theme fragments called themelets.
See README and download repository here.

AlloyEditor

AlloyEditor is a WYSIWYG editor build on top of CKEditor that allows for improved editing usability and content creation. Feel free to use it yourself in this live demo.
Download and Get Started using AlloyEditor

Metal.js

Provides the core attributes that allow developers to create their own components and templates.

Javascript Loader