Braunstetter/rock-systems-assets

Assets for the rock.systems ecosystem. Reuse it everywhere.

Assets for the rock.systems ecosystem

Make sure every bundle uses consistent assets.

• Installation
• CSS
  • Mixins
    • Utilities
      • svg
      • contains-svg
      • space
    • Components
      • Button
  • Variables
    • Import Variables

Installation

yarn add braunstetter/rock

CSS

We are using the postcss-mixins library.

Mixins

To use our mixins you have to enable it first.

// example configuration of postcss.config.js
const path = require("path");

module.exports = {
    plugins: [
        require('autoprefixer'),
        require('postcss-mixins')({
            mixinsFiles: path.join(__dirname, '/node_modules/@braunstetter/rock/js/mixins', '**/*.js')
        }),
        require('postcss-simple-vars'),
        require('postcss-import'),
        require('postcss-nested'),
        require('cssnano')({
            preset: 'default',
        }),
    ]
}

Afterward you will be able to use the mixins:

@mixin btn md;

Utilities

svg

Svg images are used quite often in modern UI components. So this utility mixin focuses on standardizing svg images.

svg {
    @mixin svg md;
}

Available sizes:

md
height: 1.25rem
width: 1.25rem

contains-svg

This utility mixin mirrors the svg mixin - but you don't have to put it inside a svg css-selector.

.my-container {
    @mixin contains-svg md;
}

space

This utility is controlling the space between child elements.

You can use all spacing variables:

/* 3 means it uses the $_3 variable */
@mixin space x, 3;

be aware - additionally, variables have to be imported before you can use them.

Components

Button

/* parameter: size, color */
@mixin btn md, primary;

Available sizes: md

Available colors: primary

If you are using this component without the color parameter, no styling will be applied except for the padding and spacing of the size parameter:

@mixin btn md;

Variables

We are using the postcss-simple-vars plugin.

Import variables

Before you can use the variables, you have to import them first into your css document:

/* all variables available */
@import "@braunstetter/rock/css/variables.css";

/* just a subset */
@import "@braunstetter/rock/css/variables/color.css";