@pragmatics/styles

Configurable sass library.

Zero css output by default

Summary

• Getting Started
• Testing
• Built With
• Contributing
• Versioning
• Authors
• License
• Acknowledgments

Getting started

Installation

yarn add @pragmatics/styles -D

Usage

Import the library

@import 'node_modules/@pragmatics/styles/index';

Configure

Override the default variables according to your needs.

declare variables in your project before importing @pragmatics/styles

Override default variables

Override breakpoints, colors, z-index and many more variables.

Refer to _global.scss for an overview off all !default variables.

Configuration map

By default @pragmatics/styles only outputs sass which does not render css (functions/mixins/variables).

Copy the default config below and tweak according to your needs.

// Default config
$config: (
  debug: false,
  output: (
    all: false,
    custom: $config-output-custom,
  ),
);

Cherry pick

Cherry pick partials by merging specific options using $config-output-custom: merge-map($config-output-custom, $your-map)

For example:

$my-config-output-custom: (
  utilities: (
    spacing: true,
  ),
);

$config-output-custom: map-merge($config-output-custom, $my-config-output-custom);

Opt-in

Use a specific partial by setting it's option value to true.

Opt-out

Set output:(all:false) and remove a specific partial by setting it's option value to false.

Output options

$config-output-custom: (
  generic: (
    normalize: null,
  ),
  elements: (
    animation: null,
    base: null,
    code: null,
    focus: null,
    interactive: null,
    list: null,
    table: null,
    typography: null,
  ),
  helpers: (
    focus: null,
    link: null,
    list: null,
    plain-text: null,
    screen-reader: null,
    typography: null,
  ),
  objects: (
    container: null,
  ),
  components: (
    offcanvas: null,
    snackbar: null,
  ),
  utilities: (
    spacing: null,
  ),
);

Testing

We use Jest and Sass for testing, run npm test to run all tests.

Built With

• Sass
• Webstorm - for development
• Github - for versioning and deployment
• Jest - for testing
• Contributor Covenant - for the Code of Conduct
• Creative Commons - to choose the license

Contributing

Please read CONTRIBUTING.md for details on our the process for submitting issues and pull requests to us. This repository has a code of conduct, we will remove things that do not respect it.

Versioning

We use SemVer for versioning. For the available versions, see the tags on this repository.

Authors

See the list of contributors who participated in this project.

License

This project is licensed under the ISC License.

Acknowledgements

The following guidelines, methodologies and architectures have been used as inspiration for this package:

• ITCSS
• Idiomatic CSS
• CSS guidelines
• Code Guide by @mdo
• Airbnb CSS / Sass Styleguide
• Google HTML/CSS Style guide
• CSS-Tricks - CSS Style Guides

Articles

• Hugo Giraudel Personal Awesome Sass List - Records of Hugo Giraudel's works on Sass.
• Cubic Bézier Representation in Sass
• Faster Sass builds with Webpack
• Transitioning to SCSS at Scale
• Sass Maps to UI Components
• Inverse trigonometric functions with Sass
• Stop Arguing So Much with Your Mixins
• Styling React Components in Sass
• A Sass !default use case
• Aesthetic Sass 3: Typography and Vertical Rhythm
• A Tale of CSS and Sass Precision
• Build a Style Guide Straight from Sass
• Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
• The 80-20 Approach to Sustainable SCSS
• Advanced Use of Sass Maps