ReadUse

🚧 This project is under development. 🚧

Born out of a personal adventure. The progress, and direction of this project will be based on the Guides I write towards the styling needs of my website, where I use it live.

I'm designing this in public. You can follow along on Twitter at @toheebdotcom.

Why ReadUse?

When styling websites, we repeatedly do the following to make content readable and useable.

• maintain aesthetics such as the hierarchy of spacing, font sizes, etc.
• lay content multidimensionally. From n-column layout to sticky footer components.

I call these Functional Styles. Every website needs them. And ReadUse abstracts these styles so you can focus on making your designs unique, through your awesome creativity!

How ReadUse compares to other CSS Frameworks?

Here's how it compares to Reset stylesheets, Component, Utility or Classless CSS frameworks:

• Instead of using reset stylesheets, you can enjoy having aesthetic styles
• If you worry about your design looking Bootstrap(py) or Tailwind(y). ReadUse won't interfere with your creativity.
• Rather than minimal designs with Classless Frameworks, you get a lot more!

Expectations

There're 2 parts to expect:

• Drop-and-use stylesheet for good looking and operable webpage contents (current focus)
• Layout utility stylesheet for multidimensional contents

NB: Both will be customizable with design principles intact.

Usage

ReadUse is in its initial development. I only use it in production because it's an adventure for me. I get to prioritize features progressively.

via CDN

You can load the CSS file via JSDELIVR or UNPKG. Watch out for the version. 0.1.0 loads an "hello world" CSS file (see the body styles)

JSDELIVR

https://cdn.jsdelivr.net/npm/[email protected]/dist/css/readuse.min.css

UNPKG

https://unpkg.com/[email protected]/dist/css/readuse.min.css

via Package Manager

NPM

npm install readuse

Yarn

yarn add readuse

After installation, you can import the CSS file into your project if you're using a file loader:

@import 'readuse/dist/css/readuse.css

Otherwise, just link to it via

./node_modules/readuse/dist/css/readuse.css

How to Contribute

This adventure project is inspired and depends on the guides I write on toheeb.com.

I'll be using Issues to discuss the features. You can contribute by sharing your view in the comment section of each feature.