Miscellaneous

This is a collection of helpers for different purposes, this collection will be updated if new helpers are required.

You can include these classes in your build process if you want.

<a>

If you installed Shido via npm or yarn and want to change the color of your <a> in contrasting backgrounds, you can use this class for that.

  • a-contrast-color

    Inverts the colors set in the variables s-main-link-color and s-main-link-color-hover


<a class="a-contrast-color"> ... </a>

Appearance

Used to display an element using a platform-native styling based on the users’ operating system’s theme.

  • appearance-none

    You can remove the default styles of an element, for example inputs or selects

Background image

  • bg-img-cover

    Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

  • bg-img-fixed

    The background image will not scroll with the page

  • bg-img-no-repeat

    The background-image is not repeated. The image will only be shown once

Background position

Sets the starting position of a background image.

  • bg-pos-bottom
  • bg-pos-center
  • bg-pos-left
  • bg-pos-right
  • bg-pos-top

Display

This property specifies the display behavior (the type of rendering box) of an element.

  • dis-block
  • dis-inline-block
  • dis-table
  • dis-table-row
  • dis-table-cell

Font family

  • ff-body

    Set the font type defined in s-body-font-family variable

  • ff-heading

    Set the font type defined in s-headers-font-family variable

  • ff-reset

    Set the default font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Oxygen, sans-serif;

Image

  • image-liquid

    This applies max-width: 100%; to the image so that it scales nicely to the parent element

Inline block clear

  • inline-block-clear

    Remove the space between elements of type inline-block, this class emulates the behavior of .line

Overflow

Specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

  • ovf-auto

    If overflow is clipped, a scroll-bar should be added to see the rest of the content

  • ovf-hidden

    The overflow is clipped, and the rest of the content will be invisible

  • ovf-visible

    The overflow is not clipped. It renders outside the element's box. This is default

Position

  • pos-relative

Tables

  • table-responsive

    It will show a horizontal scroll bar if the screen is too small to show the full content


<div class="table-responsive">
    <table>
        ...
    </table>
</div>

Transition

The transition class is a shorthand property of transition-property, transition-duration, transition-timing-function, and transition-delay. Define the transition between two states of an element.

  • trans-ease

    Set the transition values as follows: transition: all 0.2s ease, outline 0.000001s

  • trans-linear

    Set the transition values as follows: transition: all 0.2s linear, outline 0.000001s

Transition mixin

Shido also has a transition mixin that you can customize and include in your build process.

You can get more information about transitions here

  • mix-transition

    This mixin can receive 4 parameters: property, delay, timing and property-to-cancel, if the corresponding parameter is not received it will be set with its default value. By default: property: all delay: .2s timing: ease property-to-cancel: outline property-to-cancel (This property will not be affected by the transition)


.banner-demo {
  .mix-transition // or
  .mix-transition(width, 1s) // or
  .mix-transition(all, .8s, ease, color)
}

                      

.banner-demo {
   @include mix-transition // or
   @include mix-transition(width, 1s) // or
   @include mix-transition(all, .8s, ease, color)
}

User select

In web browsers, if you double-click on some text it will be selected/highlighted.

  • user-select-none

    Prevent text selection

White space

Specifies how white-space inside an element is handled.

  • ws-normal

    Text will wrap when necessary

  • ws-nowrap

    Text will never wrap to the next line. The text continues on the same line until a
    tag is encountered

  • ws-pre-line

    Text will wrap when necessary, and on line breaks

Width & Height

Sets the width and height of an element.

  • h-50

    Set the height of the element to 50%

  • h-100

    Set the height of the element to 100%

  • w-50

    Set the width of the element to 50%

  • w-100

    Set the width of the element to 100%

  • vh-50

    Set the viewport height of the element to 50vh

  • vh-100

    Set the viewport height of the element to 100vh

  • vw-50

    Set the viewport width of the element to 50vw

  • vw-100

    Set the viewport width of the element to 100vw

z Index

Apecifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

  • z-index-*

    Numbers between 1 and 5