Repository files navigation

Class-Less CSS Design System Framework

• About
• Getting Started
  • Build
  • Compile
• Features
  • Grid System
  • Navigation
  • Dropdown
  • Buttons
• Examples
• Contributing
• LICENSE

Rams is a class-less css design system framework that utilizes the power of data attributes for styling components.

1. Start bydownloading the repository or by cloning Rams

   git clone https://github.com/jacobxperez/rams.git

2. Install dependencies on your machine withnpm

   npm install

Edit thevariables, addcustom modules and linkedthem toindex.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 recommendnot to edit thecore files unless you arecontributing code back to Rams. Any custom modules should go in thecustom 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 onpackage.json)

Rams uses data attributes instead of class to style components.

A two column grid with responsive columns:

<articledata-grid="main"><asidedata-column="large-3 medium-3 small-4"><!-- add content --></aside><sectiondata-column="large-9 medium-9 small-4"><!-- add content --></section></article>

A simple navigation with flex-box:

<uldata-flex><li><adata-anchordata-state="active"href="">Active</a></li><li><adata-anchorhref="">Anchor</a></li><li><adata-anchorhref="">Anchor</a></li><li><adata-anchorhref="">Anchor</a></li></ul>

A navbar with home link and three tabs:

<navdata-navbar="top"><uldata-flex><li><adata-anchor="navbar"href="">Home</a></li><lidata-item="grow"></li><li><adata-anchor="navbar"href="">Anchor</a></li><li><adata-anchor="navbar"href="">Anchor</a></li><li><adata-anchor="navbar"href="">Anchor</a></li></ul></nav>

A dropdown navigation menu:

<uldata-flex><lidata-position="relative"><adata-toggle="pop"data-anchorhref="">      Dropdown<spandata-icon="&#xe043;"></span></a><uldata-dropbox="menu"data-position="left"><li><adata-anchor="menu"href="">Anchor</a></li><li><adata-anchor="menu"href="">Anchor</a></li><li><adata-anchor="menu"href="">Anchor</a></li></ul></li></ul>

Tooltip for displaying additional context on hover or on click:

<spandata-toggle="tooltip">  Tooltip!<spandata-dropbox="tooltip"><!-- add content --></span></span>

Reveal extra page content like an accordion:

<uldata-box="border leading"><lidata-box="border-bottom"><adata-toggledata-anchordata-flex><strongdata-item="grow">Content</strong><spandata-icon="&#xe045;"></span></a><divdata-dropboxdata-box="padding-x padding-bottom"><!-- add content --></div></li></ul>

Includes several button styles:

<buttondata-button="primary">button</button><buttondata-button="outline">button</button><buttondata-button="primary outline">button</button><buttondata-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 ourcontributing guidelines.

Copyright (C) 2024Jacob Perez

Licensed under theApache 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.