Skip to content

Class-Less CSS Design System Framework that Utilizes the Power of Data Attributes for Styling Components.

License

Notifications You must be signed in to change notification settings

jacobxperez/rams

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Class-Less CSS Design System Framework


rams logo

Table of Contents

About

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

Getting Started

  1. Start by downloading the repository or by cloning Rams

    git clone https://github.com/jacobxperez/rams.git
  2. Install dependencies on your machine with npm

    npm install

Build

Edit the variables, add custom modules and linked them to index.css for compiling.

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.

Compile

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)

Features

Rams uses data attributes instead of class to style components.

Grid System

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>

Navigation

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>

Dropdown

A dropdown navigation menu:

<ul data-flex>
  <li data-position="relative">
    <a data-toggle="pop" data-anchor href="">
      Dropdown 
      <span data-icon="&#xe043;"></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="&#xe045;"></span>
    </a>
    <div data-dropbox data-box="padding-x padding-bottom">
      <!-- add content -->
    </div>
  </li>
</ul>

Buttons

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> 

Examples

These examples incorporate Rams with custom modules.

note: These examples may contain an older version of Rams.

Contributing

If you are interested in contributing to this project, please start by reading our contributing guidelines.

LICENSE

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.