Kube 6.5

The main thing

• Added: Colors, Sizing, Positioning Sass components
• The grid are without gutters by default
• Grid columns got a positioning change (such centering/alignment) based on the new Positioning component
• Completely revised JS plugins and they are OOP-styled
• Fully redesigned modifiers classes for typography and utilities
• Added video-container class
• Base icons: search, menu, calendar, caret, close are as the icon font.
• Alerts and Messages plugins merged to Messages

Details

Breakpoints

Variables changes

• $breakpoint-small = $sm (small devices like phones, phablets)
• $breakpoint-medium = $md (medium devices like iPad)
• $breakpoint-large = $lg (large devices like desltops)

Added mixins

@include breakpint(sm) { … }
@include breakpint(md) { … }
@include breakpint(lg) { … }

Colors

Deprecated variables

• $color-default
• $color-primary

Variables changes

• $color-primary = $color-focus

Added variables

• $color-text
• $color-headings
• $color-button-primary
• $color-button-primary-text
• $color-button-secondary
• $color-button-secondary-text
• $color-focus
• $color-inverted
• $color-highlight
• $color-black
• $color-darkgray
• $color-midgray
• $color-gray
• $color-lightgray
• $color-silver
• $color-aluminum

Added classes

• All classes for each the color variable see colors.scss

Sizing

• All-new classes for elements width, max-width, min-width and height see sizing.scss

Buttons

• All buttons are primary by default without .primary class

Grid

Changes

• The grid are without gutters by default, add .gutters class to make a space between columns.
• Grid columns got a positioning change (such centering/alignment) based on the new Positioning component
• Fixed Width Column got the new syntax

Positioning

• All-new classes for elements and grid columns to make: push and align for elements inside a flex container.

Forms

• Added the new syntax for append & prepend elements.

Mixins

• All flex mixins got new name.
• Added the breakpoint mixin
• Added font mixins
• New text-font, headings-font, buttons-font, inputs-font mixins

Utils

• All-new base icons: search, menu, calendar, caret, close.
• All text modifiers moved to Typography component

JS Plugins

• All-new base structure with OOP-style