@riapacheco/yutes

v4.2.4

Published

3 years ago

Utility SCSS stylesheets that enable structure before design

Downloads

862

0High
0Medium
0Low

riapacheco

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

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 | ------------------------- | .primary-color | .primary-color.light | .primary-color.medium | .primary-color.dark | .primary-bg | .primary-bg.light | .primary-bg.medium | .primary-bg.dark | .secondary-color | .secondary-color.light | .secondary-color.medium | .secondary-color.dark | .secondary-bg | .secondary-bg.light | .secondary-bg.medium | .secondary-bg.dark | .accent-color | .accent-color.light | .accent-color.medium | .accent-color.dark | .accent-bg | .accent-bg.light | .accent-bg.medium | .accent-bg.dark | Applied Value | | ------------------------------------------- | | color: $primary-color | | color: $primary-light-color | | color: $primary-medium-color | | color: $primary-dark-color | | background-color: $primary-color | | background-color: $primary-light-color | | background-color: $primary-medium-color | | background-color: $primary-dark-color | | color: $secondary-color | | color: $secondary-light-color | | color: $secondary-medium-color | | color: $secondary-dark-color | | background-color: $secondary-color | | background-color: $secondary-light-color | | background-color: $secondary-medium-color | | background-color: $secondary-dark-color | | color: $accent-color | | color: $accent-light-color | | color: $accent-medium-color | | color: $accent-dark-color | | background-color: $accent-color | | background-color: $accent-light-color | | background-color: $accent-medium-color | | 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';