Skip to main content

Global CSS Utils


$basic-font-sizes: (
'xs': 12px,
'sm': 12px,
'md': 14px,
'lg': 16px,
'xl': 16px,
Class nameEquals to css
c-h-xsfont-size: 12px; line-height: 12px;
c-h-smfont-size: 12px; line-height: 12px;
c-h-mdfont-size: 14px; line-height: 14px;
c-h-lgfont-size: 16px; line-height: 16px;
c-h-xlfont-size: 16px; line-height: 16px;

Border Radius

$basic-rounded-sizes: (
'xs': 4px,
'sm': 4px,
'md': 8px,
'lg': 12px,
'xl': 12px,
Class nameEquals to css
c-rounded-xsborder-radius: 4px;
c-rounded-smborder-radius: 4px;
c-rounded-mdborder-radius: 8px;
c-rounded-lgborder-radius: 12px;
c-rounded-xlborder-radius: 12px;

Flex Layout

Class nameEquals to css
c-flex c-column c-rowdisplay: inline-flex;
c-justify-startjustify-content: flex-start;
c-justify-centerjustify-content: center;
c-justify-endjustify-content: flex-end;
c-justify-betweenjustify-content: space-between;
c-justify-evenlyjustify-content: space-evenly;
c-justify-aroundjustify-content: space-around;
c-items-startalign-items: flex-start;
c-items-centeralign-items: flex-center;
c-items-endalign-items: flex-end;
c-items-baselinealign-items: baseline;
c-items-stretchalign-items: stretch;


$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 nameEquals to css
c-pa-mdpadding: 12px;
c-mr-smmargin-right: 8px;
c-px-lgpadding-left: 16px; padding-right: 16px;

Row & Spans

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




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

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

Class nameEquals 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

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`}>
.map((_, i) => (
<div style={colStyle}>
col-{span} <br />
return (
<div className="c-row c-gutter-y-md c-wrap">
{createRepeatCols(6, 2, 'xs')}
{createRepeatCols(4, 3, 'md')}
{createRepeatCols(2, 6, 'xl')}
Fold/Expand Code