🔺◼️ SHPCSS 🔺◼️

A simpler way to write SCSS.

• Rapidly develop DRY, modular and scalable stylesheets.
• Define a single 'source of truth' for all of your website's styles for easier maintainability
• Quickly generate element variants - perfect for BEMs and theming
• Ensures that your codebase is DRY and organised
• Change an element's properties with one line
• Decouple styles from selectors
• Little to no need to manually write CSS
• Includes a bunch of useful mixins for alignment, positioning etc (WIP)
• No duplicate CSS properties

IMPORTANT: This project is currently just a CONCEPT and is not ready for production. Suggestions and contributions welcomed!

SHPCSS hopes to simplify and speed up the creation of stylesheets by taking every web component and abstracting it to its simplest form. The idea is that every DOM node shares common properties, for example; almost everything has a size (width, height, padding etc) and colour (background, border, text etc). SHPCSS has broken these common properties into two core concepts: swatches & shapes.

Simple usage

Define a map containing swatches:

$swatches: (
  'a': (
    border: solid 2px darken($secondary, 5%),
    color: $secondary,
    text-transform: uppercase,
    font-weight: bold,
    'hover': (
      color: $ui-a,
      background-color: $secondary,
    )
  ),
);

Include the main class() mixin:

@include class(
  $selector: '.swatch',
  $shape: 'block',
  $base: (
    'width': auto,
    'custom': (
      padding: 1rem 1.5rem
    )
  ),
  $variants: (
    '--a': (
      'interactive': true,
      'swatch': map-get($swatches, 'a')
    )
  )
);

SHPCSS will output:

.swatch {
  position: relative;
  background: none;
  border: none;
  box-sizing: border-box;
  width: auto;
  padding: 1rem 1.5rem;
}
.swatch--a {
  border: solid 2px #2912ad;
  color: #2e14c4;
  text-transform: uppercase;
  font-weight: bold;
}
.swatch--a:hover {
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #2e14c4;
}

About

Every time you define a new class, it's likely that you're going to give that class some baseline properties, such as display, position, width, height etc, why not be able to just specify that it's a block? I have created these mixins so you can simply create a new block or square or circle and the rest is generated for you. The shapes contain predefined values that you can leave as default or override. For example, buttons, inputs, containers and list items are all conceptually blocks, so just define them as such let SHPCSS handle the build.

Once you've done this, you'll want to apply a swatch. You've defined your checkboxes as squares, radios as circles and your main container as a block, but you recognise that actually they are all stylistically similar and despite being different shapes, they can still share the same swatch which may comprise of a white background, some padding and a grey 1px border. Simply apply that swatch and you're done.

Once you've broken your website into swatches, you can pick and choose as you like and easily and quickly mix and match by changing very little code. You can also quickly generate interactivity, pseudo elements, variants (great for use with BEMs or similar conventions), aligned elements and much more!

Current features

• Class generator
• Variant generator
• Square
• Block
• Interactive swatches
• Pseudo elements
• Built in check to ensure output contains no duplicate properties

To do

• Circle
• Triangle
• More inbuilt functions/mixins
• Better documentation
• A proper demo!

Requirements

• Sass

Installation

npm install shpcss

Include the library into your main SCSS project: @import 'shpcss';

Usage

SHPCSS utilises a main mixin, @include class() and maps containing your swatches. The class() mixin takes the following arguments:

Arg	Optional	Type	Description	Value
$selector	false	String	Your desired core selector	.selector, #id, tag
$shape	false	String	The shape	block, square
$reset	false	String	Apply a reset/normalise to this element	body, list
$base	true	Object	A map containing base properties	See below
$variants	true	Object	A map containing variant properties	See below
$pseudo	true	Object	A map containing pseudo (::before and ::after) element properties	null

Base map

The properties you pass in your base map will vary depending on the shape but there are some shared properties you can use

Shared properties

These properties can be used for all shapes

Property	Optional	Type	Description	Value
swatch	true	Object	Apply a swatch to the current element	map with swatch styles e.g map-get($swatches, 'swatch-a')
align	true	String	Align the current element	center, center-x, center-y
children	true	String	Align the current element's children	center, center-x, or a flex value e.g space-between

Square properties

If you're using a square:

Property	Optional	Type	Description	Value
size	true	Number	Your desired square size	value and unit e.g 10px, 2rem

Block properties

If you're using a block:

Property	Optional	Type	Description	Value
width	true	Number	Your desired block width	e.g 100%, auto
height	true	Number	Your desired block height	value and unit e.g 10px, 2rem