@fishawack/lab-ui NPM

Background

What

Fishawack stylesheet.

Why

Prevent code repetition.

Getting started

Install

npm install @fishawack/lab-ui

Create the following files

_Build/sass/general.scss
_Build/sass/vendor.scss
_Build/sass/_variables.scss
_Build/sass/_defaults.scss

general.scss

@import "_variables.scss";

@import "_defaults.scss";

// Local project imports

vendor.scss

@import "_variables.scss";

@import "_defaults.scss";

@import "normalize.css/normalize";

#svgSprite{
	position: absolute;
	width: 0;
	height: 0;
	z-index: -1;
}

// Vendor imports / Lab-ui imports

_variables.scss

@import "@fishawack/lab-ui/_variables.scss";

// Set global variables here, e.g $color6: red;

_defaults.scss

@use "_variables.scss";

@import "@fishawack/lab-ui/_defaults.scss";

// Dynamic variables
$colors: variables.dynamic('color', module-variables("variables"));

// Override lab-ui defaults here, e.g $button: $color6;

Aspect ratio

Lab Ui comes with a built in mixin for forcing the aspect ratio of the entire webpage. This will work out of the box with the boilerplate code by simply including the forceRatio mixin.

@include forceRatio();

Aswell as calling the mixin you will then need to update any sass variables that are currently pixel values to rem values. You can do this by using the get-ratio() function to convert pixel values directly to rem values.

$fontSize should not be set to a get-ratio value as this is the root value used for all calculations and will be converted to rem's automatically by the mixin.

$spacing: get-ratio(10px);
$radius: get-ratio(5px);
$iconSize: get-ratio(40px);

If your not using the boilerplate code then you simply need to wrap the root container of your site in the following tags

<body>
    <div class="forceRatio">
        <div class="forceRatio__inner">
            ...rest of the site goes here
        </div>
    </div>
</body>

By default @include forceRatio() will force a 16:9 aspect ratio with 1920x1080 as the base size. To change the ratio you just need to set the $screen variable in _variables.scss before calling the mixin or pass the values directly into the mixin.

$screen : (1024, 768);

@include forceRatio();

// OR

@include forceRatio(1024, 768);

Modern only

All code will work in all browsers by default and will automatically switch between the correct css to use. If you're certain that backwards compatibility isn't required and want to remove support for older browsers you can by turning legacy mode off in your _defaults.scss.

$legacy: false;

Migrating

12.0.0

normalize.scss was poorly maintained, so we've switched to the base normalize.css which requires a slightly different import.

// Old way
@import "normalize";
@include normalize();

// New way
@import "normalize.css/normalize";

11.0.0

The library is now bundled into a much smaller package where all the sass files are found directly at the root. Previously we set our sass to look inside the package up the directory tree to simplify the imports. Now the imports must be regular import/use paths to the file needed.

// Old way
@import "lab-ui/_mixins.scss";
@import "lab-ui/_grid.scss";

// New way
@import "@fishawack/lab-ui/_mixins.scss";
@import "@fishawack/lab-ui/_grid.scss";

css components

breakpoint-sass normalize.css sass-utilizer

@everything-registry/sub-chunk-326

4 days ago

5 months ago

2 years ago

2 years ago