Introducing ReadUse - A CSS Framework for Readable and Useable Content

Earlier, I shared my plan to design my website in public.

The adventure is to write guides that'll design the website itself, in real time. At the end, I'll have content on web design that uses this very website as a capstone project.

Wouldn't that be fun?

---

To track how the website's visual will evolve over time, I decided to branch off those styles to a package.

And to make this package useful to anyone, the styles will only be for making contents on a webpage readable and useable. Hence the name: readuse.

Here's how I see websites. They need to be:

• readable & useable
• creative & unique

ReadUse, a CSS Framework, will take care of the readability and useability part of a website. And let the designer go nuts in making their website unique to their taste. Letting your creativity shine 😂

ReadUse CSS framework will contain two parts:

• A drop-in stylesheet that'll will format content to aid User Experience. Using global styles which aren't bad unless misused
• A Layout Utility stylesheet that contains common layout components.

All these make up the Functional layer of any website. How website differs is by the decorative layer.

Other CSS Frameworks do both. The result of which makes websites look similar. I want ReadUse to be Creativity-Agnostic. I hope I got that grammar combo right. You get my point anyways 😆

Here's my plan:

💡 I'll be using Github Issues to write and brainstorm on to-dos. A set of them makes a milestone ready for release.

✍️ My site will contain detailed guides of my research on why & how I'm styling it

⚡️ You get to see the result of the framework on this very website as well. Everytime!

Right now, It has crossed its first milestone 🚀

v0.1.0 release is a sanity test that says "hello world" 😂

2nd milestone, v0.2.0 release, will provide well-enough styles to make articles I'll write fairly easy to read.

While future version will provide better UX.

I'm figuring this out on the go! It's my first open source project! And I'm using it to dive deep in CSS. It isn't ready for public use yet.

💡 Ask/Teach me anything, it'll help me learn more

👉 Follow @toheebdotcom for updates.

2 👋

@toheebdotcom

Last weekend, I published readuse to @npmjs 🎉

My goal is to dive deep in learning CSS for UI Design by doing.

👉 This CSS Framework will contain ONLY styles for readable & useable contents. It WON'T interfere with the designer's creativity

Learn with me or see how things go:

15:00 PM - 04 Oct 2021

🗒️ Learn more on Github

Toheeb / readuse

A simple CSS framework for making Functional Designs

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…

View on GitHub

🌟 Star the repo if you like the adventure ✌️