Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/the-holocron/starkiller

A set of single-purpose, responsive and functional utilities for writing (S)CSS
https://github.com/the-holocron/starkiller
css css-framework css-properties extreme-css reset scss
Last synced: 1 day ago
JSON representation
A set of single-purpose, responsive and functional utilities for writing (S)CSS
Host: GitHub
URL: https://github.com/the-holocron/starkiller
Owner: the-holocron
License: gpl-3.0
Created: 2020-04-12T22:39:49.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2020-11-06T04:50:08.000Z (about 4 years ago)
Last Synced: 2024-12-21T21:47:20.934Z (about 1 month ago)
Topics: css, css-framework, css-properties, extreme-css, reset, scss
Language: SCSS
Homepage:
Size: 671 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project

README

        # Starkiller [![npm](https://img.shields.io/npm/v/@theholocron/starkiller)](https://www.npmjs.com/package/@theholocron/starkiller)

This utility droid provides a set of single-purpose, responsive and functional utilities for writing CSS within the Galaxy.

These mixins were designed to map a CSS property and value to a class name and then add `!important` to ensure they override all specificity.  Every mixin written is meant to be responsive against a set of breakpoints that are provided.  However those breakpoints can be overridden by passing in your own configuration.

## Installation

```shell

$ npm install --save-dev @theholocron/starkiller

```

## Table of Contents

* [Usage](#usage)

* [Documentation](#where-to-find-documentation)

* [Change Log](#how-we-track-changes)

* [Versioning](#how-we-version)

* [Contribution](#how-to-contribute)

* [Tools](#tools-we-use)

* [Support](#where-to-find-suport)

* [License](#license)

## Usage

There are a few things that are provided with this library. At its core, this is a (S)CSS mixin library using [`dart-sass` modules](https://sass-lang.com/blog/the-module-system-is-launched).  By default, mixins are available in a namespace based on the basename of the URL, so check out below for ways to import.  Each of these will produce a CSS class that can then be used within your HTML.

```scss

// _index.scss

// include all utilities with 'starkiller' as the namespace

// calls all mixins and will include in CSS output

@use "./node_modules/@theholocron/starkiller/src" as starkiller;

// use all utilities with a different set of breakpoints

// calls all mixins and will include in CSS output

@use "./node_modules/@theholocron/starkiller/src" as starkiller with (

    $breakpoints: (

        "xs": "0",

        "sm": "480px",

        "md": "768px",

        "lg": "1024px",

        "xl": "1280px",

    )

);

// include only a specific group of mixins

@use "@theholocron/starkiller/src/display" as *;

// call the mixins from this group

@include display();

@include visibility();

// use only a specific mixin

@use "@theholocron/starkiller/src/display/visibility";

// call the mixin you want to use

@include visibility();

// call the mixin you want, but override this breakpoints

@include visibility(

    $breakpoints: (

        "xs": "0",

        "sm": "480px",

        "md": "768px",

        "lg": "1024px",

        "xl": "1280px",

    )

);

```

_The previous examples are only a sample of what utilities are available._

If you only want the CSS, there are several configurations you can choose. The following uses [unpkg](https://unpkg.com/) as a CDN, so all of the rules apply to retrieving a specific version or file.  But also provided in the `dist` directory are a set of compiled CSS files in both compressed and non-compressed forms.  The entire library is provided as well as each directories as described below.

* The `[@]` is an optional field that allows you to pick a specific version, or if you omit it will grab the latest tagged version.

* The `[min]` is optional as well, but highly recommended if you're going to call the CSS file directly in your HTML, as its minified.

* The `` is a required field that allows one to pick a specific group to include or include the entire set. The following are allowed types:

  * `starkiller` - the entire collection

  * `animations` - only include animations

  * `backgrounds-borders` - only include backgrounds and borders

  * `basic-user-interface` - only include basic user interface

  * `box-alignment` - only include box alignment

  * `box-model` - only include box model

  * `color` - only include color

  * `display` - only include display

  * `flexible-box-layout` - only include flexible box layout

  * `fonts` - only include fonts

  * `fragmentation` - only include fragmentation

  * `images` - only include images

  * `miscellaneous` - only include miscellaneous

  * `overflow` - only include overflow

  * `pointer-events` - only include pointer events

  * `positioning` - only include positioning

  * `scroll-snap` - only include scroll snap

  * `scrollbar` - only include scrollbar

  * `table` - only include table

  * `text-decoration` - only include text decoration

  * `text` - only include text

  * `transforms` - only include animations

  * `transitions` - only include transitions

  * `writing-modes` - only include writing modes

```html

```

Once you've determined how you're going to include the files, then copy the code below, swapping out the `` for one of the ones in a collection listed above (check each README for a list of the actual properties). By default the `` is not responsive, but if you add any one of the keywords (`xs`, `sm`, `md`, `lg`, `xl`) preceded with a dash `-` and combine it with `-up` for sizes at that break point and up, or `-down` for sizes at that breakpoint and down, or `-only` for the range between that particularly break point, you can make it responsive.

```html

Text

```

## Where to Find Documentation

The best way to find out what's available is to check out the [source code](./src/) or [test](./test/) but you can also take a look at [the-holocron.github.io/starkiller](http://the-holocron.github.io/starkiller/) or the [README](./src/README.md) which have been generated by [SassDoc](http://sassdoc.com) and [`sassdoc-to-markdown`](https://github.com/hidoo/unit-sass/blob/master/packages/sassdoc-to-markdown).

* [**Animations**](./src/animations/README.md) - [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations) is a module of CSS that lets you animate the values of CSS properties over time, using keyframes.

* [**Backgrounds & Borders**](./src/backgrounds-borders/README.md) - [Backgrounds and Borders](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders) is a module of CSS that allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways

* [**Basic User Interface**](./src/basic-user-interface/README.md) - [Basic User Interface](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface) is a CSS module that lets you define the rendering and functionality of features related to the user interface.

* [**Box Alignment**](./src/box-alignment/README.md) - [Box Alignment](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment) is a module of CSS features that relate to the alignment of boxes in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.

* [**Box Model**](./src/box-model/README.md) - [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model) is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and arranged according to the visual formatting model.

* [**Color**](./src/color/README.md) - [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Color) is a CSS module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to HTML content.

* [**Display**](./src/display/README.md) - [Display](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Display) is a module of CSS that defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

* [**Flexible Box Layout**](./src/flexible-box-layout/README.md) - [Flexible Box Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension.

* [**Fonts**](./src/fonts/README.md) - [Fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts) is a module of CSS that defines font-related properties and how font resources are loaded.

* [**Fragmentation**](./src/fragmentation/README.md) - [Fragmentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fragmentation) is a module of CSS that defines how content is displayed when it is broken (fragmented) across multiple pages, regions, or columns.

* [**Images**](./src/images/README.md) - [Images](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images) is a module of CSS that defines what types of images can be used (the `` type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

* [**Miscellaneous**](./src/miscellaneous/README.md) - [Miscellaneous](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Miscellaneous) are CSS properties that are highly experimental or don't fit in any other categories.

* [**Overflow**](./src/overflow/README.md) - [Overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Overflow) is a CSS module that contains the features of CSS relating to scrollable overflow handling in visual media

* [**Pointer Events**](./src/pointer-events/README.md) - [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) is a CSS module that sets under what circumstances (if any) a particular graphic element can become the target of pointer events

* [**Positioning**](./src/positioning/README.md) - [Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning) is a module of CSS that defines how to position elements on the page.

* [**Scroll Snap**](./src/scroll-snap/README.md) - [Scroll Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.

* [**Scrollbar**](./src/scrollbar/README.md) - [Scrollbars](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars) is an experimental module of CSS.

* [**Table**](./src/table/README.md) - [Table](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Table) is a CSS module that defines how to lay out table data.

* [**Text Decoration**](./src/text-decoration/README.md) - [Text Decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text_Decoration) is a module of CSS that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks.

* [**Text**](./src/text/README.md) - [Text](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text) is a module of CSS that defines how to perform text manipulation, like line breaking, justification and alignment, white-space handling, and text transformation.

* [**Transforms**](./src/transforms/README.md) - [Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms) is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

* [**Transitions**](./src/transitions/README.md) - [Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions) is a module of CSS that lets you create gradual transitions between the values of specific CSS properties.

## How We Track Changes [![Keep a Changelog](https://img.shields.io/badge/Keep%20a%20Changelog-1.0.0-orange)](https://keepachangelog.com/en/1.0.0/)

This project uses a CHANGELOG and [GitHub releases](https://help.github.com/en/github/administering-a-repository/about-releases) which contains a curated, chronologically ordered list of notable changes for each version of a project. [Read more about changelogs](https://keepachangelog.com/en/1.0.0/).

## How We Version [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

We use [SemVer](https://semver.org/) for its versioning providing us an opt-in approach to releases. This means we add a version number according to the spec, as you see below. So rather than force developers to consume the latest and greatest, they can choose which version to consume and test any newer ones before upgrading. Please the read the spec as it goes into further detail.

Given a version number **MAJOR.MINOR.PATCH**, increment the:

- **MAJOR** version when you make incompatible API changes.

- **MINOR** version when you add functionality in a backward-compatible manner.

- **PATCH** version when you make backward-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the **MAJOR.MINOR.PATCH** format.

## How to Contribute [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

Have a bug or a feature request? Looking to contribute to advance the project? Read our [contribution guide](./github/CONTRIBUTING.md) or [maintenance guide](./.github/MAINTAINING.md) first in order to understand how we do things around here. Or you could look at some of our other guides below:

  How do I… (click to expand)

- [Ask or Say Something?](./.github/SUPPORT.md)

    - [Request Support](./.github/SUPPORT.md#request-support)

    - [Report an Error or Bug](./.github/SUPPORT.md#report-an-error-or-bug)

    - [Request a Feature](./.github/SUPPORT.md#request-a-feature)

- [Make Something?](./.github/CONTRIBUTING.md)

    - [Setup the Project](./.github/CONTRIBUTING.md#get-started)

    - [Create an Issue](./.github/CONTRIBUTING.md#creating-a-good-issue)

    - [Create a Feature Request](./.github/CONTRIBUTING.md#create-a-good-feature-request)

    - [Contribute Documentation](./.github/CONTRIBUTING.md#contribute-to-documentation)

    - [Contribute Code](./.github/CONTRIBUTING.md#create-a-pull-request)

    - [Join the Team](./.github/CONTRIBUTING.md#join-the-team)

- [Manage Something](./.github/MAINTAINING.md)

    - [Provide Support on Issues](./.github/MAINTAINING.md#provide-support-on-issues)

    - [Label Issues](./.github/MAINTAINING.md#label-issues)

    - [Clean Up Issues and PRs](./.github/MAINTAINING.md#clean-up-issues-and-prs)

    - [Create a Pull Request](./.github/MAINTAINING.md#create-a-pull-request)

    - [Review Pull Requests](./.github/MAINTAINING.md#review-pull-requests)

    - [Merge Pull Requests](./.github/MAINTAINING.md#merge-pull-requests)

    - [Tag a Release](./.github/MAINTAINING.md#tag-a-release)

    - [Release a Version](./.github/MAINTAINING.md#release-a-version)

## Where to Find Support [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](code_of_conduct.md)

Looking to talk to someone or need some help? Please read our [support guidelines](./.github/SUPPORT.md).

## Tools We Use

- [Browserslist](https://github.com/browserslist/browserslist) - Used to share to our code which browsers we support

- [CommitLint](https://commitlint.js.org/#/) - Used to ensure our commits follow our standards

- [Dart Sass](https://sass-lang.com/dart-sass) - Used to compile (S)CSS

- [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog) - Used to generate our CHANGELOG

- [Husky](https://github.com/typicode/husky) - Used for auto-fixing linting errors on each commit

- [MarkdownLint](https://github.com/DavidAnson/markdownlint) - Used to lint our Markdown docs

- [PostCSS](https://postcss.org/) - Used to compile (S)CSS

- [Semantic Release](https://semantic-release.gitbook.io/semantic-release/) - Used for automating and releasing our library

- [StyleLint](https://stylelint.io/) - Used to lint our (S)CSS

- [True](https://www.oddbird.net/true/docs/) - Used to test our (S)CSS mixins and functions

- [@godban's Browser Support Badges](https://godban.github.io/browsers-support-badges) - The tool used to generate the "Which Browsers [sic] We Support" section

## References

- [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) - For how we format commit messages

- [Contributor Convenant](https://www.contributor-covenant.org)

- [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - For building out a quality CHANGELOG

- [Make a README](https://www.makeareadme.com/) - For building out this README

- [SemVer](https://semver.org/) - For versioning this library

## License [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)

©2020 GNU General Public License v3. See [LICENSE](./LICENSE.md) for specifics.