GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects โ†’ grabr โ†’ quantum-css

grabr / quantum-css

Licence: MIT License
Atomic CSS library written in SCSS.

Programming Languages

CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Labels

cssatomicscssatomic-css

Projects that are alternatives of or similar to quantum-css

ekzo
๐Ÿ’ซ Functional Sass framework for rapid and painless development
Stars: โœญ 32 (+18.52%)
Mutual labels:  atomic, atomic-css
tachyons-cheatsheet
Interactive cheat sheet for Tachyons ๐Ÿ“
Stars: โœญ 52 (+92.59%)
Mutual labels:  atomic-css
svbstrate
A functional/atomic/utility css library.
Stars: โœญ 51 (+88.89%)
Mutual labels:  atomic-css
mulle-thread
๐Ÿ” ย Cross-platform thread/mutex/tss/atomic operations in C
Stars: โœญ 22 (-18.52%)
Mutual labels:  atomic
practice
Javaๅนถๅ‘็ผ–็จ‹ไธŽ้ซ˜ๅนถๅ‘่งฃๅ†ณๆ–นๆกˆ๏ผšhttp://coding.imooc.com/class/195.html Javaๅผ€ๅ‘ไผไธš็บงๆƒ้™็ฎก็†็ณป็ปŸ๏ผšhttp://coding.imooc.com/class/149.html
Stars: โœญ 39 (+44.44%)
Mutual labels:  atomic
uniformcss
A fully configurable utility class generator and CSS framework built for Sass projects.
Stars: โœญ 133 (+392.59%)
Mutual labels:  atomic-css
build-atomic-host
Ansible Playbook to automate building own Atomic Host with Customized Packages
Stars: โœญ 15 (-44.44%)
Mutual labels:  atomic
atomize
A library of atomic CSS classes.
Stars: โœญ 51 (+88.89%)
Mutual labels:  atomic-css
ethereum-dex
Decentralized exchange implementation for the 0xcert protocol on the Ethereum blockchain.
Stars: โœญ 18 (-33.33%)
Mutual labels:  atomic
steller-css
โ›ฐ๏ธ A utility-first CSS framework that serves as the foundation of your design system
Stars: โœญ 14 (-48.15%)
Mutual labels:  atomic-css
adorable-css
Rapid On-Demand Atomic CSS Framework
Stars: โœญ 131 (+385.19%)
Mutual labels:  atomic-css
triton
Triton Operating System
Stars: โœญ 56 (+107.41%)
Mutual labels:  atomic
hydrogencss
Atomic CSS for CSS Modules
Stars: โœญ 13 (-51.85%)
Mutual labels:  atomic-css
unocss
The instant on-demand atomic CSS engine.
Stars: โœญ 7,866 (+29033.33%)
Mutual labels:  atomic-css
swapperd
Swapperd daemon for executing cross-chain swaps
Stars: โœญ 27 (+0%)
Mutual labels:  atomic
stylemug
CSS in JS with support for static / atomic CSS extraction.
Stars: โœญ 55 (+103.7%)
Mutual labels:  atomic-css
atomic-bohr-model
A d3 powered customizable and animated atomic bohr model
Stars: โœญ 27 (+0%)
Mutual labels:  atomic
AtomicKit
Concurrency made simple in Swift.
Stars: โœญ 88 (+225.93%)
Mutual labels:  atomic
angular-atomic-app
Angular 5 app built on atomic web design principles
Stars: โœญ 12 (-55.56%)
Mutual labels:  atomic
atomix
Simple and easy wrappers for Go sync/atomic package.
Stars: โœญ 26 (-3.7%)
Mutual labels:  atomic
View All Similar Projects โž”

Quantum CSS

npm version travis ci status

โ€œEverything should be made as simple as possible, but no simpler.โ€ โ€“ Albert Einstein 1

Preface

Quantum CSS is an atomic CSS library written in SCSS.

You wonโ€™t need to write any CSS rules and media queries while using Quantum CSS. Creating highly responsive UIs becomes pleasure while extension pattern provides means of controlled customization. You can create molecules with avaialble atoms using @extend.

Here is a sample button component with rounded corners, hover and focus transition animations (which are disabled on small screens to provide better experience on touch devices):

<button class="btn btn-fb" type="button">
  <!-- Content -->
</button>
.btn {
  @extend .px15, .h40; // Size
  @extend .bds-s, .bdw1, .bdr5; // Border style solid, border width 1px and rounded corners
  @extend .trp-c, .trd200ms; // Color transitions

  &-fb  { @extend .bgc-fb, .c-w, .bdc-tt, .SM_bgc-dfb-hf } // Facebook
  &-tw  { @extend .bgc-tw, .c-w, .bdc-tt, .SM_bgc-dtw-hf } // Twitter
}

Benefits of using @extend approach:

  • Highly standardized styles. Limited amount of building blocks allows you to have more order in your design.

  • Stylesheet compilation time errors. Build fails if unknown atoms are used.

  • Easy to remember class names. Atoms naming convention was heavily inspired by Emmet, and most of the time abbreviations are first letters of words that property or value names consist of.

Contents

  1. Naming Conventions

  1. Breakpoints

  2. Pseudo-classes and Pseudo-elements

  3. Grid System

  1. Atom Index
  1. License

Naming Conventions

In Quantum CSS every class name consists of four parts in given order:

  1. Optional breakpoint name: SM, MD etc.
  2. Property abbreviation: bdtc, ws etc.
  3. Value abbreviation: w, 100p, 360d etc.
  4. Optional pseudo-class or pseudo-element modifier: hf, h etc.

You can configure separators between each parts of class name with following variables:

  • $breakpoint-sep define separator between breakpoint name and property abbreviation.

  • $literal-sep and $ordinal-sep define separators that are inserted between property name and literal value abbreviation or ordinal one respectively.

  • $pseudo-sep defines separator between pseudo modifier from value abbreviation.

Value Aliases

Aliases for commonly used values:

  • p โ†’ %
  • e โ†’ em
  • x โ†’ ex
  • r โ†’ rem
  • d โ†’ deg
  • t โ†’ turn

These aliases are used instead of full units:

  • w100p โ†’ width: 100%
  • SM_mah42 โ†’ @media (min-width: 576px) { max-height: 42px }

Color Values

Names for colors are used fo increase readability. By default, Tango palette is used for every color-related atom. You can specify your own palette overriding variables in _variables.scss.

Greyscale Value
  1. White w | #fff
  2. Grey 15% g1 | #eeeeec
  3. Grey 30% g2 | #d3d7cf
  4. Grey 45% g3 | #babdb6
  5. Grey 60% g4 | #888a85
  6. Grey 75% g5 | #555753
  7. Grey 90% g6 | #2e3436
  8. Black b | #000
Color Light l Medium Dark d
  1. Yellow y | #fce94f | #edd400 | #c4a000
  2. Orange o | #fcaf3e | #f57900 | #ce5c00
  3. Chocolate c | #e9b96e | #c17d11 | #8f5902
  4. Green g | #8ae234 | #73d216 | #4e9a06
  5. Navy n | #729fcf | #3465a4 | #204a87
  6. Purple p | #ad7f8a | #75507b | #5c3566
  7. Red r | #ef2929 | #cc0000 | #a40000

CSS-literal colors:

  • cc โ†’ currentColor
  • t โ†’ transparent
  • i โ†’ inherit

Generated atom examples:

  • SM_bgc-dg โ†’ background-color: #4e9a06 Dark green
  • bdrc-w โ†’ border-right-color: white
  • LG_c-b โ†’ color: black

Unit-less Properties

Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted:

  • lh1 โ†’ line-height: 1
  • fw400 โ†’ font-weight: 400
  • op37 โ†’ opacity: 0.37

Breakpoints

One of the most powerful features of Quantum is breakpoint-based media queries.

Pseudo-classes and Pseudo-elements

You can configure set of pseudo-classes and pseudo-elements for which atoms are generated via $pseudos. To emit disjunction of pseudos use comma-separated list.

$pseudos: (hf: (hover, focus));

.c-w-hf:hover,
.c-w-hf:focus {
  color: white;
}

Space-separated list defines selector conjunction:

$pseudos: (eh: empty hover);

.c-w-eh:empty:hover {
  color: white;
}

Combine those different list types for precise class targeting:

$pseudos: (foo: (active hover, active focus));

.c-w-foo:active:hover,
.c-w-foo:active:focus {
  color: white;
}

Grid System

Containers g

As well as in Bootstrap Containers are the most basic layout element and are required when using grid system. Use g-f to create a fixed-width centered responsive layout of columns.

While containers can be nested, most layouts do not require a nested container.

<div class="g g-f">
  <!-- Fixed-width grid conteiner -->
</div>

Widths of fixed-width container are stored in $grid-widths.

Rows gr

Rows are horizontal groups of columns that ensure your columns are lined up properly.

<div class="g g-f">
  <div class="gr">
    <!-- Place columns here -->
  </div>
</div>

Columns gc

Content should be placed within columns, and only columns may be immediate children of rows.

Column classes indicate the number of columns youโ€™d like to use out of the possible 12 per row. So if you want three equal-width columns, youโ€™d use SM_gc4. You can change number of columns in grid altering $grid-col-count.

Column widths are set in percentages, so theyโ€™re always fluid and sized relative to their parent element.

Columns have horizontal padding to create the gutters between individual columns. Gutters can be configured per every breakpoint via $grid-gutters.

<div class="g g-f">
  <div class="gr">
    <div class="gc12 SM_gc6">
      <!-- Place content here -->
    </div>
  </div>
</div>

Column Ordering

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls.

Move columns to the right using [breakpoint_]go(0โ€ฆ12/1) classes. These classes increase the left margin of a column by specified number of columns. For example, MD_go4 moved MD_gc4 over four columns.

Change the order of columns by relatively shifting them to the left with [breakpoint_]gsl(0โ€ฆ12/1) or to the right with [breakpoint_]gsr(0โ€ฆ12/1) classes.

<div class="g g-f">
  <div class="gr">
    <div class="gc12 SM_gc6 SM_go3">
      <!-- Place content here -->
    </div>
  </div>
</div>

Atom Index

Values for each atom are listed in the order they are listed in generated CSS.

Name Pattern

  • (1โ€ฆ10/2) Range of possible values from 1 to 10 with step 2.
  • [breakpoint_] and [-pseudo] Optional breakpoint and pseudo-element or pseudo-class.
  • {key} and {value} Placeholders for map key and map value.

Example [breakpoint_]fw(100โ€ฆ900/100) expands to fw100, fw200 โ€ฆ SM_fw100, SM_fw200 โ€ฆ LG_fw900.

Background

background-color

[breakpoint_]bgc{key}[-pseudo] โ†’ background-color: {value}

Specify mapping in $background-colors: (key: value).

background-attachment

  1. bga-f โ†’ fixed
  2. bga-s โ†’ scroll

background-clip

  1. bgcp-bb โ†’ border-box
  2. bgcp-pb โ†’ padding-box
  3. bgcp-cb โ†’ content-box
  4. bgcp-i โ†’ inherit

background-image

  1. bgi-n โ†’ none
  2. bgi-i โ†’ inherit

background-origin

  1. bgo-bb โ†’ border-box
  2. bgo-pb โ†’ padding-box
  3. bgo-cb โ†’ content-box

background-repeat

  1. bgr-n โ†’ no-repeat
  2. bgr-x โ†’ repeat-x
  3. bgr-y โ†’ repeat-y
  4. bgr-s โ†’ space
  5. bgr-r โ†’ round

background-size

  1. bgz-a โ†’ auto
  2. bgz-ct โ†’ contain
  3. bgz-cv โ†’ cover

background-position

  1. bgp-tc โ†’ top center
  2. bgp-tl โ†’ top left
  3. bgp-cr โ†’ center right
  4. bgp-cc โ†’ center center
  5. bgp-cl โ†’ center left
  6. bgp-br โ†’ bottom right
  7. bgp-bc โ†’ bottom center
  8. bgp-bl โ†’ bottom left

background-position-x

  1. bgpx-r โ†’ right
  2. bgpx-c โ†’ center
  3. bgpx-l โ†’ left

background-position-y

  1. bgpy-t โ†’ top
  2. bgpy-c โ†’ center
  3. bgpy-b โ†’ bottom

fill

[breakpoint_]fi{key}[-pseudo] โ†’ fill: {value}

Specify mapping in $background-colors: (key: value).

Border

border-color

  1. [breakpoint_]bdc{key}[-pseudo] โ†’ border-color: {value}
  2. [breakpoint_]bdxc{key}[-pseudo] = bdlc{key}, bdrc{key}
  3. [breakpoint_]bdyc{key}[-pseudo] = bdtc{key}, bdbc{key}
  4. [breakpoint_]bdtc{key}[-pseudo] โ†’ border-top-color: {value}
  5. [breakpoint_]bdbc{key}[-pseudo] โ†’ border-bottom-color: {value}
  6. [breakpoint_]bdrc{key}[-pseudo] โ†’ border-right-color: {value}
  7. [breakpoint_]bdlc{key}[-pseudo] โ†’ border-left-color: {value}

Specify mapping in $border-colors: (key: value).

border-width

  1. [breakpoint_]bdw{key} โ†’ border-width: {value}
  2. [breakpoint_]bdxw{key} = bdlw{key}, bdrw{key}
  3. [breakpoint_]bdyw{key} = bdtw{key}, bdbw{key}
  4. [breakpoint_]bdtw{key} โ†’ border-top-width: {value}
  5. [breakpoint_]bdbw{key} โ†’ border-bottom-width: {value}
  6. [breakpoint_]bdrw{key} โ†’ border-right-width: {value}
  7. [breakpoint_]bdlw{key} โ†’ border-left-width: {value}

Specify mapping in $border-widths: (key: value).

border-style

  1. [breakpoint_]bds{key} โ†’ border-style: {value}
  2. [breakpoint_]bdxs{key} = bdls{key}, bdrs{key}
  3. [breakpoint_]bdys{key} = bdts{key}, bdbs{key}
  4. [breakpoint_]bdts{key} โ†’ border-top-style: {value}
  5. [breakpoint_]bdbs{key} โ†’ border-bottom-style: {value}
  6. [breakpoint_]bdrs{key} โ†’ border-right-style: {value}
  7. [breakpoint_]bdls{key} โ†’ border-left-style: {value}

Specify mapping in $border-styles: (key: value).

By default, all available border styles are included. Border style atoms are emitted for every breakpoint what can cause significant increase of outputted CSS file. Be sure to remove unused border styles in order to reduce file size.

border-radius

  1. [breakpoint_]bdr{key} โ†’ border-radius: {value}
  2. [breakpoint_]bdtr{key} = bdtlr{key}, bdtrr{key}
  3. [breakpoint_]bdrr{key} = bdtrr{key}, bdbrr{key}
  4. [breakpoint_]bdbr{key} = bdblr{key}, bdbrr{key}
  5. [breakpoint_]bdlr{key} = bdtlr{key}, bdblr{key}
  6. [breakpoint_]bdtrr{key} โ†’ border-top-right-radius: {value}
  7. [breakpoint_]bdtlr{key} โ†’ border-top-left-radius: {value}
  8. [breakpoint_]bdbrr{key} โ†’ border-bottom-right-radius: {value}
  9. [breakpoint_]bdblr{key} โ†’ border-bottom-left-radius: {value}

Specify mapping in $border-radiuses: (key: value).

Images

object-fit

  1. of-n โ†’ none
  2. of-f โ†’ fill
  3. of-ct โ†’ contain
  4. of-cv โ†’ cover
  5. of-sd โ†’ scale-down
  6. of-i โ†’ inherit

Transforms

transform

  1. ts-n โ†’ none
  2. ts-i โ†’ inherit
  3. tsr(45dโ€ฆ360/45d) โ†’ transform: rotate(45deg)โ€ฆrotate(360deg)
  4. tsr(-45dโ€ฆ-360/-45d) โ†’ transform: rotate(-45deg)โ€ฆrotate(-360deg)
  5. tss(0โ€ฆ200/25) โ†’ transform: scale(0)โ€ฆscale(2)

Flexible Box Layout

These shortcuts are available if display atom is included.

  1. [breakpoint_]fx-r = d-fx, fxd-r
  2. [breakpoint_]fx-rr = d-fx, fxd-rr
  3. [breakpoint_]fx-c = d-fx, fxd-c
  4. [breakpoint_]fx-cr = d-fx, fxd-cr

flex-direction

  1. [breakpoint_]fxd-r โ†’ row
  2. [breakpoint_]fxd-rr โ†’ row-reverse
  3. [breakpoint_]fxd-c โ†’ column
  4. [breakpoint_]fxd-cr โ†’ column-reverse

flex-wrap

  1. [breakpoint_]fxw-n โ†’ nowrap
  2. [breakpoint_]fxw-w โ†’ wrap
  3. [breakpoint_]fxw-wr โ†’ wrap-reverse

flex-grow

[breakpoint_]fxg(0โ€ฆ10/1) โ†’ flex-grow: 0โ€ฆ10

flex-shrink

[breakpoint_]fxs(0โ€ฆ10/1) โ†’ flex-shrink: 0โ€ฆ10

flex-basis

  1. [breakpoint_]fxb-a โ†’ auto
  2. [breakpoint_]fxb-mac โ†’ max-content
  3. [breakpoint_]fxb-mic โ†’ min-content
  4. [breakpoint_]fxb-fc โ†’ fit-content
  5. [breakpoint_]fxb-c โ†’ content

justify-content

  1. [breakpoint_]jc-fs โ†’ flex-start
  2. [breakpoint_]jc-fe โ†’ flex-end
  3. [breakpoint_]jc-c โ†’ center
  4. [breakpoint_]jc-sb โ†’ space-between
  5. [breakpoint_]jc-sa โ†’ space-around

align-items

  1. [breakpoint_]ai-fs โ†’ flex-start
  2. [breakpoint_]ai-fe โ†’ flex-end
  3. [breakpoint_]ai-c โ†’ center
  4. [breakpoint_]ai-bs โ†’ baseline
  5. [breakpoint_]ai-s โ†’ stretch

align-content

  1. [breakpoint_]ac-fs โ†’ flex-start
  2. [breakpoint_]ac-fe โ†’ flex-end
  3. [breakpoint_]ac-c โ†’ center
  4. [breakpoint_]ac-sb โ†’ space-between
  5. [breakpoint_]ac-sa โ†’ space-around
  6. [breakpoint_]ac-s โ†’ stretch

align-self

  1. [breakpoint_]as-a โ†’ auto
  2. [breakpoint_]as-fs โ†’ flex-start
  3. [breakpoint_]as-fe โ†’ flex-end
  4. [breakpoint_]as-c โ†’ center
  5. [breakpoint_]as-b โ†’ baseline
  6. [breakpoint_]as-s โ†’ stretch

order

[breakpoint_]ord(0โ€ฆ10/1) โ†’ order: 0โ€ฆ10

Positioning

float

  1. [breakpoint_]fl-l โ†’ left
  2. [breakpoint_]fl-r โ†’ right
  3. [breakpoint_]fl-n โ†’ none

clear

  1. cl-l โ†’ left
  2. cl-r โ†’ right
  3. cl-b โ†’ both
  4. cl-n โ†’ none

position

  1. pos-s โ†’ static
  2. pos-a โ†’ absolute
  3. pos-r โ†’ relative
  4. pos-f โ†’ fixed

top right bottom left

  1. [breakpoint_]t{key} โ†’ top: {value}
  2. [breakpoint_]r{key} โ†’ right: {value}
  3. [breakpoint_]b{key} โ†’ bottom: {value}
  4. [breakpoint_]l{key} โ†’ left: {value}

Specify mapping in $positions: (key: value).

z-index

  1. z(0โ€ฆ10/1) โ†’ z-index: 0โ€ฆ10
  2. z-a โ†’ auto
  3. z-i โ†’ inherit

Fonts

font-size

  1. [breakpoint_]fz-xxs โ†’ xx-small
  2. [breakpoint_]fz-xs โ†’ x-small
  3. [breakpoint_]fz-s โ†’ small
  4. [breakpoint_]fz-m โ†’ medium
  5. [breakpoint_]fz-l โ†’ large
  6. [breakpoint_]fz-xl โ†’ x-large
  7. [breakpoint_]fz-xxl โ†’ xx-large
  8. [breakpoint_]fz-lr โ†’ larger
  9. [breakpoint_]fz-sr โ†’ smaller
  10. [breakpoint_]fz-i โ†’ inherit
  11. [breakpoint_]fz{key} โ†’ font-size: {value}

Specify mapping in $font-sizes: (key: value).

line-height

  1. lh-n โ†’ normal
  2. lh-i โ†’ inherit
  3. lh0 โ†’ 0
  4. lh1 โ†’ 1
  5. lh{key} โ†’ line-height: {value}

Specify mapping in $line-heights: (key: value).

font-family

  1. [breakpoint_]fs-s โ†’ serif
  2. [breakpoint_]fs-ss โ†’ sans-serif
  3. [breakpoint_]fs-m โ†’ monospace
  4. [breakpoint_]fs-c โ†’ cursive
  5. [breakpoint_]fs-f โ†’ fantasy
  6. [breakpoint_]fs-i โ†’ inherit
  7. [breakpoint_]fs{key} โ†’ font-family: {value}

Specify mapping in $font-families: (key: value).

font-weight

  1. [breakpoint_]fw(100โ€ฆ900/100) โ†’ font-weight: 100โ€ฆ900
  2. [breakpoint_]fw-n โ†’ normal
  3. [breakpoint_]fw-b โ†’ bold
  4. [breakpoint_]fw-br โ†’ bolder
  5. [breakpoint_]fw-lr โ†’ lighter
  6. [breakpoint_]fw-i โ†’ inherit

font-style

  1. [breakpoint_]fs-n โ†’ normal
  2. [breakpoint_]fs-i โ†’ italic
  3. [breakpoint_]fs-o โ†’ oblique

font-variant

  1. fv-cl โ†’ common-ligatures
  2. fv-apc โ†’ all-petite-caps
  3. fv-asc โ†’ all-small-caps
  4. fv-sc โ†’ small-caps
  5. fv-c โ†’ contextual
  6. fv-df โ†’ diagonal-fractions
  7. fv-sf โ†’ stacked-fractions
  8. fv-hf โ†’ historical-forms
  9. fv-hl โ†’ historical-ligatures
  10. fv-i โ†’ inherit
  11. fv-n โ†’ normal
  12. fv-tn โ†’ tabular-nums
  13. fv-pn โ†’ proportional-nums
  14. fv-pw โ†’ proportional-width

font-size-adjust

fza-n โ†’ none

font-stretch

  1. fst-n โ†’ normal
  2. fst-uc โ†’ ultra-condensed
  3. fst-ec โ†’ extra-condensed
  4. fst-c โ†’ condensed
  5. fst-sc โ†’ semi-condensed
  6. fst-se โ†’ semi-expanded
  7. fst-e โ†’ expanded
  8. fst-ee โ†’ extra-expanded
  9. fst-ue โ†’ ultra-expanded

-webkit-font-smoothing

  1. wfsm-a โ†’ antialiased
  2. wfsm-sa โ†’ subpixel-antialiased
  3. wfsm-n โ†’ none

-moz-osx-font-smoothing

  1. mfsm-a โ†’ auto
  2. mfsm-g โ†’ grayscale

Transitions

transition-property

  1. trp-n โ†’ none
  2. trp-a โ†’ all

transition-duration

trd(100msโ€ฆ1000ms/100ms) โ†’ transition-duration: 100msโ€ฆ1000ms

transition-timing-function

  1. trtf-e โ†’ ease
  2. trtf-ei โ†’ ease-in
  3. trtf-eo โ†’ ease-out
  4. trtf-eio โ†’ ease-in-out
  5. trtf-l โ†’ linear
  6. trtf-ss โ†’ step-start
  7. trtf-se โ†’ step-end

Text

letter-spacing

  1. ls-n โ†’ normal
  2. ls-i โ†’ inherit
  3. ls{key} โ†’ letter-spacing: {value}

Specify mapping in $letter-spacings: (key: value).

overflow-wrap

  1. ovw-n โ†’ normal
  2. ovw-b โ†’ break-word

text-align

  1. [breakpoint_]ta-l โ†’ left
  2. [breakpoint_]ta-c โ†’ center
  3. [breakpoint_]ta-r โ†’ right
  4. [breakpoint_]ta-j โ†’ justify

text-align-last

  1. [breakpoint_]tal-l โ†’ left
  2. [breakpoint_]tal-c โ†’ center
  3. [breakpoint_]tal-r โ†’ right
  4. [breakpoint_]tal-j โ†’ justify

text-indent

ti{key} โ†’ text-indent: {value}

Specify mapping in $text-indents: (key: value).

text-decoration

  1. [breakpoint_]td-n[-pseudo] โ†’ none
  2. [breakpoint_]td-u[-pseudo] โ†’ underline
  3. [breakpoint_]td-o โ†’ overline
  4. [breakpoint_]td-lt โ†’ line-through

text-transform

  1. tt-c โ†’ capitalize
  2. tt-u โ†’ uppercase
  3. tt-l โ†’ lowercase
  4. tt-n โ†’ none
  5. tt-fw โ†’ full-width

white-space

  1. [breakpoint_]ws-n โ†’ normal
  2. [breakpoint_]ws-p โ†’ pre
  3. [breakpoint_]ws-nw โ†’ nowrap
  4. [breakpoint_]ws-pw โ†’ pre-wrap
  5. [breakpoint_]ws-pl โ†’ pre-line

word-break

  1. wob-n โ†’ normal
  2. wob-ka โ†’ keep-all
  3. wob-ba โ†’ break-all

word-wrap

  1. wow-n โ†’ normal
  2. wow-bw โ†’ break-word

Lists and Counters

list-style

  1. lis-n โ†’ none
  2. lis-i โ†’ inherit

list-style-position

  1. lisp-in โ†’ inside
  2. lisp-o โ†’ outside
  3. lisp-i โ†’ inherit

list-style-type

  1. list-n โ†’ none
  2. list-d โ†’ disc
  3. list-c โ†’ circle
  4. list-s โ†’ square
  5. list-dc โ†’ decimal
  6. list-dclz โ†’ decimal-leading-zero
  7. list-lr โ†’ lower-roman
  8. list-ur โ†’ upper-roman
  9. list-i โ†’ inherit

Colors

color

[breakpoint_]c{key}[-pseudo] โ†’ color: {value}

Specify mapping in $colors: (key: value).

opacity

op(0โ€ฆ100/1) โ†’ opacity: 0โ€ฆ1

Box Model

box-shadow

bxs{key}[-pseudo] โ†’ box-shadow: {value}

Specify mapping in $box-shadows: (key: value).

box-sizing

  1. bxz-cb โ†’ content-box
  2. bxz-bb โ†’ border-box
  3. bxz-i โ†’ inherit

height

  1. [breakpoint_]h{key} โ†’ height: {value}
  2. [breakpoint_]mah-n โ†’ max-height: none
  3. [breakpoint_]mah{key} โ†’ max-height: {value}
  4. [breakpoint_]mih{key} โ†’ min-height: {value}

Specify mapping in $heights: (key: value).

width

  1. [breakpoint_]w{key} โ†’ width: {value}
  2. [breakpoint_]maw-n โ†’ max-width: none
  3. [breakpoint_]maw{key} โ†’ max-width: {value}
  4. [breakpoint_]miw{key} โ†’ min-width: {value}

Specify mapping in $widths: (key: value).

margin

  1. [breakpoint_]m{key} โ†’ margin: {value}
  2. [breakpoint_]mx-a โ†’ margin-left: auto, margin-right: auto
  3. [breakpoint_]mx{key} = ml{key}, mr{key}
  4. [breakpoint_]my{key} = mt{key}, mb{key}
  5. [breakpoint_]mt{key} โ†’ margin-top: {value}
  6. [breakpoint_]mr{key} โ†’ margin-right: {value}
  7. [breakpoint_]mb{key} โ†’ margin-bottom: {value}
  8. [breakpoint_]ml{key} โ†’ margin-left: {value}

Specify mapping in $margins: (key: value).

padding

  1. [breakpoint_]p{key} โ†’ padding: {value}
  2. [breakpoint_]px{key} = pl{key}, pr{key}
  3. [breakpoint_]py{key} = pt{key}, pb{key}
  4. [breakpoint_]pt{key} โ†’ padding-top: {value}
  5. [breakpoint_]pr{key} โ†’ padding-right: {value}
  6. [breakpoint_]pb100p โ†’ padding-bottom: 100%
  7. [breakpoint_]pb{key} โ†’ padding-bottom: {value}
  8. [breakpoint_]pl{key} โ†’ padding-left: {value}

Specify mapping in $paddings: (key: value).

overflow

  1. ov-v โ†’ visible
  2. ov-h โ†’ hidden
  3. ov-s โ†’ scroll
  4. ov-a โ†’ auto

overflow-x

  1. ovx-v โ†’ visible
  2. ovx-h โ†’ hidden
  3. ovx-s โ†’ scroll
  4. ovx-a โ†’ auto

overflow-y

  1. ovy-v โ†’ visible
  2. ovy-h โ†’ hidden
  3. ovy-s โ†’ scroll
  4. ovy-a โ†’ auto

-webkit-overflow-scrolling

  1. wovs-t โ†’ touch
  2. wovs-a โ†’ auto

visibility

  1. [breakpoint_]v-v โ†’ visible
  2. [breakpoint_]v-h โ†’ hidden
  3. [breakpoint_]v-c โ†’ collapse

Page

page-break-before

  1. pgbb-a โ†’ auto
  2. pgbb-al โ†’ always
  3. pgbb-av โ†’ avoid
  4. pgbb-l โ†’ left
  5. pgbb-r โ†’ right

page-break-inside

  1. pgbi-a โ†’ auto
  2. pgbi-av โ†’ avoid

page-break-after

  1. pgba-a โ†’ auto
  2. pgba-al โ†’ always
  3. pgba-av โ†’ avoid
  4. pgba-l โ†’ left
  5. pgba-r โ†’ right

User Interface

cursor

  1. cur-a โ†’ auto
  2. cur-d โ†’ default
  3. cur-cm โ†’ context-menu
  4. cur-h โ†’ help
  5. cur-p โ†’ pointer
  6. cur-ps โ†’ progress
  7. cur-w โ†’ wait
  8. cur-cl โ†’ cell
  9. cur-c โ†’ crosshair
  10. cur-t โ†’ text
  11. cur-al โ†’ alias
  12. cur-cp โ†’ copy
  13. cur-m โ†’ move
  14. cur-nd โ†’ no-drop
  15. cur-na โ†’ not-allowed
  16. cur-as โ†’ all-scroll
  17. cur-cr โ†’ col-resize
  18. cur-rr โ†’ row-resize
  19. cur-nr โ†’ n-resize
  20. cur-er โ†’ e-resize
  21. cur-sr โ†’ s-resize
  22. cur-wr โ†’ w-resize
  23. cur-ner โ†’ ne-resize
  24. cur-nwr โ†’ nw-resize
  25. cur-ser โ†’ se-resize
  26. cur-swr โ†’ sw-resize
  27. cur-ewr โ†’ ew-resize
  28. cur-nsr โ†’ ns-resize
  29. cur-neswr โ†’ nesw-resize
  30. cur-nwser โ†’ nwse-resize
  31. cur-zi โ†’ zoom-in
  32. cur-zo โ†’ zoom-out
  33. cur-g โ†’ grab
  34. cur-gr โ†’ grabbing
  35. cur-n โ†’ none

resize

  1. rz-n โ†’ none
  2. rz-b โ†’ both
  3. rz-h โ†’ horizontal
  4. rz-v โ†’ vertical

text-overflow

  1. tov-e โ†’ ellipsis
  2. tov-c โ†’ clip

user-select

  1. us-n โ†’ none
  2. us-t โ†’ text
  3. us-a โ†’ all

Table

border-collapse

  1. bdce-c โ†’ collapse
  2. bdce-s โ†’ separate
  3. bdce-i โ†’ inherit

caption-side

  1. cps-t โ†’ top
  2. cps-b โ†’ bottom

empty-cells

  1. ec-s โ†’ show
  2. ec-h โ†’ hide

table-layout

  1. tbl-a โ†’ auto
  2. tbl-f โ†’ fixed

vertical-align

  1. va-sp โ†’ super
  2. va-t โ†’ top
  3. va-tt โ†’ text-top
  4. va-m โ†’ middle
  5. va-bs โ†’ baseline
  6. va-b โ†’ bottom
  7. va-tb โ†’ text-bottom
  8. va-sb โ†’ sub

Miscellaneous

display

  1. d-n โ†’ none
  2. d-b โ†’ block
  3. d-fx โ†’ flex
  4. d-li โ†’ list-item
  5. d-ri โ†’ run-in
  6. d-i โ†’ inline
  7. d-itb โ†’ inline-table
  8. d-ifx โ†’ inline-flex
  9. d-ib โ†’ inline-block
  10. d-tb โ†’ table
  11. d-tcp โ†’ table-caption
  12. d-tc โ†’ table-column
  13. d-tcg โ†’ table-column-group
  14. d-thg โ†’ table-header-group
  15. d-tfg โ†’ table-footer-group
  16. d-tr โ†’ table-row
  17. d-trg โ†’ table-row-group
  18. d-tcl โ†’ table-cell
  19. d-rb โ†’ ruby
  20. d-rbb โ†’ ruby-base
  21. d-rbbc โ†’ ruby-base-container
  22. d-rbt โ†’ ruby-text
  23. d-rbtc โ†’ ruby-text-container

License

The code is available under MIT licence.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].