Skip to content

Commit

Permalink
✅ 0.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
devmount committed Nov 24, 2024
1 parent 1693f7b commit 1f01c6e
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 19 deletions.
27 changes: 14 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,28 @@
<p align="center">A drop-in utility component CSS library for lazy mammals.<br />Created by <a href="https://github.com/devmount" target="_blank">devmount</a>.</p>
</p>

> [!IMPORTANT]
> Sloth.css is still heavily work-in-progress. The package is not yet published.
Check [the documentation](https://slothcss.devmount.com) to see it live in action. Sloth.css aims to be:

Check [the documentation](https://slothcss.devmount.com) to see it in action.
- Lightweight (7.3KB 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 (drop-in core styles, utility classes and CSS components):
See the [installation instructions](https://slothcss.devmount.com/getting-started/installation) for different setup options. Add it to your project's dependencies:

```bash
npm i @devmount/sloth.css
```

Or for a quick start include the following CSS file in your HTML head to get the complete package (drop-in core styles, utility classes and CSS components):

```html
<link rel="stylesheet" href="https://unpkg.com/@devmount/sloth.css@^0/sloth.min.css" />
```

If you just want to use the drop-in core styles, the utility classes or the CSS components only, you can use one of these:
If you just want to use the drop-in core styles, the utility classes or the CSS components separately, you can use one of these:

```html
<link rel="stylesheet" href="https://unpkg.com/@devmount/sloth.css@^0/sloth.core.min.css" />
Expand All @@ -32,14 +40,7 @@ If you just want to use the drop-in core styles, the utility classes or the CSS

## Features

Sloth.css can be used as drop-in CSS library, or additionally with curated utility classes or even with a set of handcrafted ready-to-copy components. Styles are opinionated (then again: which styles are not), and crafted to prioritize visual usability over trends such as flat design. For example: Elements where you type in (like input fields) are actually inset, elements that are clickable (like buttons) are actually outstanding, tabs are connected to the content they activate etc.

Also, Sloth.css aims to be:

- Lightweight (3.8KB gzipped)
- Responsive and mobile-friendly
- Beautiful per default but customisable
- Working for all modern browsers
Sloth.css can be used as drop-in CSS library, or with a curated set of utility classes or even with a collection of handcrafted ready-to-copy-paste components. Styles are opinionated (then again: which styles are not), and crafted to prioritize visual usability over trends such as flat design. For example: Elements where you type in (like input fields) are actually inset, elements that are clickable (like buttons) are actually outstanding, tabs are connected to the content they activate etc.

## License

Expand Down
1 change: 1 addition & 0 deletions docs/_includes/default.njk
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@
<div>
<div class="text-xl font-semibold">Sloth.css</div>
<code class="text-muted">v{{ meta.version }}</code>
<span class="text-muted text-xs">&beta;</span>
</div>
</div>
<div class="actions">
Expand Down
17 changes: 15 additions & 2 deletions docs/pages/getting-started/changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,20 @@ tags: release version changes

Sloth.css uses [semantic versioning](https://semver.org/) to indicate breaking changes, major changes with downward compatibility or minor changes.

### 0.2.0-beta
### v0.3.0 <span class="text-muted text-lg">β</span>

- ➕ Component: Badge variants ([#46](https://github.com/devmount/sloth.css/pull/46))
- 📜 Docs: Secondary menu ([#47](https://github.com/devmount/sloth.css/pull/47))
- ➕ Component: Input ([#48](https://github.com/devmount/sloth.css/pull/48))
- 🔨 Border radius config ([#49](https://github.com/devmount/sloth.css/pull/49))
- ➕ Component: Tag ([#50](https://github.com/devmount/sloth.css/pull/50))
- ➕ Component: Sequence ([#51](https://github.com/devmount/sloth.css/pull/51))
- ➕ Component: Tooltip ([#52](https://github.com/devmount/sloth.css/pull/52))
- ➕ Component: Tab ([#53](https://github.com/devmount/sloth.css/pull/53))
- ➕ Component: Modal ([#54](https://github.com/devmount/sloth.css/pull/54))
- 🔨 Docs: Sidebar enhancement ([#55](https://github.com/devmount/sloth.css/pull/55))

### v0.2.0 <span class="text-muted text-lg">β</span>

- 📜 Add documentation ([#1](https://github.com/devmount/sloth.css/pull/1), [#32](https://github.com/devmount/sloth.css/pull/32), [#38](https://github.com/devmount/sloth.css/pull/38))
- 🚀 Build tool ([#2](https://github.com/devmount/sloth.css/pull/2), [#15](https://github.com/devmount/sloth.css/pull/15))
Expand All @@ -28,6 +41,6 @@ Sloth.css uses [semantic versioning](https://semver.org/) to indicate breaking c
- ⚡️ Performance optimizations ([#33](https://github.com/devmount/sloth.css/pull/33))
- ➕ Input invalid state ([#39](https://github.com/devmount/sloth.css/pull/39))

### 0.1.0-beta
### v0.1.0 <span class="text-muted text-lg">β</span>

- 🚀 Initial release
4 changes: 2 additions & 2 deletions docs/pages/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Extract the CSS files you need and include them in your markup or your bundler.
If you don’t want to use the CDN or manual download, you can install Sloth.css via npm with the following command.

```bash
npm install @devmount/sloth.css
npm i @devmount/sloth.css
```

Now you need to make one of the CSS files under `node_modules/sloth.css/` available to your app or include it in your build step.
Now you need to make one of the CSS files under `node_modules/@devmount/sloth.css/` you want available to your app or include it in your build step or bundler.
2 changes: 1 addition & 1 deletion eleventy.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import markdownit from "markdown-it";
import anchor from "markdown-it-anchor";
import tocPlugin from "eleventy-plugin-toc";

const VERSION = '0.2.0';
const VERSION = '0.3.0';

export default function (eleventyConfig) {
// Get utility sections
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@devmount/sloth.css",
"version": "0.2.0",
"version": "0.3.0",
"description": "A drop-in utility component CSS-only library for lazy mammals.",
"main": "sloth.min.css",
"files": [
Expand Down

0 comments on commit 1f01c6e

Please sign in to comment.