{"id":24560851,"url":"https://github.com/ka215/sloth","last_synced_at":"2025-08-17T10:04:09.634Z","repository":{"id":57363332,"uuid":"176938202","full_name":"ka215/sloth","owner":"ka215","description":"Mobile-first CSS Lightweight Framework. It has reduced styling coding costs to a minimum with non-BEM and simpler naming conventions than OOCSS.","archived":false,"fork":false,"pushed_at":"2020-11-19T06:33:50.000Z","size":4516,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-02T11:20:55.450Z","etag":null,"topics":["css","framework","front-end","mobile-first","postcss","responsive","sass","web"],"latest_commit_sha":null,"homepage":"https://ka2.org/sloth/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ka215.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"ka215","custom":["https://ka2.org/sloth/donation.html"]}},"created_at":"2019-03-21T12:16:21.000Z","updated_at":"2020-11-19T06:33:52.000Z","dependencies_parsed_at":"2022-08-31T00:40:30.659Z","dependency_job_id":null,"html_url":"https://github.com/ka215/sloth","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/ka215/sloth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fsloth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fsloth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fsloth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fsloth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ka215","download_url":"https://codeload.github.com/ka215/sloth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ka215%2Fsloth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270831777,"owners_count":24653412,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","framework","front-end","mobile-first","postcss","responsive","sass","web"],"created_at":"2025-01-23T07:19:05.391Z","updated_at":"2025-08-17T10:04:09.597Z","avatar_url":"https://github.com/ka215.png","language":"CSS","funding_links":["https://github.com/sponsors/ka215","https://ka2.org/sloth/donation.html"],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\u003cimg src=\"https://ka2.org/sloth/assets/sloth.svg\" height=\"32\"\u003e Sloth\u003c/h1\u003e\r\n\r\nMobile-first lightweight CSS Framework that has reduced styling coding costs to a minimum with non-BEM and simpler naming conventions than OOCSS.\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003ctable border=\"0\"\u003e\u003ctbody\u003e\u003ctr\u003e\r\n  \u003ctd width=\"20%\" align=\"center\"\u003e\u003cimg alt=\"Sloth Pickup Styles: Forms\" src=\"https://ka2.org/sloth/assets/sloth_ss1.jpg\"\u003e\u003c/td\u003e\r\n  \u003ctd width=\"20%\" align=\"center\"\u003e\u003cimg alt=\"Sloth Pickup Styles: Toggle Buttons\" src=\"https://ka2.org/sloth/assets/sloth_ss2.jpg\"\u003e\u003c/td\u003e\r\n  \u003ctd width=\"20%\" align=\"center\"\u003e\u003cimg alt=\"Sloth Pickup Styles: Buttons\" src=\"https://ka2.org/sloth/assets/sloth_ss3.jpg\"\u003e\u003c/td\u003e\r\n  \u003ctd width=\"20%\" align=\"center\"\u003e\u003cimg alt=\"Sloth Pickup Styles: CSS Grids\" src=\"https://ka2.org/sloth/assets/sloth_ss4.jpg\"\u003e\u003c/td\u003e\r\n  \u003ctd width=\"20%\" align=\"center\"\u003e\u003cimg alt=\"Sloth Pickup Extensions: Dialog\" src=\"https://ka2.org/sloth/assets/sloth_ss5.jpg\"\u003e\u003c/td\u003e\r\n  \u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\r\n\u003c/div\u003e\r\n\r\nThe 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.\r\n\r\nThe 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.\r\n\r\n**19.8kB gzipped** at the latest version.\r\n\r\nAlso 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.\r\n\r\n**I support the Black Lives Matter movement, so I changed the default branch name to main since version 1.5.0.**\r\n\r\n![GitHub release](https://img.shields.io/github/release/ka215/sloth.svg)\r\n![GitHub All Releases](https://img.shields.io/github/downloads/ka215/sloth/total.svg)\r\n![npm download](https://img.shields.io/npm/dt/sloth-css?label=npm%20download)\r\n[![Packagist](https://img.shields.io/packagist/l/doctrine/orm.svg)](https://raw.githubusercontent.com/ka215/sloth/main/LICENSE)\r\n\r\n\u003cbr\u003e\r\n\r\n## Installation\r\n\r\nYou can install via bower:\r\n```sh\r\nbower install --save sloth-css\r\n```\r\n\r\nOr, you can install via npm:\r\n```sh\r\nnpm install --save sloth-css\r\n```\r\n\r\nOr, you can clone the source:\r\n```gitattributes\r\ngit clone https://github.com/ka215/sloth.git\r\n```\r\n\r\nOr, you can load via CDN:\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ka215/sloth@main/dist/sloth.min.css\"\u003e\r\n\u003cscript async src=\"https://cdn.jsdelivr.net/gh/ka215/sloth@main/dist/sloth.extension.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## Usage\r\n\r\nThe Sloth provides one CSS file `sloth.min.css` that minified. In order to use one, you can add a `\u003clink\u003e` in your `\u003chead\u003e`.\r\n```html\r\n\u003c!doctype html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n  ︙\r\n  \u003clink rel=\"stylesheet\" href=\"/path/to/sloth/dist/sloth.min.css\"\u003e\r\n  ︙\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n  ︙\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n### Markup\r\n\r\nMarking 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.\r\n\r\nYou can apply the Sloth style on the entire page by assigning the `.sloth` class to the `\u003cbody\u003e` element.\r\n```html\r\n\u003cbody class=\"sloth\"\u003e\r\n ︙\r\n\u003c/body\u003e\r\n```\r\n\r\nAlternatively, it is possible to apply the Sloth style only within a specific element as shown below.\r\n\r\n```html\r\n\u003cdiv class=\"sloth\"\u003e\r\n ︙\r\n\u003c/div\u003e\r\n```\r\n\r\nAlso, 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.\r\n```html\r\n\u003cbody class=\"sloth\"\u003e\r\n   ︙\r\n  \u003ch1 class=\"nons\"\u003eNot Sloth Styled headline\u003c/h1\u003e\r\n   ︙\r\n\u003c/body\u003e\r\n```\r\n\r\n## Documentation \u0026 Demo\r\n\r\nYou would prefer to see the following URL for a list of all elements and components expressed in the Sloth style.\r\n\r\n\u003chttps://ka2.org/sloth/\u003e\r\n\r\n## Supported Browsers\r\n\r\n\u003chttps://ka2.org/sloth/?p=support\u003e\r\n\r\n## Contributions\r\n\r\n1. Fork it\r\n2. Welcome new pull request\r\n\r\n## Creators\r\n\r\n**ka2 (Katsuhiko Maeno)**\r\n\r\n-   \u003chttps://ka2.org/\u003e\r\n\r\nYour donations for supporting the Sloth style will help me.\r\n\r\nDonate URL:  \u003chttps://ka2.org/sloth/donation.html\u003e\r\n\r\n## Special Thanks\r\n\r\nThanks to Our Contributors and Sponsors.\r\n\r\n- \"[Normalize.css](https://github.com/necolas/normalize.css)\" and \"[Bootstrap-reboot.css](https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css)\" for the foundation.\r\n- Inspired by the \"[Furtive](https://github.com/johno/furtive)\".\r\n- Inspired by the \"[@mallendeo](https://codepen.io/mallendeo/pen/eLIiG)\".\r\n\r\n## Copyright and license\r\n\r\nCode and documentation copyright 2019 - 2020 the  [ka2](https://ka2.org/). Code released under the  [MIT License](https://raw.githubusercontent.com/ka215/sloth/master/LICENSE).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fka215%2Fsloth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fka215%2Fsloth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fka215%2Fsloth/lists"}