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.
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!
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!
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.
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.
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)
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/readuse.min.css
https://unpkg.com/[email protected]/dist/css/readuse.min.css
npm install readuse
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
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.