❤
npm
Sign UpSign In

sloth-css

1.5.1 • Public • Published

Sloth

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

Sloth Pickup Styles: Forms Sloth Pickup Styles: Toggle Buttons Sloth Pickup Styles: Buttons Sloth Pickup Styles: CSS Grids Sloth Pickup Extensions: Dialog

The Sloth is lightweight as it saves the effort to rely on the legacy browser. Also, the Sloth can use advanced styling technology that utilizes flexbox, grid, CSS variables, and limited vendor prefixes.

The Sloth supports SCSS and postCSS, and you can customize your build with the included gulp file. Then the Sloth is providing at only distributed css file without dependenting JavaScript.

19.8kB gzipped at the latest version.

Also since version 1.0.3, it has been added the sloth extensions script that enhances your mark-up the components on the HTML. By using this extension, you get usable the advanced validation form or the popping dialog window, etc.

I support the Black Lives Matter movement, so I changed the default branch name to main since version 1.5.0.

GitHub release GitHub All Releases Packagist


Installation

You can install via bower:

bower install --save sloth-css

Or, you can install via npm:

npm install --save sloth-css

Or, you can clone the source:

git clone https://github.com/ka215/sloth.git

Or, you can load via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ka215/sloth@main/dist/sloth.min.css">
<script async src="https://cdn.jsdelivr.net/gh/ka215/sloth@main/dist/sloth.extension.min.js"></script>

Usage

The Sloth provides one CSS file sloth.min.css that minified. In order to use one, you can add a <link> in your <head>.

<!doctype html>
<html>
<head>
  ︙
  <link rel="stylesheet" href="/path/to/sloth/dist/sloth.min.css">
  ︙
</head>
<body>
  ︙
</body>
</html>

Markup

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.

You can apply the Sloth style on the entire page by assigning the .sloth class to the <body> element.

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

Alternatively, it is possible to apply the Sloth style only within a specific element as shown below.

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

Also, by using the .nons class in the element to which the Sloth style is applied, it is possible to exclude only a specific element from the Sloth style application.

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

Documentation & Demo

You would prefer to see the following URL for a list of all elements and components expressed in the Sloth style.

https://ka2.org/sloth/

Supported Browsers

https://ka2.org/sloth/?p=support

Contributions

  1. Fork it
  2. Welcome new pull request

Creators

ka2 (Katsuhiko Maeno)

Your donations for supporting the Sloth style will help me.

Donate URL: https://ka2.org/sloth/donation.html

Special Thanks

Thanks to Our Contributors and Sponsors.

Copyright and license

Code and documentation copyright 2019 - 2020 the ka2. Code released under the MIT License.

Readme

Keywords

Package Sidebar

Install

npm i sloth-css

Repository

github.com/ka215/sloth

Homepage

ka2.org/sloth/

Weekly Downloads

1

Version

1.5.1

License

MIT

Unpacked Size

1.66 MB

Total Files

18

Last publish

Collaborators

  • ka2
Try on RunKit
Report malware