Components

Capital Framework is divided into a series of components. These components can be used individually, but are designed to work together. For information on how to get started using Capital Framework, please read the Getting Started page.

cf-atomic-component npm

cf-atomic-component contains a micro framework for building Atomic Design components that utilize JavaScript.

cf-core npm

cf-core contains core styles for starting a Capital Framework project. It includes Normalize.css, variables, media query and utility mixins, class utilities, typography, and standard base styling.

cf-buttons npm

cf-buttons contains button styles including default, secondary, destructive, disabled, super, and compound buttons, button links, buttons with icons, and button groups.

cf-expandables npm

cf-expandables contains a flexible show/hide component.

cf-forms npm

cf-forms contains enhanced form styles including inputs, input states, and grouped form styles.

cf-grid npm

cf-grid contains a Less-based CSS3 grid system that encourages semantic HTML.

cf-icons npm

cf-icons contains a custom icon font and useful CSS styles for working with the icons.

cf-layout npm

cf-layout contains a set of HTML & CSS layout helpers, such as common layout patterns and dividers.

cf-notifications npm

cf-notifications contains a block-style notification box.

cf-pagination npm

cf-pagination contains basic pagination styling for working with multipage displays such as search results or blog archives.

cf-tables npm

cf-tables contains styles and helpers for working with tables.

cf-typography npm

cf-typography contains advanced typographic patterns, including lists, links, and headers.