Global CSS Utils

Sizes

$basic-font-sizes: (
  'xs': 12px,
  'sm': 12px,
  'md': 14px,
  'lg': 16px,
  'xl': 16px,
);

Class name	Equals to css
c-h-xs	font-size: 12px; line-height: 12px;
c-h-sm	font-size: 12px; line-height: 12px;
c-h-md	font-size: 14px; line-height: 14px;
c-h-lg	font-size: 16px; line-height: 16px;
c-h-xl	font-size: 16px; line-height: 16px;

Border Radius

$basic-rounded-sizes: (
  'xs': 4px,
  'sm': 4px,
  'md': 8px,
  'lg': 12px,
  'xl': 12px,
);

Class name	Equals to css
c-rounded-xs	border-radius: 4px;
c-rounded-sm	border-radius: 4px;
c-rounded-md	border-radius: 8px;
c-rounded-lg	border-radius: 12px;
c-rounded-xl	border-radius: 12px;

Flex Layout

Class name	Equals to css
c-flex c-column c-row	display: inline-flex;
c-justify-start	justify-content: flex-start;
c-justify-center	justify-content: center;
c-justify-end	justify-content: flex-end;
c-justify-between	justify-content: space-between;
c-justify-evenly	justify-content: space-evenly;
c-justify-around	justify-content: space-around;
c-items-start	align-items: flex-start;
c-items-center	align-items: flex-center;
c-items-end	align-items: flex-end;
c-items-baseline	align-items: baseline;
c-items-stretch	align-items: stretch;

Spaces

$sizes: (
  'xs': 4px,
  'sm': 8px,
  'md': 12px,
  'lg': 16px,
  'xl': 24px,
);

.c-[p | m][a | x | y| l | t | r | b]-[xs | sm | md | lg | xl]

Class name	Equals to css
c-pa-md	padding: 12px;
c-mr-sm	margin-right: 8px;
c-px-lg	padding-left: 16px; padding-right: 16px;
...	...

Row & Spans

Casual UI use 12 cols a row. You can use them like this:

c-col-[colSize]

Gutters

TIP

This class need to match with .c-row or .c-column

.c-gutter[-x | -y ]-[xs | sm | md | lg | xl]

Class name	Equals to css
c-gutter-x-[size]	has[size] gutter in horizontal
c-gutter-y-[size]	has[size] gutter in vertical
c-gutter-[size]	has[size] gutter in both horizontal and vertical

Some Examples

Loading...

function Demo() {
  const colStyle = {
    backgroundColor: 'lightblue',
    textAlign: 'center',
    color: '#fff',
    padding: '12px 0',
  }

  const createRepeatCols = (n, span, gutter) => (
    <div className={`c-row c-gutter-x-${gutter} c-col-12`}>
      {Array(n)
      .fill(0)
      .map((_, i) => (
        <div
          key={i}
          className={`c-col-${span}`}
        >
          <div style={colStyle}>
            col-{span} <br />
            gutter-x-{gutter}</div>
        </div>
      ))}
    </div>
  )

  return (
    <div className="c-row c-gutter-y-md c-wrap">
      {createRepeatCols(6, 2, 'xs')}
      {createRepeatCols(4, 3, 'md')}
      {createRepeatCols(2, 6, 'xl')}
    </div>
  )
}

Fold/Expand Code