Skip to content

Instantly share code, notes, and snippets.

@housemeow
Last active September 7, 2016 07:34
Show Gist options
  • Select an option

  • Save housemeow/9dd984ac51ede47f26f90d5fe19a7605 to your computer and use it in GitHub Desktop.

Select an option

Save housemeow/9dd984ac51ede47f26f90d5fe19a7605 to your computer and use it in GitHub Desktop.
Base
a.is-underline
[acss-color="COLOR_NAME"]
[acss-bg-color="COLOR_NAME]"
[acss-border-color="COLOR_NAME"]
[acss-divider-color="COLOR_NAME"]
[acss-divider-color="COLOR_NAME"]
[acss-divider-color="COLOR_NAME"]
[acss-divider-color="COLOR_NAME"]
RWD
{RWD} min name max
-xs xs <= 374
-sm 375 <= sm <= 767
-md 768 <= md <= 991
-lg 992 <= lg <= 1199
-xl 1200<= xl
.is-mobile
.is-pc
.is-xs
.is-not-xs
.is-sm
.is-not-sm
.is-md
.is-not-md
.is-lg
.is-not-lg
.is-xl
.is-not-xl
.rwd-test
Text
[acss{RWD}-line-height="LINE_HEIGHT"]
[acss{RWD}-font-size="FONT_SIZE"]
[acss{RWD}-font-weight="FONT_WEIGHT"]
[acss{RWD}-text-align="ALIGN"]
[acss-font="FONT_NAME"]
Flex
.l-row, .l-col, .l-center
Flex align
.is-reverse
.is-deep-center
.is-deep-center
[acss{RWD}-x-align~="X_ALIGN"] (deepable)
[acss{RWD}-y-align~="Y_ALIGN"] (deepable)
[acss{RWD}-wrap-align~="WRAP_ALIGN"] (deepable)
Flex child align
[acss{RWD}-child-align~="left"]
[acss{RWD}-child-align~="right"]
[acss{RWD}-child-align~="top"]
[acss{RWD}-child-align~="bottom"]
[acss{RWD}-child-align~="center"]
[acss{RWD}-child-align~="stretch"]
Flex gutter
[acss{RWD}-gutter-between="GUTTER"]
[acss{RWD}-gutter-around="GUTTER"]
[acss{RWD}-gutter-around="GUTTER"]
[acss{RWD}-gutter-between="GUTTER"]
Flex divider
[acss{RWD}-divider~="between"]
[acss{RWD}-divider~="around"]
[acss-divider-color="COLOR_NAME"]
[acss-divider-width="THICKNESS"]
Flex size
.is-full-parent
.no-shrink
.is-wrap
> .no-shrink
> .is-fill
> [acss{RWD}-flex-grow="GROW"]
Grid system
[acss-rwd{RWD}="GRID"]
[acss-flex-basis=auto]
[acss-rwd{RWD}-wrap-gutter="GUTTER"] > * {
[acss-rwd{RWD}="GRID"]
Padding
[acss{RWD}-pad="{PADDING}"]
[acss{RWD}-pad^="{PADDING}x"]
[acss{RWD}-pad$="x{PADDING}"]
[acss{RWD}-pad-x="{PADDING}"]
[acss{RWD}-pad-x^="{PADDING}-"]
[acss{RWD}-pad-x$="-{PADDING}"]
[acss{RWD}-pad-y="{PADDING}"]
[acss{RWD}-pad-y^="{PADDING}-"]
[acss{RWD}-pad-y$="-{PADDING}"]
Position
.l-dock {
> [acss-position~=dock]
[acss-position~=fixed]
[acss-position~=offset]
[acss{RWD}-position~="top={TOP}"]
[acss{RWD}-position~="right={RIGHT}"]
[acss{RWD}-position~="bottom={BOTTOM}"]
[acss{RWD}-position~="left={LEFT}"]
[acss{RWD}-position~="center-x"]
[acss{RWD}-position~="center-y"]
Border
.acss-border[acss-border~='WIDTH']
.acss-border[acss-border~='COLOR']
Circle
.acss-circle
Line
.acss-line[acss-line-thickness="THICKNESS"]
Texture
.acss-texture
Texture mapping
[acss-texture-mapping="width"]
[acss-texture-mapping="height"]
[acss-texture-mapping="cover"]
[acss-texture-mapping="contain"]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment