RGOS FRAMEWORK

Ripen.css, an initiative of the RGOS

RGOS Framework is a CSS framework for building web-based applications that have a similar look and feel to the Ripen OS operating system. It is open source and MIT licensed.
The RGOS Framework includes a number of pre-built components, such as buttons, menus, and dialog boxes. It also includes a number of utility classes that can be used to style elements in a consistent way.

Installation

To use the Ripen OS Framework, you need to import the CSS files into your project. You can then use the pre-built components and utility classes to style your elements.

The following options would guide you to use the framework:

Option 1: For locally storing and accessing the desired framework module, please head to: The Releases.

Option 2: For a more reliable import of the desired framework module without local storage, copy-paste any of the below code in your HTML:

ripen.css:

<link rel="stylesheet" href="https://raw.githubusercontent.com/ripenos/ripen.css/main/ripen.css">

ripen.min.css:

<link rel="stylesheet" href="https://raw.githubusercontent.com/ripenos/ripen.css/main/ripen.min.css">

Components

Basic

Heading 1 with Title Class

Heading 1

Heading 2

Heading 2 with Sub-header Class

Heading 3

Heading 4

Heading 5

Heading 6

Link 1 | Link 2 | Link 3

Paragraph - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, dignissimos doloribus laudantium consectetur enim repellat! Ipsam facere commodi corporis ut deleniti earum? Nihil ducimus ex amet nobis, minus asperiores sit.

Inputs

1. Button

<button> button type 1 </button>

<button class="button2"> button type 2 </button>

<button class="button3"> button type 3 </button>

2. Textbox

<input type="text" placeholder="textbox" class="textInput">

<input type="text" placeholder="textbox" class="textInput block">

<input type="text" placeholder="textbox" class="textInput expand">

3. Sliders

<input type="range" min="1" max="100" value="0" class="slider">

<input type="range" min="1" max="100" value="0" class="slider2">

4. Extra

a. File Upload

<input type="file" name="fileUpload" class="FileInsert">

b. switches

<label class="switch">
    <input type="checkbox">
    <span class="sliderChecBox"></span>
</label>

<label class="switch">
<input type="checkbox">
<span class="sliderChecBox round"></span>
</label>

Media

<img src="https://raw.githubusercontent.com/......./ripenOs.jpg">

<span class="imgHover"><img src="https://raw.githubusercontent.com/......./ripenOs.jpg"> </span>

Extra

<hr>

<iframe src="https://example.com" frameborder="0"></iframe>