Class-Less CSS Design System Framework
Rams is a class-less css design system framework that utilizes the power of data attributes for styling components.
-
Start by downloading the repository or by cloning Rams
git clone https://github.com/jacobxperez/rams.git
-
Install dependencies on your machine with npm
npm install
Edit the variables, add custom modules and linked them to index.css for compiling.
- src/css
- core (important files for compiling)
- custom (add custom modules here)
- index.css (compile to produce the final CSS)
- settings.css (theme settings for font, colors, and more)
note: When starting a project with Rams we recommend not to edit the core files unless you are contributing code back to Rams. Any custom modules should go in the custom folder, this will help you separate your code from Rams.
On your terminal run these scripts to compile
npm run docs(locally runs documentation)npm run dev(serve current development build)npm run build(makes current build and sets url to "/" can be changed on package.json)
Rams uses data attributes instead of class to style components.
A two column grid with responsive columns:
<article data-grid="main">
<aside data-column="large-3 medium-3 small-4">
<!-- add content -->
</aside>
<section data-column="large-9 medium-9 small-4">
<!-- add content -->
</section>
</article>A simple navigation with flex-box:
<ul data-flex>
<li><a data-anchor data-state="active" href="">Active</a></li>
<li><a data-anchor href="">Anchor</a></li>
<li><a data-anchor href="">Anchor</a></li>
<li><a data-anchor href="">Anchor</a></li>
</ul>A navbar with home link and three tabs:
<nav data-navbar="top">
<ul data-flex>
<li><a data-anchor="navbar" href="">Home</a></li>
<li data-item="grow"></li>
<li><a data-anchor="navbar" href="">Anchor</a></li>
<li><a data-anchor="navbar" href="">Anchor</a></li>
<li><a data-anchor="navbar" href="">Anchor</a></li>
</ul>
</nav>A dropdown navigation menu:
<ul data-flex>
<li data-position="relative">
<a data-toggle="pop" data-anchor href="">
Dropdown
<span data-icon=""></span>
</a>
<ul data-dropbox="menu" data-position="left">
<li><a data-anchor="menu" href="">Anchor</a></li>
<li><a data-anchor="menu" href="">Anchor</a></li>
<li><a data-anchor="menu" href="">Anchor</a></li>
</ul>
</li>
</ul>Tooltip for displaying additional context on hover or on click:
<span data-toggle="tooltip">
Tooltip!
<span data-dropbox="tooltip">
<!-- add content -->
</span>
</span>Reveal extra page content like an accordion:
<ul data-box="border leading">
<li data-box="border-bottom">
<a data-toggle data-anchor data-flex>
<strong data-item="grow">Content</strong> <span data-icon=""></span>
</a>
<div data-dropbox data-box="padding-x padding-bottom">
<!-- add content -->
</div>
</li>
</ul>Includes several button styles:
<button data-button="primary">button</button>
<button data-button="outline">button</button>
<button data-button="primary outline">button</button>
<button data-button="link">button</button> These examples incorporate Rams with custom modules.
- Jacob Perez: I am a front-end web developer and designer.
- Lexica Ultralegible: A font designed for low-vision readers.
- Company: A single page website template for your business marketing
- Vaporwave Aesthetics: A template with Vaporwave Aesthetics
note: These examples may contain an older version of Rams.
If you are interested in contributing to this project, please start by reading our contributing guidelines.
Copyright (C) 2024 Jacob Perez
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.