DEV Community

Cover image for Introducing ReadUse - A CSS Framework for Readable and Useable Content

Posted on

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.

πŸ—’οΈ Learn more on Github

GitHub logo Toheeb / readuse

A simple CSS framework for making Functional Designs


🚧 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…

🌟 Star the repo if you like the adventure ✌️

Top comments (0)