Skip to content

Latest commit

 

History

History
executable file
·
164 lines (132 loc) · 3.05 KB

README.md

File metadata and controls

executable file
·
164 lines (132 loc) · 3.05 KB
Raw

LUX

Simply download it and import the files from your CSS library.

Download or clone the code.
git clone https://github.com/brandedux/lux.git

Palette

🎨 Palette is color & grayscale classes

Getting started

Import Palette:
Import palette.scss into your app.scss or primary file.
@import './palette';

Example Class:
Include the palette class in your markup.
class="palette"

Nest color, grayscale and alpha channel classes within the palette class.
class="bg-red txt-black alpha-50"

Nested classes should be used like:
<div class="palette">
<p class="bg-red txt-black alpha-50">Warning!</p>
</div>

1. Prefixes for background and text colors

  • bg = background color
  • txt = text color

2. Default color, tint and grayscale arrays

  • red
  • orange
  • yellow
  • green
  • blue
  • indigo
  • violet
  • ultraviolet
  • black
  • white
  • grayscale-90
  • grayscale-80
  • grayscale-70
  • grayscale-60
  • grayscale-50
  • grayscale-40
  • grayscale-30
  • grayscale-20
  • grayscale-10

3. Alpha channel array

  • alpha-90
  • alpha-80
  • alpha-70
  • alpha-60
  • alpha-50
  • alpha-40
  • alpha-30
  • alpha-20
  • alpha-10

Scribe

✍️ Scribe is text classes

Getting started

Import Scribe:
Import scribe.scss into your app.scss or primary file.
@import './scribe';

Example Class:
Include the scribe class in your markup.
class="scribe"

Nest size, weight and alternate classes within the scribe class.
class="txt-base txt-500 txt-italic"

Nested classes should be used like:
<div class="scribe">
<p class="txt-bigger txt-900">0 2 8 18 32</p>
</div>

1. Default text size uses Fibonacci scale

  • txt-smallest
  • txt-smaller
  • txt-small
  • txt-base
  • txt-big
  • txt-bigger
  • txt-biggest

2. Font-weight array

  • txt-100
  • txt-200
  • txt-300
  • txt-400
  • txt-500
  • txt-600
  • txt-700
  • txt-800
  • txt-900

3. Alternates

  • txt-bold
  • txt-bolder
  • txt-fixed-width
  • txt-italic
  • txt-caps
  • txt-small-caps
  • txt-sup
  • txt-sub

Smidge

👌Smidge is margin & padding classes

Getting started

Import Smidge:
Import smidge.scss into your app.scss or primary file.
@import './smidge';

Example Class:
Include the classes in your markup.
class="m-h-base"

1. Classificaiton for margin and padding

  • m = margin
  • p = padding

2. Side of box model including horizontal and vertical

  • h = horizontal
  • v = vertical
  • t = top
  • b = bottom
  • l = left
  • r = right

3. Size Suffixes

  • smaller
  • small
  • base
  • big
  • bigger

Copyright and License

Copyright (c) 2019, Jeff Davis.

LUX, Palette, Scribe, & Smidge source code is licensed under the MIT License.