What Are We Trying to Achieve?

Goldilocks-CSS attempts to find the sweet spot between having enough controls for most of your design needs and reducing bloat. Goldilocks-CSS achieves this by providing enough unique settings, items and modifiers to create almost any component or module. Layouts provide many ways to position and space your components. Key variables are provided to customize CSS parameters such as colour, padding, margins and more. Goldilocks-CSS tries not to provide too many controls that may never get used. The objective is reasonable flexibility at minimal "cost".

Key principles that have driven the development of Goldilocks-CSS include:

  • CSS3 standards compliant. No need for pre- or post-processors or extra bundling work.
  • Supports modern browsers only. No backward support for Internet Explorer!
  • File size is intended to be a small as possible. Even smaller when minified and compressed.
  • Expected to be THE single source of truth for styling HTML.
  • Focus is on providing and styling core elements.
  • Other elements and components can be added as needed.
  • Minimizes HTML tags required to construct components which reduces nodes required for rendering.
  • Comply with semantic HTML to ensure accessibility.
  • No bundled javascript code needed or included.
  • Components have a light treatment as it is expected that some Javascript will be employed to make these components reactive.

Directory Structure

Goldilocks-CSS is composed of core items that cover the basic needs of website building and common items that extend functionality and can be added as needed. For more involved websites, extra elements and components are available when needed. The items available in each category are grouped as elements or components.

  • Core Layout is a set of elements that support page structure. These include page layout using CSS grid, flexbox horizontal layout and other page structural support elements. All of these items are non-semantic as they do not directly control content.
  • Core Elements are the common basic structures such as typography control, buttons, forms, tables and image display. Elements have semantic meaning as they usually contain content / information for customer consumption.
  • Core Helpers provide common modifiers that can be applied to elements or components. These include colour choices, position controls and fixed heights and widths. These operate as state descriptors rather than presentation controllers.
  • Extended elements include common but more intricate structures such as avatars, badges, icons and more. Most of these elements have semantic meaning and so use appropriate HTML tags.
  • Extended components are more complex structures that include components that are more intricate such as accordions, breadcrumbs, cards and nav bar. Most of these elements have semantic meaning and so use appropriate HTML tags.
  • Extra elements include a library of parts such as progress bars, ribbons and tooltips. Most of these elements have semantic meaning and so use appropriate HTML tags.
  • Extra components include a library of parts such as block quote, carousel, popovers and more. Most of these elements have semantic meaning and so use appropriate HTML tags.