Build Better with FlexCore
FlexCore is the next-gen CSS/SASS library for light web layouts. FlexCore features responsiveness built-in, but leaves room for custom components to be added.
Hyperlight
FlexCore is less than 1KB gzipped, or about 35 times smaller than Bootstrap 4.
Extensible
FlexCore is configured with SASS modules organized into clear categories. Take only what you need and nothing more.
Outline
FlexCore Core Container Flex Children Flex Directions Responsive Flex Flex Alignment Flex WrapFlexCore Full Buttons Module Flexlist Module Navigation Module
FlexCore v0.1.0a Documentation
FlexCore Core
FlexCore Core is the minimum, responsive, layouting shim of FlexCore. FlexCore Core features the base flex styles, alignment modifiers, and a Bootstrap-like container component to let you start building web layouts quickly and efficiently.
FlexCore also includes other modules and components, including classes to help build lists, navigation, and more, which are included in FlexCore Full. Alternatively, compile a custom shim of FlexCore with the desired modules with the SASS source files.
Container
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.
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
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.
A fixed-width card
A fixed-width card
A fixed-width card
A fixed-width card
FlexCore Full
FlexCore can also be configured with additional modules. A slim, Bootstrap-like button module is available, in addition to the flexlist module which integrates with flex directions to allow building flex lists quickly. These modules are SASS-based and can be easily excluded or included in a custom shim of FlexCore. By default, FlexCore Full includes all core styles and all modules.
Buttons Module
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.
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
Navigation is currently broken when wrapping on smaller sizes.
Use nav-right and nav-left to create flexy split navbars.