@kompanie/wind NPM

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

@everything-registry/sub-chunk-525

1.0.0

2 years ago