@bulvar/buefy v0.11.14
๐ฃ Bulvar
- โก๏ธ Runtime variables change
- ๐ ๏ธ Rich Features - includes Bulma, Buefy CSS and Bulma extentions
- ๐ก Root and Local variables scoping
- ๐ฆ CSS minifier with structural optimizations
๐ SPECIAL SPONSOR
๐ QUICK INSTALL
Bulma & Buefy is constantly in development! Try it out now:
Bulma
Install using NPM
npm install @bulvar/bulma
or Yarn
yarn add @bulvar/bulma
Buefy
Install using NPM.
NOTE: If you install Buefy, bulma get installed as well as dependency.
npm install @bulvar/buefy
or Yarn
yarn add @bulvar/buefy
๐ฉ IMPORT
Build includes (for both Bulma & Buefy)
- Standart CSS file
bulma.css
orbuefy.css
- Standart minified CSS file
bulma.min.css
andbuefy.min.css
- RTL CSS file
bulma-rtl.css
andbuefy-rtl.css
- Minified RTL CSS file
bulma-rtl.min.css
andbuefy-rtl.min.css
After installation, you can import any from above CSS file into your project using this snippet:
@import '@bulvar/bulma/css/bulma.css';
or
@import '@bulvar/bulma/css/buefy.css';
๐ค WHY Bulvar?
Bulvar is a monorepo with all Bulma-derived packages rewritten with CSS Variables and new @use
and @forward
features.
Currently Includes :
- Bulma itself (duh) as
@bulvar/bulma
- Buefy (SCSS only) as
@bulvar/buefy
- Bulma Extentions (still WIP) as
@bulvar/bulma-extentions
๐งช WHAT HAS BEEN CHANGED
- CSS Vars compatible! Woohoo!
- Real modularity! Drop deprecated
@import
. Use@foward
and@use
(read more HERE) - Always using latest Dart(โ ๏ธ make sure you are using Dart version of SASS in your project too) Sass instead of deprecated node-sass
- Added namespacing. No need to worry about variables overwrite
- Added flag to be able to exports SASS variables using
export
for JS - Added secondary color
- Added flexbox gap helper classes
- Added color-scheme support
- Added cross-browser support for placeholder opacity
- Custom
divide()
function replaced with SASSmath.div()
- Custom
power()
function replaced with SASSmath.pow()
- Added link pseudo selectors
๐ CUSTOMIZATION TIPS
Using @use
instead of @import
itself makes compiling faster.
If you want to save some space you could overwrite helper lists with empty lists during the import like:
@use "path/to/bulma" with (
$flex-direction-values: (),
$flex-wrap-values: (),
$justify-content-values: (),
$align-content-values: (),
$align-items-values: (),
$align-self-values: (),
$flex-operators: (),
$flex-gap-values: (),
)
bulma.sass holds all !default
variables, hence if you need all Bulma elements, pass all your variables directly there
@use 'bulma.sass' with (
$radius-rounded: 99px,
$button-color: red,
$button-family: 'Helvetica',
)
@use 'themes/light.sass'
NOTE: You'll have to import light.sass
or dark.sass
from themes for the CSS Variables Bulma functioning properly.
๐งฉ MODULARITY
Now to import only needed elements instead of entire Bulma became much easy due to "real" modularity.
Thanks to @use
and @forward
, no need to import top level (global) variables in order to import just few needed elements, just import whatever you need.
For example if you need only buttons.sass
in your project, and need to overwrite few variables:
// In order to customize global variables
// Not required, unless you want to modify global variables from utils
@use 'themes/light.sass' with ($radius-rounded: 99px)
// Customize local variables in the module with !default
@use 'buttons.sass' with (
$button-color: red,
$button-family: 'Helvetica',
)
Note that in the example above, when using theme/light
you can modify all global variables.
โ๏ธ HELPERS
There were bunch of improvements in helpers utility classes
is-radiusless
is extended- Added
is-radiusless-top
- Added
is-radiusless-bottom
- Added
is-radiusless-{top-left, top-right, bottom-right, bottom-left}
- Added
is-borderless
is extended - Added
is-borderless-top
- Added
is-borderless-bottom
- Added
is-{top-left, top-right, bottom-right, bottom-left}
โ ๏ธ CSS ONLY
IMPORTANT: This packages is CSS ONLY!
If you need Buefy Vue components, but you wan to use CSS variable in your project, you'll have to install both buefy
and @bulvar/buefy
NOTE: If you need Buefy styles, do not import Bulma, it already includes it in correct order.
โ ๏ธ CSS VARIABLES DRAWBACKS
CSS Variables named after SASS Bulma variables
Each main color in $colors
and shade in $shades
has coresponding
--#{$name}-h
- stands for color hue
--#{$name}-s
- stands for color saturation
--#{$name}-l
- stands for color lightness
--#{$name}-a
- stands for color alpha
Modify Opacity
I.e. to add opacity to the primary color, you'll have to
--primary-a: 0.5;
or
--primary-a: calc(var(--primary-a) - var(--some-other-value));
Modify Lightnes and Darkness
Same applies for lightness. Instead of using sass lightness function (which you cannot with css variables), just modify --primary-l
value.
Tome make color lighter increase (add) value to the --primary-l
, to make it darker, decrease (substract) accordingly.
Modify Invert Colors
By default, if color's luminance less then 0.55, then invert color will be rgba(#000, 0.7)
otherwise white
.
You can change those colors now by overwriting $invert-dark-colors
& $invert-light-colors
Proper color change in runtime
Best way to change main colors (primary, info etc.) is to change their coresponding --#{$name}-h
(hue), --#{$name}-s
(saturation),
--#{$name}-l
(lightness) and --#{$name}-a
(alpha aka opacity)
Scoping
One of the SASS variable $at-root
indicates where CSS variable going to be registered.
By default it sets to true
, and results into
:root {
--footer-background-color: SOME_COLOR;
--footer-padding: SOME_PADDING;
}
In case you need more strict scoping, you can set it to false
, wich, in case of footer component, will trnasform into:
.footer {
--footer-background-color: SOME_COLOR;
--footer-padding: SOME_PADDING;
}
๐ณ EXPORTS
If you are using style modules SASS variable in you JS files, you can set $exports
to true, which will generate
:export {
variableName: VALUE
}
Note that all SASS variable will be camelcased.
๐ข VERSIONING
Version will follow v0.Y.Z, where:
- Y: Major (breaking changes)
- Z: Minor or patch
Starting from version 1.Y.Z we going to deprecate @import
in favour of @use
and @forward
๐ป BROWSER SUPPORT
Bulma & Buefy uses autoprefixer to make (most) Flexbox features compatible with earlier browser versions.
According to Can I use, Bulma is compatible with recent versions of:
- Chrome
- Edge
- Firefox
- Opera
- Safari
Internet Explorer is not supported due to the use of css variables.
Although you can use polyfill.
๐ COPYRIGHT AND LICENSE
Code copyright 2022 Daniil Chumachenko. Code released under the MIT license.
11 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago