Sloth

Mobile-first Lightweight CSS Framework that has reduced styling coding costs to a minimum with non-BEM and simpler naming conventions than OOCSS.

Latest Version: 1.5.0

Why Sloth?

Get Started Sloth!

In order to wake up the sloth, it is necessary to read the built distribution CSS file.

<link rel="stylesheet" href="dist/sloth.min.css">

Oops, shouldn't be forgetting the spell to apply responsive styles for smart devices. Let's include the following Viewport settings in your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Marking up in the Sloth style is very easy. Basically, you can complete most of your work simply by declaring the .sloth class to the parent element you want to apply style to.

<body class="sloth">
⋮
</body>

<div class="sloth">
⋮
</div>

Also, if you do not want to apply a style to a specific element in a Sloth style block, specify the .nons class in the not sloth style declaration.

<body class="sloth">
  <h1 class="nons">Not Sloth Styled headline</h1>
</body>

Sloth Extensions

Since Version 1.0.3, added new extension script for Sloth.
This script makes it easy to create advanced forms with built-in field validation, enable dialog pop-ups, and many other benefits.
Also, since the script is coded in native JavaScript, it can be used that without depending on anything else.
If you want to enable this extension, load the script file as follows.

<script async src="dist/sloth.extension.min.js"></script>

That script file size after gzip compression is 25.7kB at this time.

Basic Structures

The sloth style is styled with mobile first. The basic font size changes according to the screen size of the device that is the breakpoint as below.

	Small	Medium	Large
Screen Width	<= 480px	481px 〜 768px	>= 769px
1rem =	10px	12px	14px
Base Font-size	1.4rem (=14px)	1.1667rem (≒14px)	1.1429rem (≒16px)

Also, you can override custom base font-size via CSS variables as below.

:root {
  /* Set same sizes on all device screen */
  --base-font-size-sm: 1.4rem;    /* = 14px */
  --base-font-size-md: 1.1667rem; /* = 14px */
  --base-font-size-lg: 1rem;      /* = 14px */
}

It does not work in browsers like Internet Explorer etc which do not correspond to the CSS variables (var()).