Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shorthandcss/shorthand

Utility based css framework built with SCSS.
https://github.com/shorthandcss/shorthand

css css-framework css3 scss

Last synced: about 1 month ago
JSON representation

Utility based css framework built with SCSS.

Host: GitHub
URL: https://github.com/shorthandcss/shorthand
Owner: shorthandcss
Created: 2020-02-14T06:59:47.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2022-12-10T18:12:35.000Z (about 2 years ago)
Last Synced: 2024-11-11T19:06:56.490Z (about 1 month ago)
Topics: css, css-framework, css3, scss
Language: SCSS
Homepage: https://shorthandcss.bansal.io
Size: 1.87 MB
Stars: 256
Watchers: 4
Forks: 18
Open Issues: 17
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

Awesome-CSS-Resources - shorthand:

README

# Shorthand

Shorthand is a CSS framework and does not include any javascript. You can customize the framework by using `.scss` only.

## Size

Dist | File | URL
|---|---|---|
Lite | lite.shorthand.min.css | ![](https://img.badgesize.io/shorthandcss/shorthand/master/dist/lite.shorthand.min.css.svg?compression=brotli)
Full | shorthand.min.css | ![](https://img.badgesize.io/shorthandcss/shorthand/master/dist/shorthand.min.css.svg?compression=brotli)

## Features

- Design almost anything without writing a css code.
- Ready to use default styles for some frequently used elements like form, table and spinner.
- Two style files available monochrome and multicolor.
- Lite distribution style in with gray colors only, available under `16KB`.
- Two gray color sets available gray and slategray.
- Make interactive UI using transitions and transformations.
- 36 Google fonts are already included.
- Take advantage of filters. It’s easy to make Apple like blur effect.
- More color options than any other popular framework.
- Gradient text, background and border color. 250+ Gradient color options.
- Responsive height. Maintain aspect ratio of block `1:1`, `1:2`, `4:3` and more.
- Make content placeholder with `in-progress` class.

## Quick start

Several quick start options are available:

1. [Download the latest release](https://github.com/shorthandcss/shorthand/releases).
2. Clone the repo: `git clone https://github.com/shorthandcss/shorthand.git`.
3. Install with npm: `npm install shorthandcss`.
4. Use [CDN](https://www.jsdelivr.com/package/npm/shorthandcss)

## Develop

Clone the repo from Github and install dependencies through npm.

``` bash
git clone https://github.com/shorthandcss/shorthand.git
cd shorthand
npm install
```

Run the build command to build `dist` files

`npm run build`

## Documentation

Docs can be found at https://shorthandcss.bansal.io/docs

## License