How to customize Shorthand with my own colors?

Override SCSS variables in your project's SCSS files before compilation; the framework uses variables for colors, fonts, and more, allowing deep customization as detailed in the documentation.

Shorthand vs Tailwind CSS: which is better for my project?

Shorthand is built with SCSS and offers more out-of-the-box colors and gradients, while Tailwind uses configuration files and has a larger ecosystem. Choose Shorthand if you prefer SCSS and extensive color options; Tailwind if you need more plugins and JavaScript integration.

Does Shorthand work with React or Vue frameworks?

Yes, it's CSS-only and can be used with any frontend framework by including the CSS files, but for component-based styling, you may need to pair it with utility classes or additional tools.

How to use the lite version for faster loading?

Include the lite.shorthand.min.css file from the dist folder or CDN; this version is under 16KB with monochrome styles, optimizing performance while keeping core utilities.

What responsive breakpoints does Shorthand use?

Shorthand includes built-in responsive utilities for height and aspect ratios, with breakpoints defined via SCSS variables; check the documentation for defaults and customization steps.

How to add custom fonts in Shorthand?

Shorthand includes 36 Google fonts via utility classes; for custom fonts, add your own CSS or override font-related SCSS variables during compilation to integrate them seamlessly.

Open-Awesome

Shorthand Framework

SCSS

A utility-based CSS framework built with SCSS that enables designing without writing custom CSS.

Visit Website GitHub

256 stars19 forks0 contributors

What is Shorthand Framework?

Shorthand is a utility-based CSS framework built with SCSS that enables developers to design user interfaces without writing custom CSS code. It provides a comprehensive set of pre-defined classes for layout, colors, typography, and interactive effects, along with ready-to-use component styles. The framework emphasizes customization through SCSS variables and offers both lightweight and full-featured distributions.

Target Audience

Frontend developers and designers who want a utility-first CSS framework for rapid UI prototyping and production development, especially those familiar with SCSS customization.

Value Proposition

Developers choose Shorthand for its extensive utility coverage, more color and gradient options than other frameworks, and the ability to customize everything through SCSS without JavaScript dependencies. Its lightweight lite version (under 16KB) and included Google fonts provide a balanced blend of performance and design flexibility.

Overview

Utility based css framework built with SCSS.

Use Cases

Best For

Rapid prototyping of user interfaces without writing custom CSS
Building responsive layouts with utility classes for height and aspect ratios
Creating gradient text, backgrounds, and borders with extensive color options
Implementing Apple-like blur effects and other filter-based visuals
Developing lightweight websites with the sub-16KB monochrome distribution
Customizing CSS frameworks through SCSS variables and mixins

Not Ideal For

Projects requiring interactive JavaScript components like modals or carousels without additional libraries
Teams using component-based frameworks like React or Vue that prefer CSS-in-JS solutions over utility classes
Static sites without build tools that cannot compile SCSS for advanced customization

Pros & Cons

Pros

Utility-First Efficiency

Enables rapid UI development without writing custom CSS, as the README emphasizes designing 'almost anything without writing a css code' through pre-defined classes.

Extensive Color Palette

Offers more color options than other frameworks, including two gray sets and 250+ gradients for text, backgrounds, and borders, providing rich visual flexibility.

Lightweight Distribution

Includes a lite version under 16KB for monochrome styling, ideal for performance-critical projects while maintaining core utility classes.

Advanced Visual Effects

Supports filters like Apple-like blurs and content placeholders with the 'in-progress' class, enhancing modern UI design without extra CSS.

Cons

No JavaScript Interactivity

As a CSS-only framework, it lacks built-in JS for dynamic components, requiring separate libraries for features like dropdowns or modals, which adds complexity.

SCSS Dependency for Customization

Full customization relies on SCSS variables and mixins, necessitating a build process and SCSS knowledge, which can be a barrier for teams without this setup.

Potential HTML Bloat

The utility-first approach can lead to verbose HTML with many classes, making code harder to maintain in large-scale projects compared to component-based styling.

Open Source Alternative To

Shorthand Framework is an open-source alternative to the following products:

Bootstrap

A popular open-source front-end framework for developing responsive, mobile-first websites and web applications.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces by composing small, single-purpose classes directly in your markup.

Frequently Asked Questions

Related Projects

Tailwindcss

A utility-first CSS framework for rapid UI development.

Stars96,032

Forks5,407

Last commit7 days ago

Material-components-web

Modular and customizable Material Design UI components for the web

Stars17,068

Forks2,135

Last commit1 year ago

Strawberry

A new flexbox based CSS micro-framework.

Stars76

Forks4

Last commit7 years ago

Hasser CSS

A lite and flexible CSS framework (Inspired by Skeleton CSS)

Stars5

Forks0

Last commit6 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub