@kompanie/wind

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-center align-content-flex-end align-content-space-around align-content-space-between align-content-start align-content-stretch
align-items	align-items-baseline align-items-center align-items-flex-end align-items-flex-start align-items-stretch
align-self	align-self-baseline align-self-center align-self-flex-end align-self-flex-start align-self-stretch
background-color	background-color-danger background-color-info background-color-success background-color-transparent background-color-warning
border-radius	border-radius-small border-radius-medium border-radius-large
border-style	border-style-none border-bottom-style-none border-left-style-none border-right-style-none border-top-style-none border-style-solid border-bottom-style-solid border-left-style-solid border-right-style-solid border-top-style-solid
border-width	border-width-none border-width-small border-width-medium border-width-large border-bottom-width-none border-bottom-width-small border-bottom-width-medium border-bottom-width-large border-left-width-none border-left-width-small border-left-width-medium border-left-width-large border-right-width-none border-right-width-small border-right-width-medium border-right-width-large border-top-width-none border-top-width-small border-top-width-medium border-top-width-large
color	color-inherit
column-gap	column-gap-xsmall column-gap-small column-gap-medium column-gap-large column-gap-xlarge column-gap-xxlarge
cursor	cursor-all-scroll cursor-cell cursor-col-resize cursor-crosshair cursor-ew-resize cursor-grab cursor-grabbing cursor-help cursor-not-allowed cursor-move cursor-nesw-resize cursor-ns-resize cursor-nwse-resize cursor-pointer cursor-progress cursor-row-resize cursor-text cursor-wait cursor-zoom-in cursor-zoom-out
display	display-block display-flex display-inline display-inline-block display-inline-flex display-none display-block-mobile display-inline-mobile display-inline-block-mobile display-none-mobile
flex-direction	flex-direction-column flex-direction-column-reverse flex-direction-row flex-direction-row-reverse
flex-grow	flex-grow-0 flex-grow-1
flex-shrink	flex-shrink-0 flex-shrink-1
flex-wrap	flex-wrap-nowrap flex-wrap-wrap
font-family	font-family-monospace
font-size	font-size-xsmall font-size-small font-size-medium font-size-large font-size-xlarge font-size-xxlarge
font-style	font-style-italic font-style-normal
font-weight	font-weight-100 font-weight-200 font-weight-300 font-weight-400 font-weight-500 font-weight-600 font-weight-700 font-weight-800 font-weight-900
height	height-25 height-33 height-50 height-66 height-75 height-100 height-100px height-200px height-300px height-100vh
justify-content	justify-content-center justify-content-flex-end justify-content-flex-start justify-content-space-around justify-content-space-between justify-content-space-evenly
line-height	line-height-xsmall line-height-small line-height-medium line-height-large line-height-xlarge
margin	margin-bottom-xsmall margin-bottom-small margin-bottom-medium margin-bottom-large margin-left-xsmall margin-left-small margin-left-medium margin-left-large margin-right-xsmall margin-right-small margin-right-medium margin-right-large margin-top-xsmall margin-top-small margin-top-medium margin-top-large margin-x-auto margin-x-xsmall margin-x-small margin-x-medium margin-x-large margin-y-xsmall margin-y-small margin-y-medium margin-y-large
overflow	overflow-x-auto overflow-x-hidden overflow-x-scroll overflow-x-visible overflow-y-auto overflow-y-hidden overflow-y-scroll overflow-y-visible
padding	padding-bottom-xsmall padding-bottom-small padding-bottom-medium padding-bottom-large padding-left-xsmall padding-left-small padding-left-medium padding-left-large padding-right-xsmall padding-right-small padding-right-medium padding-right-large padding-top-xsmall padding-top-small padding-top-medium padding-top-large padding-x-xsmall padding-x-small padding-x-medium padding-x-large padding-y-xsmall padding-y-small padding-y-medium padding-y-large
text-align	text-align-center text-align-left text-align-right
text-decoration	text-decoration-line-through text-decoration-none text-decoration-underline
text-transform	text-transform-capitalize text-transform-lowercase text-transform-uppercase
vertical-align	vertical-align-baseline vertical-align-bottom vertical-align-middle vertical-align-sub vertical-align-super vertical-align-text-bottom vertical-align-text-top vertical-align-top
visibility	visibility-hidden visibility-visible
width	width-25 width-33 width-50 width-66 width-75 width-100 width-100px width-200px width-300px width-100vh