diff --git a/README.md b/README.md index 432df77..1fab8bc 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Check [the documentation](https://slothcss.devmount.com) to see it live in action. Sloth.css aims to be: -- Lightweight (7.3KB gzipped) +- Lightweight (7.5KB gzipped) - Responsive and mobile-friendly - Beautiful per default but heavily customisable - Working for all modern browsers diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index cdfeb4c..72196e3 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -150,7 +150,7 @@ body { & > aside { background: var(--color-bg-base); position: fixed; - width: 14rem; + width: 15rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; @@ -202,7 +202,7 @@ body { } nav { - padding: 0 1.5rem 1.5rem 1.5rem; + padding: 0 1.5rem 4rem 1.5rem; top: 3.5rem; ul { diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index ba21000..b2710cc 100644 --- a/docs/pages/getting-started/installation.md +++ b/docs/pages/getting-started/installation.md @@ -32,7 +32,7 @@ If you just want to use the drop-in styles or the utility classes or the CSS com ### Install manually -Download the latest [Sloth.css release]({{ repoUrl }}/releases) (7.3KB): +Download the latest [Sloth.css release]({{ repoUrl }}/releases) (7.5KB): diff --git a/docs/pages/index.md b/docs/pages/index.md index 940380f..e06e98a 100644 --- a/docs/pages/index.md +++ b/docs/pages/index.md @@ -8,17 +8,26 @@ notoc: true Logo showing a sloth

Sloth.css

- A drop-in utility component CSS library for lazy mammals.
- Created by devmount. + release + last commit + License MIT + contributions welcome

+Sloth.css is a drop-in utility component CSS library, that aims to be: + +- Lightweight (7.5KB gzipped) +- Responsive and mobile-friendly +- Beautiful per default but heavily customisable +- Working for all modern browsers + ## Installation Include the following CSS file in your HTML head to get the complete package: ```html - + ``` @@ -33,7 +42,7 @@ Sloth.css can be used as drop-in CSS library, as utility class library or even w The drop-in core of Sloth.css provides styles for all plain HTML elements without the use of a single class. If you have a page using semantic markup, just include the following CSS file and everything will get some nice basic styling. ```html - + ``` @@ -42,7 +51,7 @@ The drop-in core of Sloth.css provides styles for all plain HTML elements withou If you want to create quick mockups without leaving your markup, you can use Sloth.css with utility classes. Just take a look at the docs to see, which ones are available. Those utility classes are a curated subset of Tailwind CSS classes (with a few exceptions and additions) and are meant to be extended and adapted by you for your project. I had several projects, where Tailwind was not necessary (or not possible or not wanted), so instead I used a convenient set of utility classes I curated myself and found, that those were mostly sufficient for those projects. So here they are. ```html - + ``` @@ -50,9 +59,10 @@ If you want to create quick mockups without leaving your markup, you can use Slo If you need more advanced elements on your page, you can use Sloth.css with prestyled components included. Badges, Cards, Modals, Tooltips and more - take a look at the complete list in the docs. -

- This is still work-in-progress. There will be more components coming soonTM -

+```html + + +``` ## License diff --git a/package.json b/package.json index 4b50fec..98a87d2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@devmount/sloth.css", "version": "0.4.0", - "description": "A drop-in utility component CSS-only library for lazy mammals.", + "description": "A drop-in utility component CSS library for lazy mammals.", "main": "sloth.min.css", "files": [ "./*.css", @@ -15,7 +15,8 @@ "build": "npm run build:complete && npm run build:core && npm run build:util && npm run build:comp", "publish": "npm run build && npm publish", "docs:serve": "npx @11ty/eleventy --serve", - "docs:build": "npx @11ty/eleventy" + "docs:build": "npx @11ty/eleventy", + "check:size": "gzip -c sloth.min.css | wc -c" }, "keywords": [ "css", diff --git a/src/sloth.comp.css b/src/sloth.comp.css index bef49b9..c276029 100644 --- a/src/sloth.comp.css +++ b/src/sloth.comp.css @@ -1,3 +1,4 @@ /* Components */ @import '_config.css'; +@import '_core.css'; @import '_components.css';