Design System

Folder Structure

The project front end has the following folder structure. Besides folders, only important files are listed below.

  • config - configuration files for the project
    • fractal.config.js - configuration for the project's styleguide
    • general.config.js - general settings
    • tailwind.config.js - Tailwind configuration file with the design tokens
    • webpack.parts.js - webpack configuration file for individual tasks used in webpack.config.js
    • webpack.config.js - webpack main configuration file
  • src - all the code and related assets
    • components - the code (markup, CSS, JavaScript etc.) and related assets for the components
    • css - base styles not specific to components
      • cms - style adjustments for CMS control panel
      • core - styles for core aspects of the project (body tag, fonts, print, typography)
      • helpers - Sass mixins and utility classes
      • setup - custom reset styles and third party CSS imports
    • docs - documentation pages for the Guidelines section of this styleguide
    • favicon - favicon suite for the project
    • fonts - web fonts to be used on the project
    • img - images used in the project (logo and files for CSS inclusion; content images will be typically stored in CDN)
      • icons - SVG icons available in the project
    • js - JavaScript code
      • cms - additional functionality for CMS control panel
      • misc - various helper files
      • modules - scripts for functionality
      • app.js - collates all the functionality scripts
      • vendor.js - collates third-party JavaScript libraries
    • styleguide - styleguide related styling, templates and components
      • components
      • style-overrides - style overrides for the styleguide's default Mandelbrot theme
      • theme-overrides - template overrides for the styleguide's default Mandelbrot theme
    • main.js - collates all CSS, JavaScript and assets used by the project
    • main.scss - collates all CSS used in the project
    • styleguide.js - collates all CSS and JavaScript used in the project's styleguide
    • styleguide.scss - collates all CSS used in the project's styleguide
  • package.json - npm configuration file
  • README.md