Best Practices
Lexicon is an extension of Bootstrap's CSS Framework. It fills the gaps between Bootstrap and the specific needs of Liferay Portal. It's built with Sass and we use Bourbon to handle browser prefixing in css.
Choosing the Right Lexicon Component
There are many components in Lexicon, some components overlap, some look the same at first glance, while several are combined to form a whole new component. When building your module, be careful not to choose and modify the first component that looks like a fit and take the time to choose the right component for the job.
Figures, Aspect Ratio, and Crop Img are components that are similar but serve different purposes.
Figures are intended to be used for captioning images, while Aspect Ratio, and Crop Img are intended for sizing images. Aspect Ratio maintains a specific ratio relative to its container and Crop Img crops the viewable area of an image instead of changing the image size.
Aspect Ratio and Crop Img can be used in Figures, but Figures shouldn't be used in Aspect Ratio or Crop Img.
How Sass Files are Loaded in Liferay 7.0
| File | Description |
|---|---|
| theme's aui.scss | contains Bootstrap, Lexicon/Atlas |
| |---- _aui_variables.scss | overwrites Bootstrap/Lexicon/Atlas variables |
| |---- ../alloy-font-awesome/scss/font-awesome | |
| |---- lexicon-base/main | |
| |---- ../../liferay_variables_custom | |
| |---- ../../liferay_variables | |
| |---- ../../aui_custom | |
| |---- ../../liferay_custom | |
| File | Description |
| frontend-css-web/main.scss | |
| |---- portal/aui_deprecated.css | |
| |---- portal | |
| |---- taglib | |
| |---- portal/accessibility | |
| File | Description |
| apps/all main.scss | |
| File | Description |
| theme's main.scss | |
| |---- imports | Imports third-party libraries required for theme e.g. Bourbon, Liferay Mixins, Lexicon Base Variables, and Bootstrap Mixins |
| |---- base | |
| |---- portal | |
| |---- taglib | |
| |---- application | |
| |---- layout | |
| |---- control_menu | |
| |---- navigation | |
| |---- portlet | |
| |---- extras | |
| |---- custom |
Lexicon Variables in a Liferay Component
Leverage Lexicon variables inside a 7.0 component by adding _variables.scss and _variables_custom.scss files to the directory containing the component e.g. Portlet.
Import them by adding @import "portlet/variables_custom"; and @import "portlet/variables"; at the top of _styled/css/_portlet.scss.
_styled/css/_portlet.scss
@import "portlet/variables_custom";
@import "portlet/variables";
@import "portlet/controls";
@import "portlet/controls_borderless";
@import "portlet/labels";
@import "portlet/messages";
@import "portlet/spec";
@import "portlet/topper";
@import "portlet/misc";
@import "portlet/app_components";_variables.scss should contain lexicon-base style variables and _variables_custom.scss should contain variables that overwrite or add atlas styles.
The file structure should look similar to:
frontend-theme-classic-web
src
META-INF
resources
classic
_diffs
css
portlet
_variables_custom.scss
frontend-theme-styled
src
META-INF
resources
_styled
css
portlet
_variables.scss
_variables_custom.scssExtending a Lexicon Component in 7.0
In this walkthrough, we will extend the Lexicon Cards Component to create an inverse colored card for the Card Taglib. The Card Taglib exists for all themes, so we will need to add an inverse style that matches the _styled theme as well as classic theme.
The first thing we need to do is create a files inside _styled/css/taglib called _card.scss, _variables.scss, and _variables_custom.scss and import them in _styled/css/_taglib.scss.
@import "taglib/variables_custom";
@import "taglib/variables";
@import "./taglib/app_view_common";
@import "./taglib/app_view_entry";
@import "./taglib/app_view_search_entry";
@import "./taglib/app_view_toolbar";
@import "./taglib/asset_links";
@import "./taglib/asset_metadata";
@import "./taglib/calendar";
@import "taglib/card";
@import "./taglib/categorization_filter";
@import "./taglib/diff";
@import "./taglib/diff_html";
@import "./taglib/diff_version_comparator";
@import "./taglib/discussion";
@import "./taglib/drop_here_info";
@import "./taglib/field_wrapper";
@import "./taglib/flags";
@import "./taglib/form_navigator";
@import "./taglib/header";
@import "./taglib/icon";
@import "./taglib/image_selector";
@import "./taglib/input_localized";
@import "./taglib/input_move_boxes";
@import "./taglib/layouts_tree";
@import "./taglib/map";
@import "./taglib/navbar";
@import "./taglib/preview";
@import "./taglib/search_container";
@import "./taglib/search_toggle";
@import "./taglib/social_activities";
@import "./taglib/social_bookmarks";
@import "./taglib/user_display";
@import "./taglib/webdav";
@import "./taglib/workflow_status";_variables_custom.scss should be an empty file in _styled. In classic and admin it should contain the variable overrides below.
$card-inverse-bg: $inverse-bg !default;
$card-inverse-border: $inverse-border !default;
$card-inverse-color: $inverse-color !default;
$card-inverse-link-color: $inverse-link-color !default;_variables.scss will contain variables for _styled.
$card-inverse-bg: $navbar-inverse-bg !default;
$card-inverse-border: $navbar-inverse-border !default;
$card-inverse-color: #FFF !default;
$card-inverse-link-color: $navbar-inverse-link-color !default;_card.scss will contain styles for our inverse card.
.card-inverse {
background-color: $card-inverse-bg;
color: $card-inverse-color;
a {
color: $card-inverse-link-color;
}
}