CCBC Logo

Overview

Fractal

Fractal is a tool to help you build and document web component libraries, and then integrate them into your projects.

Component (or pattern) libraries are a way of designing and building websites in a modular fashion, breaking up the UI into small, reusable chunks that can then later be assembled in a variety of ways to build anything from larger components right up to whole pages.

Fractal helps you assemble, preview and document website component libraries, and then integrate them into the CMS.

Libraries

  • Framework: Bootstrap 5.2
    • Bootstrap is the world’s most popular framework for building responsive, mobile-first sites.
  • Templating Language: Handlebars
    • Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.
  • CSS Extension Language: Sass
    • Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
  • Fonts: Adobe
    • The site’s primary font, Lato, and secondary font, Futura PT, are both Adobe Fonts
  • Icon Library: Font Awesome
    • Font Awesome is the web’s most popular icon set. More than 1600 icons to choose from.
  • Bundled with Webpack.
  • Additional node modules:
    • pxtorem, A plugin for PostCSS that generates rem units from pixel units.
    • vh-check, get reliable CSS vh sizes