FlexCore

FlexCore v1.0.0 Documentation

Looking for older documentation? Check here for the v0.1.0a docs.

FlexCore Configuration

FlexCore can be configured in many different ways due to the use of SASS files. FlexCore features three categories of SASS files - core, modules, and components. flexcore.min.css in the distribution provides all styles, while flexcore-base.min.css provides the core styles with container and flexlist modules. Check out the web configuration tool to customize a build of FlexCore.

Core files include the base and alignment files. These form the foundation of FlexCore with flex directions and general positioning styles as well as responsive styles like flex-smart.

Modules are optional extensions to core styles. These may not be needed in every use case and as such may be configured at will. Examples include the Container module, which add a Bootstrap-like container, and the Flexlist module which makes list creation easier.

FlexCore also provides optional components. These components intend to be similar to and slimmer than common Bootstrap components like buttons.

Flex Children

FlexCore includes a .flex CSS class that applies flex: 1 1 to any element. This is useful in conjunction with the flex-directions and other helpers described below.

Flex Directions

FlexCore includes all the flex directions, including row, column, and their reverse variants. These are specified with flex-row, flex-row-reverse, etc.

Each direction is the CSS flex-direction property combined with display: flex.

flex-row, flex-row-reverse

flex-row

flex-row-reverse

flex-column, flex-column-reverse

Responsive Flex

FlexCore provides a pre-built, responsive flex class called flex-smart and flex-smart-reverse. These two classes provide a responsive alternative to fixed flex directions and allow mobile-first experiences to be built with ease.

flex-smart behaves like flex-column on small screens, with a default breakpoint of 768 pixels. On larger screens, it transitions to behave like flex-row. flex-smart-reverse behaves like flex-column-reverse on small screens and like flex-row-reverse on larger screens.

Flex Alignment

FlexCore also provides alignment classes for use in conjunction with flex items. These include align and justify styles, which affect the align-items and justify-content CSS properties.

Flex Wrap

FlexCore Core provides a flex-wrap class which enables the wrapping of fixed-width elements.

Container Module

FlexCore Core includes a container and container-wide class. These behave similarly to Bootstrap containers and allow content to stay in the middle of the screen without flowing out too far from the center. The default container's max-width is 768 pixels, while the container-wide class adds another breakpoint at 992 pixels.

Flexlist Module

Flexlist is a module that allows building flexy lists quickly and easily without worrying about styling. Use it in conjunction with flex direction or flex-smart styles to add spacing between your flex items.

This is a group of items without flex-list.

This is a group of items with flex-list.

Navigation Module

Use nav-right and nav-left to create flexy split navbars.

Alternatively, use nav-spacer which achieves a slightly different effect on mobile.

Buttons Component

FlexCore buttons are similar to Bootstrap buttons, but only include 3 light styles - a primary button, the outline version, and a disabled variant. They work on both anchor and button elements.

Use these with btn, btn-outline, and btn-disabled respectively.

Cards Component

FlexCore cards are highly simplified components, meant simply as a visual wrapper for any content desired.