LayoutAlignmentSpacingSizeTextBackgroundBorderEffect

Style your UI like a painter,
Not engineer!

Minimalism SASS-based style kit

Install

npm install bruss

@use it in your sass

  // All the variables
  $theme: (
    container-max-width: 640px,
    container-padding-x: 8vw,
    radius : 16px,
    colors: ( "white": #ffffff, "black": #1b1b1b, "ink": #555, "ink": #555, "primary": #FAE305 ),
    darken: 10%, lighten: 10%,
    texts: ( "1": 36px, "2": 24px, "3": 20px, "4": 17px, "5": 15px, "6":13px, "7":11px ),
    lineHeight: 1.5,
    sizes:  ( "24": 24px, "32": 32px, "36": 36px, "48": 48px, "54": 54px, "64": 64px ),
    spacings: ( "5": 5px, "10": 10px, "15": 15px, "20": 20px, "30": 30px, "50": 50px, "100": 100px ),
  );

  // use the kit
  @use 'bruss' with ( $theme : $theme );

Core Concept

Atomic class design

Flexible and intuitive, although there may be some side effects of style saturation (but the increased file size of the stylesheet is negligible).

Keep it in the style domain

Use stylesheets to solve styling problems directly, without involving frameworks, logic, or compilation processes (avoiding the complexities introduced by frameworks like Tailwind CSS).

80% is good!

We do not attempt to solve all styling needs. By focusing on the 80% of common styling requirements, we keep the cognitive load manageable. More customized styles can be easily added as needed.

Class References

Layout

.container

A wrapper with a maximum width of [$container-max-width] and horizontal padding of [$container-padding-x] when on mobile.

.flex-row

>.flex-*

>.flex-m-*

>.flex-none

>.flex-m-none

Defines flex-grow properties (* is 1-5)

.flex-row

&.flex-center

&.flex-vcenter

Defines a flex row container, centers its child elements both horizontally and vertically.

.grid .grid-cols-*

.grid-cols-m-*

Defines grid layouts with columns ( * is 2-6).

.gap-{spacing}

set gap between children in .flex-row or .grid.

Alignment

.inline

.block

Displays the element as an inline-block or block.

.fix-tl

.fix-tr

.fix-bl

.fix-br

Fixes the element to the top or bottom of its container.

.ab-tl

.ab-tr

.ab-bl

.ab-br

Positions the element absolutely at the top-left, top-right, bottom-left, or bottom-right corner of its container.

.fleft

.fright

Floats the element to the left or right.

.left

.right

.center

Set the text alignment of the element to left, right, or center.

Spacing

.m-{spacing}

.mt-{spacing}

.mb-{spacing}

.ml-{spacing}

.mr-{spacing}

.mx-{spacing}

.my-{spacing}

Set various margin properties.

.p-{spacing}

.pt-{spacing}

.pb-{spacing}

.pl-{spacing}

.pr-{spacing}

.px-{spacing}

.py-{spacing}

Set various padding properties.

Size

.w-{size}

.h-{size}

.wh-{size}

Set the width and height of the element to [size] units.

.w-full

.h-full

Set the width/height of the element to 100%.

.w-100

.h-100

Set the width/height of the element to 100vw/vh.

.w-min-100 .h-min-100

Set the minimum width/height of the element to 100vw/vh.

Text

.t-{text}

Set the font size.

.th-{text/size}

Set the line height.

.{color}

&.darken

&.lighten

Set the text color

.trim

.bold

.italic

.underline

.line-through

Various text style helpers.

.nowrap

.break-all

text wrap

Background

.bg-{color}

&.bg-darken

&.bg-lighten

Set the bg color

.bg-cover

.bg-none

Set the background to image cover mode, or to transparent

Border

.border-{color}

&.border-darken

&.border-lighten

Set borders with color

.border-t

.border-b

.border-l

.border-r

.border-dashed

Modify the border

.border-2

.border-3

.border-4

Modify the border width

Effect

.hide

.hide-mobile

.hide-desk

Hides the element on different devices.

.round

.round-t

.round-b

Set border radius.

.round-full

Make the element circular, only works when pairing with class `h-{size}` `wh-{size}`.

.tapable

Set pointer as cursor, opacity 60% when :active.

.flip

.crop

Various layout helpers.