rené is a straightforward yet powerful toolkit for your design and development tasks. this guide will take you through everything you need to get started, including easy steps to install, customize, and create themes. let's dive in and explore its capabilities together.
rene brings a fresh approach by focusing on clear, intentional design patterns. it's built to be the first truly AI-ready CSS framework, creating a perfect bridge between design and code.
<div class="column gap-m padding-l">
<h4>hello world</h4>
<p>clean & intentional design</p>
</div>
the framework uses descriptive class names that clearly communicate their purpose. this makes it naturally compatible with AI design-to-code workflows, while remaining intuitive enough for human developers.
<div class="animate slide-up ease-in duration-normal">
<div class="box-l padding-m radius-m">
<p>animated content</p>
</div>
</div>
rené's utility-first approach provides flexible building blocks that can be combined to create complex layouts. when needed, inline styles are supported for specific customizations without breaking the system's consistency.
<div class="box-l row gap-m padding-l" style="max-width: 600px">
<div class="box-s hover-up transition">
<p>flexible layout</p>
</div>
</div>
as both a library and framework, rené offers ready-to-use elements with a consistent, customizable structure. this creates a common ground for designers, developers, and AI tools to work together seamlessly.
<nav class="box-l row justify-stretch gap-m">
<a class="box-s padding-m radius-m
hover-grow transition">
menu item
</a>
</nav>
to install NPM (Node Package Manager), you will first need to install Node.js, which includes NPM.
go to the Node.js website and download the latest version of Node.js for your operating system.
install Node.js using the downloaded installer.
verify the installation by opening a terminal or command prompt and typing:
node -v
you should see the installed version number of Node.js.
npm install renecss
in this example, the <link> tag is placed within the <head> element to load the stylesheet from the specified URL. this will apply the styles from the stylesheet to the elements on the page, allowing you to control their appearance and layout.
<!DOCTYPE html>
<html>
<head>
<title>My
Website</title>
<link rel="stylesheet" href="https://unpkg.com/@rnbws/renecss/dist/rene.min.css"
/>
</head>
<body>
...
</body>
</html>
to create your own theme, copy the following code to a new theme.css file and override it with the following guidelines.
one of the cool things about rené is it already has light and dark modes. this means you can easily create designs that suit any user preference. the best part? any changes you make will reflect in both modes. so, you can focus on crafting great designs, knowing they'll shine in both light and dark settings.
:root {
--size-base: 4px;
--font-primary:"HelveticaNeue", "Helvetica
Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
}
[data-theme="theme-name"] {
--color-primary: #8080ff;
--color-secondary: #a640ff;
--color-primary-background: #000000;
--color-secondary-background: #0b0b0b;
--color-primary-foreground: #ffffff;
--color-secondary-foreground: #f3f3f3;
--color-positive: green;
--color-critical: orange;
--color-negative: red;
}
rené is built with the theory of relativity in mind - the base size is used as a reference point for other font sizes on the page. the entire layout system is applied relatively across everything and everywhere from one fundamental base size.
by changing this custom property, you're relatively increasing/decreasing the sizing of your entire design system.
--size-base: 4px;
rené supports one primary font that is applied across. yet you can easily add a secondary font and use it natively as you wish.
--font-primary:"HelveticaNeue", "Helvetica
Neue", Helvetica, Arial, "Lucida Grande",
sans-serif;
start by giving a name to your theme.
rené is built with four color groups in mind - brand colors, backgrounds/foregrounds colors, and semantic colors.
[data theme="light"] {
--color-primary: #0000cd;
--color-secondary: #800080;
--color-primary-background: #ffffff;
--color-secondary-background: #eeeeee;
--color-tertiary-background: #dddddd;
--color-primary-foreground: #111111;
--color-secondary-foreground: #222222;
--color-tertiary-foreground: #333333;
--color-positive: darkgreen;
--color-critical: gold;
--color-negative: orangered;
}