https://github.com/sparkbox/sparkle

A highly customizable utility-based CSS Framework
https://github.com/sparkbox/sparkle

css css-framework grid-system hacktoberfest sass sass-library scss

Last synced: 2 days ago
JSON representation

A highly customizable utility-based CSS Framework

• Host: GitHub
• URL: https://github.com/sparkbox/sparkle
• Owner: sparkbox
• License: gpl-3.0
• Created: 2020-09-15T19:02:13.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-09-17T00:38:18.000Z (about 1 year ago)
• Last Synced: 2024-04-25T09:20:58.072Z (5 months ago)
• Topics: css, css-framework, grid-system, hacktoberfest, sass, sass-library, scss
• Language: SCSS
• Homepage: https://sparkbox.github.io/sparkle
• Size: 655 KB
• Stars: 8
• Watchers: 16
• Forks: 4
• Open Issues: 11
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
✨ Sparkle CSS Framework

=====================

**A highly customizable utility-based CSS Framework**

From your friends at [Sparkbox](https://seesparkbox.com).

## Spin Up the Sparkle Styleguide in a Browser

1. From the root, run `npm install` to install project dependencies.

1. Run `npm run docs` to create the styleguide directory

1. Navigate to the directory `cd styleguide`

1. Run `python -m SimpleHTTPServer 3000` to spin up the project locally

1. 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.

## Mixins

- Visually-hidden

- Unbuttonize

- Delist

- Delink

- Loop-mq

- Antialiased

- Clearfix

## Functions

- Map Getters (A system map retriever)

- Strip-Unit

- Negative

- Ratio

- Stringify

- Remify

## Systems

- Spacing

    - Padding

    - Margin

    - Position

- Color

    - Foreground

    - Background

    - Border

- Grid

- Font

    - Family

    - Size

    - Weight

- Border

- Order

- Z-Index

- Breakpoints and Print

## Utilities

- Display

- Flex

- Text Alignment

- Position

- Font Style

- Grid

| Sass Documentation                              |

|-------------------------------------------------|

| [File structure](docs.md#file-structure)        |

| [Sparkle Settings](docs.md#sparkle-settings)    |

| [Importing](docs.md#importing)                  |

| [Testing](docs.md#adding-sass-unit-tests)       |