An open-source, lightweight and modern CSS framework, design system built on Sass. Give your project a solid foundation.
MIT License
Bot releases are hidden (Show)
clear-list
mixin's margin property.Published by adamlaki 2 months ago
transition
: set a fallback default CSS custom property if user has reduced motion.$form-control
: add font-family
property.$form-label
: add text-transform
property.$form-switch
: add separate colors.Published by adamlaki 10 months ago
short-ring()
: fix the return at the button
option.Published by adamlaki 10 months ago
$form-fieldset
: add legend-font-family
property.$typography
: add letter-spacing-heading
property.$colors
: add 'strong
option under base
to customize the <strong>
element's color.layout-center()
mixin: add inline-size: 100%;
.layout-grid()
, layout-flex()
, layout-sidebar()
mixins: enable multiple $gap
value like 'm:l'
to control both block and inline values.spacer()
function: enable multiple value shorthand like 'm:l'
to control both block and inline values.transition()
function (you can migrate overt config()
function or transition()
mixin.).transition()
mixin: enable multiple values for property
with quotes.short-ring()
mixin: add a new mixin as a shorthand to access the two basic ring styling on focus quickly (input, button).config('border-radius-sm', $display)
and config('border-radius-lg', $display)
.Published by adamlaki about 1 year ago
Published by adamlaki about 1 year ago
.form-group--stacked
: fix the border-radius when only one element is present.Published by adamlaki over 1 year ago
In this release we have a lot of small changes and fixes with some improvement.
.form-group--row
: now uses container query..form-group--row
: add vertical alignment option.color-value
function to get only the color value.form-check
: add font-weight option.scaler
option..btn__icon
.form-label
: font-family not worked.form-description
: make it explicit.Published by adamlaki over 1 year ago
*-inline-size
and *-block-size
.Published by adamlaki over 1 year ago
prefers-reduced-motion
behavior.selection
mixinmargin-block-start
at layout-stack
.::-webkit-slider-thumb
bug.Because it is a major release, there are some breaking changes. In general, the changes are more of an optimization and reorganization.
config()
function if you plan to use CSS custom properties; otherwise, the map.get
also works.generate-styles
, and we can control its values through the $generators map.Published by adamlaki over 1 year ago
$has-outline
argument at generate-btn
mixin.generate-print
mixin.Published by adamlaki almost 2 years ago
$table-stripe
variable to control the table stripe pattern (odd, even).generate-table
mixin.--min-width
variable to .responsive-table
to control width individually.$font-weight-base
variable.spacer-clamp
mixin (not just map key).transition
mixin to get the default transition values easier..btn--outline-*
button variants.font-face
mixin.Published by adamlaki almost 2 years ago
focus-ring()
mixin to control the different variations of focus states.$font-size-lead
responsive by default.$form-check-checkbox-border-radius
variable.$form-switch-margin-bottom variable
to $form-switch-margin-block-start
.$form-check-vertical-alignment
variable add .form-check--vertical-center
and .form-check--vertical-start
.$table-caption-*
variables.Although this is not a major feature, some moderate breaking changes can be related to the focus-ring()
mixin and its colors.
And other smaller modifications and fixes.
Published by adamlaki about 2 years ago
.btn--icon
size padding bug.$container-width
's default valuetext-ellipsis
mixin$form-control-padding-lg
Published by adamlaki about 2 years ago
Published by adamlaki about 2 years ago
Published by adamlaki about 2 years ago
.form-file
, .form-range
, .form-switch
..form-group
..quote
as a helper for cited blockquote.And a lot more minor changes and fixes.
Published by adamlaki over 2 years ago
selection
mixin to handle the ::selection
a bit simpler.marker
color under base
to control the list's ::marker
.-webkit-tap-highlight-color
with transparent
value to html
element.outline
from [tabindex='-1']:focus
.$map
argument to the color
function to use it any map.text-ellipsis
multiline bug.Published by adamlaki over 2 years ago
set-css-variable
mixin and get-css-variable
function to handle the prefix using CSS variables.$form-check-margin
variable to control the .form-check
vertical offset.layout-*
mixins to accept a shorthand value of for spacer from the $spacers map (now you can use any defined key like m, l, xl and so on).text-ellipsis
mixin bug.Published by adamlaki over 2 years ago
!default
to $table-line-height
.Published by adamlaki over 2 years ago
spacer-clamp
function which help to generate clamp()
functions from the $spacers
map.html-smooth-scrolling
to $settings
.$form-check-font-weight
variable.$form-check-line-height
variable.$table-line-height
variable.$font-size-ratio
’s default value to 1.25
.generate-form-label
order under generate-form
mixin.