v1.12.0

New

Adding <form> styling.

Responsiveness for grid.

Adding flex-direction option.

.flex__column
.flex__row

Adding more font-size options.

.font--2xl
.font--3xl
.font--4xl

Adding more layout alignment for .grid.

.-1fr-1fr
.-1fr-auto-1fr
.-1fr-1fr-1fr
.-1fr-1fr-1fr-1fr

Adding more layout alignment for .flex and .grid.

.-centered
.-justify-content-{ evenly | around | between | stretch | center | start | end | flex-start | flex-end | left | right }
.-align-content-{ evenly | around | between | stretch | center | start | end | flex-start | flex-end | baseline | initial }
.-align-items-{ stretch | center | start | end | flex-start | flex-end | normal | baseline | initial }

Adding img new classes for object-fit.

.-contain
.-cover
.-fill
.-none
.-scale-down

Adding some filter effect for img.

.-blur-{ 0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 }
.-brightness-{ 0 | 25 | 50 | 75 | 100 }
.-contrast-{ 0 | 25 | 50 | 75 | 100 }
.-grayscale-{ 0 | 25 | 50 | 75 | 100 }
.-hue-rotate-{ 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315 | 360 }
.-invert-{ 0 | 25 | 50 | 75 | 100 }
.-opacity-{ 0 | 25 | 50 | 75 | 100 }
.-saturate-{ 0 | 25 | 50 | 75 | 100 }
.-sepia-{ 0 | 25 | 50 | 75 | 100 }
.-initial
.-inherit

Updates

• .highlight improvement with adding support for <mark> tag use.
• Font size improvement using clamp() for .font--{xs | sm | md | lg | xl | 2xl | 3xl | 4xl} classes.

v1.11.0

New

Adding .grid layout, .table classes.

.table

.grid

.grid__column

.grid__row

.-justify-content-{ evenly | around | between | center | start | end }

.-align-content-{ evenly | around | between | center | start | end }

.button.-outline-{ light | info | warning | danger }

Updates

• Improve .hero__content link text.
• Improve .navbar links.
• Fix .navbar__burger to position: absolute

v1.10.1

Updates

• Better .navbar responsive menu.
• New .navbar--fixed option.
• Lighter .notice background-color value.
• Removing heading value conflict in normalize.

v1.10.0

New

Added new .dropdown, .navbar classes.

.dropdown

.navbar

Update

.button box-shadow value for :active and :hover state.

v1.9.0

New

Adding .button, .hero, and .notice classes.

.hero

.button--{xs | sm | md | lg}

.notice--{info | success | warning | danger}

Update

.bg--{dark | light}--gradient

.bg--{info | success | warning | danger}--gradient

v1.8.0

Add .columns, .flex, .card classes.

.columns
.column
.column--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}

.flex
.flex--{wrap | nowrap | reverse}

.card

.font--{xs | sm | md | lg | xl | xxl}

v1.7.0

Adding .highlight .float .rounded .txt--{position} .txt--{transform} .shadow{size}

.highlight--{info | success | warning | danger}

.float--{left | right | none}

.rounded--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | full}

.txt--{left | center | right}

.txt--{upper | lower | capital}

.shadow--{xs | sm | md | lg | xl | inner | 0 }

v1.6.0

Adding Badge component and border type.

<span class="badge badge--maroon txt--white">Badge</span>

v1.5.0

Adding .bg--<color> .txt--<color> .border--<number> classes.

.bg--yellowgreen {
  background-color: yellowgreen;
}
.bg--darkkhaki {
  background-color: darkkhaki;
}

.txt--yellowgreen {
  background-color: yellowgreen;
}
.txt--darkkhaki {
  background-color: darkkhaki;
}

.border--1 {
  border: 1rem;
}
.border--t--1 {
  border-top: 1rem;
}
.border--x--1 {
  border-left: 1rem;
  border-right: 1rem;
}
.border--y--1 {
  border-top: 1rem;
  border-bottom: 1rem;
}

v1.4.3

Utilizing normalize.css as CSS resets.