Each demo has own base style
[root]/src/sass/demo/[demo_id]/style.scss
that will be compiled and added into the demo's base css bundle
assets/demo/[demo_id]/base/styles.bundle.css
.
Each demo has own base style
[root]/src/sass/demo/[demo_id]/style.scss
that will be compiled and added into the demo's base css bundle
assets/demo/[demo_id]/base/styles.bundle.css
.
The demo's
style.scss
includes the entire framework stylesheets and compiles with its own layout and global settings that overrides's Metronic frameworks base global settings. Thus each demo can customize
and change the look and feel of the the entire theme components by overriding global config
[root]/src/sass/framework/_config.scss
by the demo level config
[root]/src/sass/demo/[demo_id]/_framework-config.scss
.
Metronic uses nested map list to structure the config options with special custom function
arrat-get()
to access the nested config structure.
Below is the example of the framework's base SASS config:
//
//** Global Config
//
//== Framework SASS Functions
@import "base/functions";
//== Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$m--layout-breakpoints: (
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px,
// Extra large screen / wide desktop
xxl: 1400px,
xxxl: 1600px
) !default;
//== Global arrow style
$m--arrow-style: 'smooth'; // supported options: smooth, classic
//== Default skin
$m--default-skin: 'light'; // supported options: light, dark
//== Global rounded border mode
$m--rounded: true;
//== Force cursor with pointer for button tags globally
$m--btn-force-hover-pointer: true;
//== Border Radius
$m--border-radius: (
general: 4px,
dropdown: 6px,
scrollbar: 2px
);
//== Transition
$m--transition: (
general: all 0.3s,
link: (
hover: color .4s ease
)
);
//== UI State Color
$m--state-colors: (
// metronic states
brand: (
base: #716aca,
inverse: #ffffff
),
metal: (
base: #c4c5d6,
inverse: #111111
),
light: (
base: #ffffff,
inverse: #282a3c
),
accent: (
base: #00c5dc,
inverse: #ffffff
),
focus: (
base: #9816f4,
inverse: #ffffff
),
// bootstrap states
primary: (
base: #5867dd,
inverse: #ffffff
),
success: (
base: #34bfa3,
inverse: #ffffff
),
info: (
base: #36a3f7,
inverse: #ffffff
),
warning: (
base: #ffb822,
inverse: #111111
),
danger: (
base: #f4516c,
inverse: #ffffff
)
);
//== The body element font settings
$m--root-font: (
size: (
desktop: 14px,
tablet: 13px,
mobile: 13px
),
weight: 300,
color: (
light: #333333,
dark: #efefef
)
);
//== Best font families
$m--font-families: (
regular: 'Poppins',
heading: 'Roboto'
);
//== General link font settings
$m--link-font: (
default: (
color: (
light: get-brand-color(),
dark: get-brand-color()
)
),
hover: (
color: (
light: get-brand-color('+'),
dark: get-brand-color('+')
)
)
);
You can access to an option by using
array-get()
function as shown below:
$border-radius: array-get($m--border-radius, general); // 4px;
$brand-base-color: array-get($m--state-colors, brand, base); // #716aca
$brand-inverse-color: array-get($m--state-colors, brand, inverse); // #ffffff
You can use Metronic's globally available base mixins in your custom codes. All available mixins can be found here:
src/sass/framework/base/_mixins.scss
You can use Metronic's globally available SASS functions in your custom codes. All available functions can be found here:
src/sass/framework/base/_functions.scss
Class | Description |
---|---|
m--margin-[size] m--margin-top-[size] m--margin-bottom-[size] m--margin-left-[size] m--margin-right-[size]
|
Margin helper classes where
[size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example:
m--margin-10 , m--margin-top-20 |
m--padding-[size] m--padding-top-[size] m--padding-bottom-[size] m--padding-left-[size] m--padding-right-[size]
|
Padding helper classes where
[size] can accept 5, 10, 15, 20, 25, 30, 35, 40, 45 and 50. Example:
m--padding-10 , m--padding-left-20 |
m--full-height
|
Set full 100% height helper class. |
m--valign-top m--valign-middle m--valign-bottom |
Vertical align the content to top, middle or bottom |
m--space-[size]
|
Space helper classes where
[size] can accept 5, 10, 15, 20, 30, and 40. Example:
m--space-10 , m--space-20 |
m--block-center
|
Helper class to set element centered. |
m--align-[alignment]
|
Alignment helper classes where
[alignment] can accept right, left and center. Example:
m--align-right , m--align-center |
m--pull-[direction]
|
Pull element helper classes where
[direction] can accept right and left. Example:
m--pull-right , m--pull-left |
m--img-rounded
|
Image rounded border helper class |
m--block-inline
|
Helper class to set element display as inline block. |
m--hide
|
Helper class to hide element. |
m--clearfix
|
|
m--marginless
|
Remove margin helper class |
m--img-centered
|
Helper class to set image centered |
m--font-transform-u m--font-transform-l m--font-transform-c m--font-transform-i |
Text transform helper classes. |
m--font-[weight]
|
Weight helper classes where
[weight] can accept thin, normal, bold, bolder, boldest and boldest2. Example:
m--font-thin , m--font-normal ,
m--font-bold |
m--[type]-font-size-[size]
|
Font size helper classes where [type] can accept text and icon.
[size] can accept lg1, lg2, lg3, lg4, lg5, sm1, sm2, sm3, sm4, and sm5. Example:
m--icon-font-size-lg3 , m--font-normal |
m--font-[color] m--font-inverse-[color] m--bg-[color] m--bg-fill-[color] |
Font and background color helper classes where
[color] can accept brand, metal, light, accent, focus, primary, success, info, warning and danger. Example:
m--font-inverse-primary , m--bg-info ,
m--bg-fill-danger |
m--visible-[breakpoint] m--visible-[breakpoint]-inline-block m--hidden-[breakpoint] |
Helper classes to set visible or hidden for responsive breakpoint.
[breakpoint] can accept sm, md, lg, xl, xxl, xxxl. Example:
m--visible-sm , m--visible-md-inline-block ,
m--hidden-xl |
I run a team of 20 product managers, developers, QA and UX resources. Previously we designed everything ourselves. For our newest platform we tried out Metronic. I cannot overestimate the impact Metronic has had. It's accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it's probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward.
The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes!
Everything within Metronic is customizable globally to provide limitless unique styled projects
Choose a perfect design for your next project among hundreds of demos
A huge collection of components to power your application with the latest UI/UX trands
Enterprise ready Angular 6 integration with built-in authentication module and many more
Metronic deeply customizes Bootstrap with native look and feel
Our super sleek and intuitive Datatable comes packed with all advanced CRUD features
Metronic is the only theme trusted by over 60,000 developers world wide
Lifetime updates with new demos and features is guaranteed
Metronic is writer with a code structure that all developers will be able to pick up easily and fall in love