Yutes [Utilities]

The @riapacheco/yutes package is a really lightweight SCSS pack of stylesheets intended to provide utilities similar to those found in common frameworks like Bootstrap (with some slight differences) but without the rigidness that limits fluid design.

As an example of how this is achieved (especially for those familiar with libraries like Bootstrap and Tailwind CSS), here's some samples on how they were created with SCSS features:

// Enabling the 'pt-1' [padding-top: 1] shorthand classes | (_utilities.scss)
@each $abbr, $name in ('t': 'top', 'r': 'right', 'b': 'bottom', 'l': 'left') {
  @for $i from 1 through $margin-max-rem-multiple {
    .p#{$abbr}-#{$i} {
      padding-#{$name}: 1rem * $i;
    }
  }
}

// Enabling breakpoint logic | (breakpoints.scss)
@mixin if-viewport($media) {
  @if $media == small {
    @media only screen and (max-width: $mobile) {
      @content;
    }
  } @else if $media == medium {
    @media only screen and (min-width: calc($mobile + 1px)) and (max-width: calc($desktop - 1px)){
      @content;
    }
  } 
}

Simplified buttons so that they don't rely on the color palette and instead can be changed with three variables. You can also add sm after btn for smaller buttons and lg after btn for larger. These are based on a scale() property which you can also override. To skip the documentation and see it in action, watch this demo video.

Contents ⤵️

Installation
Browser Resets
Usage
Config Variables
Latest Updates
- New Inter Optimized Stylesheet

Installation

Install from NPM with command

  npm install @riapacheco/yutes

In your main SCSS file

@import "@riapacheco/yutes/main.scss";

For Encapsulated Views

To use breakpoints in encapsulated stylesheet

@import "@riapacheco/yutes/breakpoints.scss";

To use colors and to override in encapsulated stylesheet

@import '@riapacheco/yutes/variables.scss';

Browser Resets

This package strips all browser default styles passively.

Style	Applied to	Description
Smoothing	All Elements	Antialiasing makes for smoother renderings
Border-Box	All Elements	Ensures consistency with edges
Unset Focus/Outlines	All Elements	Removes browser focus styles (e.g. blue borders)
Unset scrollbar	All Elements	Removes scrollbar from all views
Consistent resizing	`img` elements	Limits errors and broken styles from problematic cascading. To change image size, adjust `width` only.
Unset focus	`button`	Removes webkit focus
Unset active	`button`	Removes all active outlines and blue colors
Unset focus	anchors	Removes webkit focus
Unset active	anchors	Removes all active outlines, underlines, and blue colors
Prioritized cursor `pointer`	File upload buttons	Re-adds the `pointer` behavior of cursors for any `file upload` buttons you may add graphics overtop of
Removed outlines	`input`	Removes outlines from input fields

Usage

How to Override

All structure and baseline user controls were sized (or calculated [calc()]) with rem multiples (baseline body font-size) to ensure responsivity and easier customization.

To override any variables, in your main SCSS file re-assign the variable BEFORE importing the ~@riapacheco/yutes/main.scss file (and variables.scss file just to be safe!) like this:

$primary-color: #123456;
$secondary-color: #654321;
$base-rem-size: 17px;
$h2-size: 2rem;

@import '~@riapacheco/yutes/main.scss';
@import '~@riapacheco/yutes/variables.scss';

See config variables section for complete list of variables to override

Imported Fonts

Test drive a font family by applying its class to an element containing text. For HTML <link> tags, see comments found in the @riapacheco/yutes/_fonts.scss file!

Inter .inter-ff
Roboto Flex .roboto-flex-ff
Public Sans .public-sans-ff
Open Sans .open-sans-ff
Fira Code .fira-code-ff
Nanum Gothic .nanum-gothic-ff
Lato .lato-ff
Montserrat .montserrat-ff
Oswald .oswald-ff
Source Sans Pro .source-sans-pro-ff
Merriweather .merriweather-ff
Nunito Sans .nunito-sans-ff

Horizontal Centering

Specify a container width to create a centered container.

SYNTAX

<div class="mx-auto-{size}px">
  This is a container
</div>

VALUES

Specify a size between 1 and 3000. The value is translated to pixels.

EXAMPLE

<div class="mx-auto-700px">
  This is a good size for iPads
</div>

Padding & Margin

SYNTAX

<div class="p{direction}-{size}"></div>

VALUES

See config variables section to override the size range

Prefix	Direction	Translation	Compiles to	Size Range
`p`	`t`	`top`	`padding-top:`	`1` - `30`
`p`	`r`	`right`	`padding-right:`	`1` - `30`
`p`	`b`	`bottom`	`padding-bottom:`	`1` - `30`
`p`	`l`	`left`	`padding-left:`	`1` - `30`
`m`	`t`	`top`	`margin-top:`	`1` - `30`
`m`	`r`	`right`	`margin-right:`	`1` - `30`
`m`	`b`	`bottom`	`margin-bottom:`	`1` - `30`
`m`	`l`	`left`	`margin-left:`	`1` - `30`

EXAMPLE

<div class="pt-3 pb-1">
  Section
</div>

The above translates to padding-top: 3rem; and padding-bottom: 1rem;

Breakpoints

DEPENDENCY

Must import the following to any encapsulated stylesheets first

@import "~@riapacheco/yutes/breakpoints.scss";

SYNTAX

.your-class {
  width: 220px;
  
  @include if-viewport({size}) {
    // add appropriate styles
  }
}

VALUES

See config variables section to override the breakpoint widths

{size}	Description
`small`	Applies your assigned styles if viewport between `0px` and `375px`
`medium`	Applies your assigned styles if viewport between `376px` and `1200px`

EXAMPLE

.buttons-block {
  display: flex;
  flex-direction: row;
  button {
    display: inline-block;
  }
  
  @include if-viewport(small) { // applies smartphone-friendly styling
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    button { // accesses child (parent's scope)
      display: block;
    }
  }
  
  @include if-viewport(medium) { // applies tablet - small screen styling
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

Colors

DEPENDENCY

Must import the following to any encapsulated stylesheets first

@import '~@riapacheco/yutes/variables.scss'

SYNTAX

Mostly applied to optional controls (buttons and form fields) but can be applied to elements with classes like this:

<div class="primary-color">
  This text has `$primary-color` applied to it
</div>

VALUES

See config variables section to override the color variables

Class	Applied Value
`.primary-color`	`color: $primary-color`
`.primary-color.light`	`color: $primary-light-color`
`.primary-color.medium`	`color: $primary-medium-color`
`.primary-color.dark`	`color: $primary-dark-color`
`.primary-bg`	`background-color: $primary-color`
`.primary-bg.light`	`background-color: $primary-light-color`
`.primary-bg.medium`	`background-color: $primary-medium-color`
`.primary-bg.dark`	`background-color: $primary-dark-color`
`.secondary-color`	`color: $secondary-color`
`.secondary-color.light`	`color: $secondary-light-color`
`.secondary-color.medium`	`color: $secondary-medium-color`
`.secondary-color.dark`	`color: $secondary-dark-color`
`.secondary-bg`	`background-color: $secondary-color`
`.secondary-bg.light`	`background-color: $secondary-light-color`
`.secondary-bg.medium`	`background-color: $secondary-medium-color`
`.secondary-bg.dark`	`background-color: $secondary-dark-color`
`.accent-color`	`color: $accent-color`
`.accent-color.light`	`color: $accent-light-color`
`.accent-color.medium`	`color: $accent-medium-color`
`.accent-color.dark`	`color: $accent-dark-color`
`.accent-bg`	`background-color: $accent-color`
`.accent-bg.light`	`background-color: $accent-light-color`
`.accent-bg.medium`	`background-color: $accent-medium-color`
`.accent-bg.dark`	`background-color: $accent-dark-color`

EXAMPLE

<div class="primary light">
  This is light color text
</div>

Headings

SYNTAX

The following properties have been set from h1 to h6:

font-size`, `line-height`, `letter-spacing`, `font-weight`, and `text-transform

VALUES

See config variables section to override heading values

Forms

SYNTAX / EXAMPLE

Lightweight classes for stacking labels overtop input and select elements (with light grey field input colors). Only requires that the label and input or select element are enclosed in an element with the .form-group class like this:

<div class="form-group"> <!--just this-->
  <label>
    First Name
  </label>
  <input type="text" name="firstName">
</div>

VALUES

See config variables section to override form element styles

Buttons

SYNTAX

This style will always require the initializer btn class followed by chained {color} classes or chained {add-on} classes

<a class="btn {size} {color} {add-on} "

VALUES

For full details on configuring variables, go to config variables section.

BUTTON UPDATES

Primary, Secondary, and Accent Base Colors

For easier / quick implementation, and for those NOT wanting multiple shades of a button color, you can now update your primary, secondary, and accent buttons with simple variables instead of relying on the actual $primary-color variables in your palette. However, this will not impact the other class shades (e.g <color_type> light) as they are still part of the overall color scheme.

// Variables found in the variables.scss file
// Configured in your main SCSS file BEFORE importing the package
$button-primary-color: $primary-dark-color;
$button-secondary-color: $secondary-medium-color;
$button-accent-color: $accent-medium-color;

For more details, see config variables section.

Sizing

Since there's value in having alternative small and large buttons, there are now variables to adjust these sizes utilizing the transform: scale(x) property.

// Variables found in the variables.scss file
// Configured in your main SCSS file BEFORE importing the package
$button-sm-size: scale(0.8);
$button-lg-size: scale(1.15);

For more details, see config variables section.

Notes:

Any classes listed within < > and given a ? are optional
If the property listed is a variable (starts with a $) this indicates both the value AND how the variable you can override in your main stylesheet.

Class(es)	Syntax Position	Compiles to \|\| General description
`primary`	`{color}`	`$button-primary-color: $primary-dark-color`
`primary default`	`{color}`	`background-color: $primary-color`
`primary light`	`{color}`	`background-color: $primary-light-color`
`primary medium`	`{color}`	`background-color: $primary-medium-color`
`primary dark`	`{color}`	`background-color: $primary-dark-color`
`primary <shade?> primary-alt-text`	`{color}`	`background-color: $primary` `color: $button-primary-font-color-alt`
`secondary`	`{color}`	`$button-secondary-color: $secondary-medium-color`
`secondary default`	`{color}`	`background-color: $secondary-color`
`secondary light`	`{color}`	`background-color: $secondary-light-color`
`secondary medium`	`{color}`	`background-color: $secondary-medium-color`
`secondary dark`	`{color}`	`background-color: $secondary-dark-color`
`secondary <shade?> secondary-alt-text`	`{color}`	`background-color: $secondary` `color: $button-secondary-font-color-alt`
`accent`	`{color}`	`$button-accent-color: $accent-medium-color`
`accent default`	`{color}`	`background-color: $accent-color`
`accent light`	`{color}`	`background-color: $accent-light-color`
`accent medium`	`{color}`	`background-color: $accent-medium-color`
`accent dark`	`{color}`	`background-color: $accent-dark-color`
`accent <shade?> accent-alt-text`	`{color}`	`background-color: $accent` `color: $button-accent-font-color-alt`
`sm`	`{size}`	`$button-sm-size: scale(0.8)`
`lg`	`{size}`	`$button-lg-size: scale(1.15)`
`rounded`	`{add-on}`	Pill style button (`20px` border radius)
`raised`	`{add-on}`	Applies a box-shadow (and adjustments to box-shadow on `hover` and when `active`)
`hover-to-lighten`	`{add-on}`	Applies a `brightness` filter on `hover` that increases brightness by `15%`
`hover-to-darken`	`{add-on}`	Applies a `brightness` filter on `hover` that decreases brightness by `25%`

EXAMPLE

<a class="btn primary raised hover-to-darken">
  Save Changes
</a>

Config Variables

How it works

To override any variables, in your main SCSS file re-assign the variable BEFORE importing the ~@riapacheco/yutes/main.scss file (and variables.scss file just to be safe!) like this:

$primary-color: #123456;
$secondary-color: #654321;
$base-rem-size: 17px;
$h2-size: 2rem;

@import '~@riapacheco/yutes/main.scss';
@import '~@riapacheco/yutes/variables.scss';

Override Base Sizes

Copy some or all of the following into your main file (in this order) and change the values as you please Note: your $base-rem-size value determines the overall sizing of all elements impacted by this package.

$base-rem-size: 15.5px;
$base-font-family: "Inter", sans-serif;
$base-letter-spacing: -0.02rem;
$button-primary-color: pink;

@import '~@riapacheco/yutes/main.scss';
@import '~@riapacheco/yutes/variables.scss';