Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Sparkle CSS Framework

A highly customizable utility-based CSS Framework

From your friends at Sparkbox.

Spin Up the Sparkle Styleguide in a Browser

  1. From the root, run npm install to install project dependencies.
  2. Run npm run docs to create the styleguide directory
  3. Navigate to the directory cd styleguide
  4. Run python -m SimpleHTTPServer 3000 to spin up the project locally
  5. Navigate to localhost:3000 in your browser

Creating a Sparkle Sub-System

  • Default Sass Map with at least three example values.
  • A function to access the map.
  • A value added to the settings map to enable/disable the utility classes.
  • Utility classes that meet this criteria:
    • A check for if the utility class is enabled/disabled.
    • Utility classes should be written to accept a namepspace.
    • Utility classes should be written to loop through all of the values in the map.
    • Loop includes media query prefixes for the class to be called at certain breakpoints.
  • Write test to check the function and class names.
  • Write documentation that can be configurable to the settings.


  • Visually-hidden
  • Unbuttonize
  • Delist
  • Delink
  • Loop-mq
  • Antialiased
  • Clearfix


  • Map Getters (A system map retriever)
  • Strip-Unit
  • Negative
  • Ratio
  • Stringify
  • Remify


  • Spacing
    • Padding
    • Margin
    • Position
  • Color
    • Foreground
    • Background
    • Border
  • Grid
  • Font
    • Family
    • Size
    • Weight
  • Border
  • Order
  • Z-Index
  • Breakpoints and Print


  • Display
  • Flex
  • Text Alignment
  • Position
  • Font Style
  • Grid
Sass Documentation
File structure
Sparkle Settings