rené uses elements and class names as simple yet effective building blocks. it's about getting more done with less. it provides the essentials, helping designers and developers to create diverse designs from minimal components.
rené's typography system is built around rem units. this means that all font sizes are relative to the root element. it allows for consistency in design, making it look good on all devices. also, using rem units can enhance accessibility, as it respects user preferences for default font sizes.
the following example shows how typography is used in a relative way
h1 {
font-size: 5.28rem; /* 6rem * 0.88 */
line-height: 0.95;
}
Write Something
Write Something
Write Something
rené uses semantic colour naming. this means colours are named for their purpose, not their look. so, "error" or "error-red" could be names for colours used in messages.
this makes the stylesheet easier to understand and maintain, and reduces confusion in design.
use 'view' when you want to fill the viewport, giving you control over the visible area.
use '.panel' for wrapping related content, fostering content coherence.
use '.page' for structuring an entire webpage, providing a straightforward layout.
use '.sticky' to keep elements in view while scrolling, enhancing user navigation.
use '.hidden' to remove elements from the display, managing content visibility without removing them from the document flow.
use '.scrollable' for making overflowing content scrollable, ensuring full content accessibility.
use '.hidden-on-mobile' to hide certain elements on mobile view, tailoring user experience per device type.
use 'header' for top-level navigation and branding, offering an intuitive user interface.
use 'nav' for main navigation links, directing users across the site.
use 'footer' for secondary information like copyright notices, enhancing site credibility.
use box when you want to stack items in a specific way, offering flexibility in arranging your content.
use 'hr' to separate sections or elements visually, improving content readability.
rené's animation system provides simple, semantic animation classes. the base .animate class sets default timing, while modifiers let you customize duration, easing, and animation types like fade, slide, or rotate.
animations can be controlled with utility classes for iteration (once, infinite), direction (reverse, alternate), and state (running, paused). transitions and transforms are also available for hover effects.