⚡️ Generate your own library

    In this short tutorial, you're going to create your own functional css library, using the naming conventions you choose.

    Check you're all set up

    preons -V
    

    Generate a stylesheet

    Generating a stylesheet is a combination of two steps:

    1. Creating a preons.yaml configuration file.

    2. Generating css from that configuration file.

    Just to show both steps at once, you're just going to downlooad the file and create the library.

    1. Create a preons.yaml

    Download https://unpkg.com/preons@0.3.37/config/preons.yaml.

    2. Generate the css

    preons stylesheet --input preons.yaml
    

    Notice how it generates unminified css of every rule defined in the preons.yaml. As one of the conventions that the Preons cli employs is not to output the files, to create a file, all you have to do is redirect the output.

    preons stylesheet --input preons.yaml > myfile.css
    

    You can see the other options by doing preons stylesheet -h

    Making changes

    The preons.yaml is organised into the following format:

    preons:
      baseline: # Baseline rule
    
      rules:
        # Object reusable rules
    
      properties:
        # Object of Css properties
    
      breakpoints:
        # Stylesheet breakpoints
    

    Properties

    Properties are where you define your css properties, eg. background-color and margin-left. You can only define a css property once otherwise the preons.yaml will not convert to css.

    It is defined in the following manner:

    preons:
      properties:
        height:
          class: h
          values:
            1: 1rem
            2: 2rem
    

    The class

    This is the prefix of the functional css class. The above config will create the following css rules:

    .h1 { 1rem; }
    .h1 { 2rem; }
    

    Rules

    These are reusable rules across multiple css properties.

    preons:
      theme-colors:
        1: 1rem
        2: 2rem
        3: 3rem
    

    Sometimes you find yourself typing the same rules over and over again. Whilst this cannot be completely avoided, you can reuse these rules across multiple properties:

    preons:
      rules:
        theme-colors:
          black: '#242027'
          white: '#fefeff'
          grey: '#7d778e'
          hotpink: '#ea2889'
    
      properties:
        background-color:
          class: bg-
          rule: theme-colors
    
        color:
          class:
          rule: theme-colors
    

    Baseline

    This, you can use to define the vertical rhythm of your site. You can reference the $baseline in either the values of reusable rules.

    preons:
      rules:
        # For font line-heights
        baselined:
          -2: $baseline * 0.5
          -1: $baseline * 1
          0: $baseline * 1.5
          1: $baseline * 2
          2: $baseline * 2.5
          3: $baseline * 3
          -large: 4rem
          4: $baseline * 4
          5: $baseline * 5
          6: $baseline * 6
          7: $baseline * 6.5
          8: $baseline * 7.5