Example Brand
We've coined the phrase 'Daisy chaining' to describe how our theme styles leverage dependencies.
e.g. If you @import brand-chr
, it will @import brand-globals
, which in turn will @import bootstrap
.
Basic import
You can run a theme in your app by simply including theme.less, which will bring in everything by default.
@import '../node_modules/@holidayextras/brand-chr/src/less/theme.less';
Advanced import
However, for more control and visibility, we recommend that you @import just the less files that you need.
//
// Example cherry picking file
// --------------------------------------------------
// Core variables and mixins
@import '../node_modules/@holidayextras/brand-chr/src/less/variables';
@import '../node_modules/@holidayextras/brand-chr/src/less/mixins';
// Reset and dependencies
@import '../node_modules/@holidayextras/brand-chr/src/less/normalize';
@import '../node_modules/@holidayextras/brand-chr/src/less/print';
// Core CSS
@import '../node_modules/@holidayextras/brand-chr/src/less/scaffolding';
@import '../node_modules/@holidayextras/brand-chr/src/less/type';
// @import '../node_modules/@holidayextras/brand-chr/src/less/code';
@import '../node_modules/@holidayextras/brand-chr/src/less/grid';
@import '../node_modules/@holidayextras/brand-chr/src/less/tables';
@import '../node_modules/@holidayextras/brand-chr/src/less/forms';
@import '../node_modules/@holidayextras/brand-chr/src/less/buttons';
// Components
@import '../node_modules/@holidayextras/brand-chr/src/less/component-animations';
// @import '../node_modules/@holidayextras/brand-chr/src/less/dropdowns';
// @import '../node_modules/@holidayextras/brand-chr/src/less/button-groups';
@import '../node_modules/@holidayextras/brand-chr/src/less/input-groups';
@import '../node_modules/@holidayextras/brand-chr/src/less/navs';
@import '../node_modules/@holidayextras/brand-chr/src/less/navbar';
@import '../node_modules/@holidayextras/brand-chr/src/less/breadcrumbs';
// @import '../node_modules/@holidayextras/brand-chr/src/less/pagination';
// @import '../node_modules/@holidayextras/brand-chr/src/less/pager';
// @import '../node_modules/@holidayextras/brand-chr/src/less/labels';
// @import '../node_modules/@holidayextras/brand-chr/src/less/badges';
@import '../node_modules/@holidayextras/brand-chr/src/less/jumbotron';
// @import '../node_modules/@holidayextras/brand-chr/src/less/thumbnails';
@import '../node_modules/@holidayextras/brand-chr/src/less/alerts';
// @import '../node_modules/@holidayextras/brand-chr/src/less/progress-bars';
@import '../node_modules/@holidayextras/brand-chr/src/less/media';
// @import '../node_modules/@holidayextras/brand-chr/src/less/list-group';
@import '../node_modules/@holidayextras/brand-chr/src/less/panels';
@import '../node_modules/@holidayextras/brand-chr/src/less/responsive-embed';
// @import '../node_modules/@holidayextras/brand-chr/src/less/wells';
@import '../node_modules/@holidayextras/brand-chr/src/less/close';
// @import '../node_modules/@holidayextras/brand-chr/src/less/pickadate';
// Components w/ JavaScript
@import '../node_modules/@holidayextras/brand-chr/src/less/modals';
// @import '../node_modules/@holidayextras/brand-chr/src/less/tooltip';
// @import '../node_modules/@holidayextras/brand-chr/src/less/popovers';
// @import '../node_modules/@holidayextras/brand-chr/src/less/carousel';
// Utility classes
@import '../node_modules/@holidayextras/brand-chr/src/less/utilities';
@import '../node_modules/@holidayextras/brand-chr/src/less/responsive-utilities';