Wind

Wind is a compact framework for applying CSS properties using classes. The framework needs CSS variables to function correctly. You can supply your own CSS variables or use the default file _variables.css, which can be found in the source folder.

Usage

Just apply the classes you want to your HTML using the class attributes. If for instance you want to add text-align: center and add a large margin-bottom below an h1:

<div class="text-align-center">
    <h1 class="margin-bottom-large">I'm centered now</h1>
</div>

As you can see, each CSS class represents one CSS property. There are some exceptions:

• display-*-mobile classes are using a media query
• margin-x-, margin-y-, padding-x- and padding-y- classes are setting two paddings and margins at the same time

Supported Properties

|CSS property|Wind classes| |---|---| |align-content|align-content-centeralign-content-flex-endalign-content-space-aroundalign-content-space-betweenalign-content-startalign-content-stretch| |align-items|align-items-baselinealign-items-centeralign-items-flex-endalign-items-flex-startalign-items-stretch| |align-self|align-self-baselinealign-self-centeralign-self-flex-endalign-self-flex-startalign-self-stretch| |background-color|background-color-dangerbackground-color-infobackground-color-successbackground-color-transparentbackground-color-warning| |border-radius|border-radius-smallborder-radius-mediumborder-radius-large| |border-style|border-style-noneborder-bottom-style-noneborder-left-style-noneborder-right-style-noneborder-top-style-noneborder-style-solidborder-bottom-style-solidborder-left-style-solidborder-right-style-solidborder-top-style-solid| |border-width|border-width-noneborder-width-smallborder-width-mediumborder-width-largeborder-bottom-width-noneborder-bottom-width-smallborder-bottom-width-mediumborder-bottom-width-largeborder-left-width-noneborder-left-width-smallborder-left-width-mediumborder-left-width-largeborder-right-width-noneborder-right-width-smallborder-right-width-mediumborder-right-width-largeborder-top-width-noneborder-top-width-smallborder-top-width-mediumborder-top-width-large| |color|color-inherit| |column-gap|column-gap-xsmallcolumn-gap-smallcolumn-gap-mediumcolumn-gap-largecolumn-gap-xlargecolumn-gap-xxlarge| |cursor|cursor-all-scrollcursor-cellcursor-col-resizecursor-crosshaircursor-ew-resizecursor-grabcursor-grabbingcursor-helpcursor-not-allowedcursor-movecursor-nesw-resizecursor-ns-resizecursor-nwse-resizecursor-pointercursor-progresscursor-row-resizecursor-textcursor-waitcursor-zoom-incursor-zoom-out| |display|display-blockdisplay-flexdisplay-inlinedisplay-inline-blockdisplay-inline-flexdisplay-nonedisplay-block-mobiledisplay-inline-mobiledisplay-inline-block-mobiledisplay-none-mobile| |flex-direction|flex-direction-columnflex-direction-column-reverseflex-direction-rowflex-direction-row-reverse| |flex-grow|flex-grow-0flex-grow-1| |flex-shrink|flex-shrink-0flex-shrink-1| |flex-wrap|flex-wrap-nowrapflex-wrap-wrap| |font-family|font-family-monospace| |font-size|font-size-xsmallfont-size-smallfont-size-mediumfont-size-largefont-size-xlargefont-size-xxlarge| |font-style|font-style-italicfont-style-normal| |font-weight|font-weight-100font-weight-200font-weight-300font-weight-400font-weight-500font-weight-600font-weight-700font-weight-800font-weight-900| |height|height-25height-33height-50height-66height-75height-100height-100pxheight-200pxheight-300pxheight-100vh| |justify-content|justify-content-centerjustify-content-flex-endjustify-content-flex-startjustify-content-space-aroundjustify-content-space-betweenjustify-content-space-evenly| |line-height|line-height-xsmallline-height-smallline-height-mediumline-height-largeline-height-xlarge| |margin|margin-bottom-xsmallmargin-bottom-smallmargin-bottom-mediummargin-bottom-largemargin-left-xsmallmargin-left-smallmargin-left-mediummargin-left-largemargin-right-xsmallmargin-right-smallmargin-right-mediummargin-right-largemargin-top-xsmallmargin-top-smallmargin-top-mediummargin-top-largemargin-x-automargin-x-xsmallmargin-x-smallmargin-x-mediummargin-x-largemargin-y-xsmallmargin-y-smallmargin-y-mediummargin-y-large| |overflow|overflow-x-autooverflow-x-hiddenoverflow-x-scrolloverflow-x-visibleoverflow-y-autooverflow-y-hiddenoverflow-y-scrolloverflow-y-visible| |padding|padding-bottom-xsmallpadding-bottom-smallpadding-bottom-mediumpadding-bottom-largepadding-left-xsmallpadding-left-smallpadding-left-mediumpadding-left-largepadding-right-xsmallpadding-right-smallpadding-right-mediumpadding-right-largepadding-top-xsmallpadding-top-smallpadding-top-mediumpadding-top-largepadding-x-xsmallpadding-x-smallpadding-x-mediumpadding-x-largepadding-y-xsmallpadding-y-smallpadding-y-mediumpadding-y-large| |text-align|text-align-centertext-align-lefttext-align-right| |text-decoration|text-decoration-line-throughtext-decoration-nonetext-decoration-underline| |text-transform|text-transform-capitalizetext-transform-lowercasetext-transform-uppercase| |vertical-align|vertical-align-baselinevertical-align-bottomvertical-align-middlevertical-align-subvertical-align-supervertical-align-text-bottomvertical-align-text-topvertical-align-top| |visibility|visibility-hiddenvisibility-visible| |width|width-25width-33width-50width-66width-75width-100width-100pxwidth-200pxwidth-300pxwidth-100vh|