Bourbon
Bourbon is a SASS mixin library that makes writing CSS faster and easier. The biggest benefits are mixins that take care of vendor prefixing and tint/shade functions for adjusting color. Bourbon also forms the foundation for Neat (see below).
// Example: Calculate a tinted color
.red {
color: #F00;
}
.red--tint {
color: tint( #F00, 20% );
}
// Example: Implement flex-box with mixins.
.flex {
@include display(flex);
@include justify-content(space-between);
}
.flex__item {
@include align-self(flex-start);
}
.flex__item--last {
@include align-self(flex-end);
}
There’s tons more. See the Bourbon docs for more info »
Neat
Neat is a SASS grid framework. CGU Core uses it primarily to build its grid utility classes. There are some block components that use it as well.
// Example: Build content columns using the span-columns() mixin.
// The $grid-columns variable defines the total number of grid
// columns. Neat's default is 8 but we overwrite it to be 12.
// Our $grid-columns variable is found in _variables.scss
.block {
@include clearfix;
}
.block__item {
@include span-columns(6); // item spans 6 columns, so 2 items per row
@include omega(2n); // every 2nd item is last child in a row
@include media(900px) { // @media screen and (min-width: 900px)
@include omega-reset(2n); // resets last child
@include span-columns(4); // item spans 4 columns, so 3 items per row
@include omega(3n); // every 3rd item is last child in a row
}
}
See what else is possible: Read the Neat docs for more info »
Slick
Slick is a javascript plugin to create carousels. It’s highly customizable and used in a number of different configurations. The baseline stylesheet, slick.scss is included in the root directory of CGU Core. For more information on implementing Slick, see the Carousels documentation.
Read more on the Slick Docks »