Preons 🛰

A functional CSS system for building user interfaces 🛰

Documentation | CLI | Reference

🔬Currently Under Development

This repo is subject to lots of changes as it's in prime experimental mode. See going from 0.0.0 to 1.0.0.

🚀 Documentation

Get started here.

💠 Themes

Coming soon

💻 CLI

Learn more here.

🗒 Configuration

Example preons.yaml.

Read the docs here.

Preonize Function

The preonize function is currently an scss function. It allows Preons to generate lots of rules at multiple breakpoints without having to hardcode each CSS class.

It has 4 parameters.

@include preonize(
  <class name>,       # The prefix name of the class eg. 'h' for height
  <css property>,     # The css property assigned to the class 'height'
  <sass map rules>,   # Sass map of rules eg. (1: 1rem, 2: 2rem)
  <breakpoints>       # Breakpoints
);

Thus, we can reuse different sass-maps for several rules. Here's an example use:

@include preonize(
    "h",
    width,
    map-collection(scaled, percentaged, discrete, special-sizes),
    $breakpoints
);

📚 Reference

Look up the reference here or peruse them below.

🗺️ Roadmap

Read the roadmap here.

⛓ Versioning

This project uses SemVer for versioning and Intuit's Auto to generate releases on the fly. For the versions available, see the tags on this repository.

🙌 Thank yous

• Intuit's Auto for making releases easier
• Adam Moore & Tachyons for creating their wonderful library

Contributing

Thank you for your desire to contribute. All you have to do is create a PR. Note the following conventions:

• This project uses Angular commit conventions. As it's in version experimental, prefix your commits with fix: .

🔖 Licence

You are free to modify and do as you choose to this library however, it uses GPLv2.1 to keep it free for all into the future. Of course, you can commercialize your product where this library is part of a larger piece of work and is merely a dependency.

Here's a really helpful video explanation of GPL licences in general.

https://www.youtube.com/watch?v=JlIrSMzF8T4

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!