Glsass v1.2.0

New version with new helpers, components improvements and some changes inside configuration.

What's new?

Two new helpers

The v1.2.0 includes two new helpers: image and ratio.

The first one add the h-img-responsive class to improve the behavior when an image is set with width/height attributes.

The ratio helpers can be use to manage the aspect ratio or content like <img> or <iframe> elements.

Merge variants variables

Some components have a variable to set default colors variants (button, alert...). It allow to add new variant, but not remove existing ones.

With the new list function _list.merge(), it's possible to remove a value by passing it starting with a dash -.

Before

SCSS

@forward "@glsass/components/compoents.button" with (
  $c-button-variants: tertiary
);

CSS

• Generate classes for .c-button--primary and default variants
• Add .c-button--tertiary

.c-button--primary { ... }
.c-button--secondary { ... }
.c-button--success { ... }
.c-button--danger { ... }
.c-button--warning { ... }
.c-button--info { ... }
.c-button--light { ... }
.c-button--dark { ... }
.c-button--white { ... }
.c-button--tertiary { ... }

After

SCSS

@forward "@glsass/components/compoents.button" with (
  $c-button-variants: tertiary, -secondary, -dark, black
);

CSS

• Generate classes for .c-button--primary and default variants
• Add .c-button--tertiary and .c-button--black
• Remove .c-button--secondary and .c-button--dark

.c-button--primary { ... }
.c-button--success { ... }
.c-button--danger { ... }
.c-button--warning { ... }
.c-button--info { ... }
.c-button--light { ... }
.c-button--white { ... }
.c-button--tertiary { ... }
.c-button--black { ... }

Summary

• new image helper (docs)
• new ratio helper (docs)
• new list functions (docs)
• change default behavior form color variants
• make $g-spacers variable overridable
• improve navbar default variables

Documentation

All docs are updated and the next version will be focused about the v1.3.0 to improve default settings like the color variants on components.

Patchs

v1.2.1

• feat: adjust default headings settings 442a8e8
• feat: add default value for spacing.adjust-vr() function 9073edb
• feat: improve color-databse generation f51e9e9

v1.2.2

• fix: wrong classes names (BEM) for navbar component af8cac1
• feat: add additionnal variables for fonts props (font-weight) 870126f

v1.2.3

• feat: add positions utilities (reference in docs but missing in package) e45962e

v1.2.4

• fix: ratio helper selector (CSS rule not optimal) d0e3151

v1.2.5

• refactor: remove unused variable $g-font-size-htmlf178395
• refactor: use graphics vars instead of core layer for overrides 7580342
• refactor: enhance headings variables by separating it from text/body styles 9b18509

v1.2.6

• fix: avoid breaking default font ratio by moving props from html into bodyc8b985b

v1.2.7

• fix: add missing !default flag for button variables da02cd7
• feat: remove inline padding on navbar component 6aafcf6