Unnamed

A colorful css framework made by a human not an Ai

Github

Easy to use

Choose what to use, either use the prepared classes on your html file or Clone the repository and import only the Sass or Css elements you want.

Easy to edit

Feel free to check the code to understand how easily you can add your favorite color !

Easy to contribute

Yep, feel free to contribute !

Installation

Include one of these links:

<link rel="stylesheet" href="http://smakosh.com/unnamed.css">

Minimized

<link rel="stylesheet" href="http://smakosh.com/unnamed.min.css">

Or download both:

Download

Or use this starter repository:

git clone https://github.com/smakosh/Unnamed-getting-started.git

Buttons

Disabled buttons

There are 3 types of buttons and you can change the colors just by changing the color name, something like this

for black use

.gradient-black

for purple use

.gradient-purple

for orange use

.gradient-orange

for green use

.gradient-green

For the outlined button use these classes

for black use

.black-btn

for purple use

.purple-btn

for orange use

.orange-btn

for green use

.green-btn

These are the available for now, feel free to visit Grabient to pick up more colors & add your own classes !

Buttons

.btn btn-hover btn-primary gradient-black

.btn btn-hover btn-primary gradient-purple

.btn btn-hover btn-rounded gradient-purple

.btn btn-rounded btn-outlined purple-btn

Forms

Same with inputs you can change the colors just by changing the color name, something like this

for black use

.black-input

for purple use

.purple-input

for orange use

.orange-input

for green use

.green-input

You can change also the icon inside each input, something like this

for email icon use

.email-icon

for user icon use

.user-icon

for edit icon use

.edit-icon

These icons & colors are the available ones for now, feel free to add your custom class and simply paste ur font icon as shown in the code bellow

Input text & email

<div class="input-field purple-input">
<span class="user-icon"></span>
<input type="text" />
</div>

<div class="input-field purple-input">
<span class="email-icon"></span>
<input type="email" placeholder="Enter your email..." />
</div>

Select

<div class="input-field purple-input">
<select>
<option value="">Unnamed</option>
<option value="">Unnamed</option>
<option value="">Unnamed</option>
</select>
</div>

Text area

<div class="input-field purple-input">
<span class="edit-icon"></span>
<textarea></textarea>
</div>

Checkboxes & radio buttons

Same here you can change the colors just by changing the color name, something like this

for black use

.black-checkbox

for purple use

.purple-checkbox

for orange use

.orange-checkbox

for green use

.green-checkbox

These are the available for now, feel free to visit Grabient to pick up more colors & add your own classes !

Checkbox

<label>
<input type="checkbox" class="green-checkbox"/>
<span></span>
</label>

Radio buttons

<label>
<input type="radio" class="green-checkbox"/>
<span></span>
</label>

Cards

Card header

Card header

Drone picture was taken by Luca Steeb !

You can remove the hover effect by removing this class

.card-hoverable


Full card

<div class="card card-hoverable">
<div class="card-header">
<h4>Card header</h4>
</div>
<div class="card-img">
<img src="images/drone2.jpg">
</div>
<div class="card-footer">
<h4>Card footer</h4>
</div>
</div>

Card with header only

<div class="card card-hoverable">
<div class="card-header">
<h4>Card header</h4>
</div>
<div class="card-img">
<img src="images/drone2.jpg">
</div>
</div>

Card with footer only

<div class="card card-hoverable">
<div class="card-img">
<img src="images/drone2.jpg">
</div>
<div class="card-footer">
<h4>Card footer</h4>
</div>
</div>

Responsive image

<div class="responsive-image">
<img src="images/drone2.jpg">
</div>

Grid

1

2

3

4

5

6

7

8

9

10

11

12

Don't forget to put columns inside a
.row
class !

Multiply the code inside the row dive by 12 to get the UI shown above

<div class="row">
<div class="column xlarge-1 large-2 medium-3 small-12">
<div class="columns">
<p>1</p>
</div>
</div>
</div>

2 columns

2 columns

2 columns

2 columns

2 columns

2 columns

Multiply the code inside the row dive by 6 to get the UI shown above

<div class="row">
<div class="column xlarge-2 medium-4 small-12">
<div class="columns">
<p>2</p>
</div>
</div>
</div>

3 columns

3 columns

3 columns

3 columns

Multiply the code inside the row dive by 4 to get the UI shown above

<div class="row">
<div class="column xlarge-3 medium-6 small-12">
<div class="columns">
<p>3 columns</p>
</div>
</div>
</div>

4 columns

4 columns

4 columns

Multiply the code inside the row dive by 3 to get the UI shown above

<div class="row">
<div class="column xlarge-4 small-12">
<div class="columns">
<p>4 columns</p>
</div>
</div>
</div>

5 columns

7 columns

<div class="row">
<div class="column xlarge-5 small-12">
<div class="columns">
<p>5 columns</p>
</div>
</div>

<div class="column xlarge-7 small-12">
<div class="columns">
<p>7 columns</p>
</div>
</div>
</div>

6 columns

6 columns

<div class="row">
<div class="column xlarge-6 small-12">
<div class="columns">
<p>6 columns</p>
</div>
</div>

<div class="column xlarge-6 small-12">
<div class="columns">
<p>6 columns</p>
</div>
</div>
</div>

7 columns

5

<div class="row">
<div class="column xlarge-7 small-12">
<div class="columns">
<p>7 columns</p>
</div>
</div>

<div class="column xlarge-5 small-12">
<div class="columns">
<p>5 columns</p>
</div>
</div>
</div>

8 columns

4

<div class="row">
<div class="column xlarge-8 small-12">
<div class="columns">
<p>8 columns</p>
</div>
</div>

<div class="column xlarge-4 small-12">
<div class="columns">
<p>4 columns</p>
</div>
</div>
</div>

9 columns

3

<div class="row">
<div class="column xlarge-9 small-12">
<div class="columns">
<p>9 columns</p>
</div>
</div>

<div class="column xlarge-3 small-12">
<div class="columns">
<p>3 columns</p>
</div>
</div>
</div>

10 columns

2

<div class="row">
<div class="column xlarge-10 small-12">
<div class="columns">
<p>10 columns</p>
</div>
</div>

<div class="column xlarge-2 small-12">
<div class="columns">
<p>2 columns</p>
</div>
</div>
</div>

11 columns

1

<div class="row">
<div class="column xlarge-11 small-12">
<div class="columns">
<p>11 columns</p>
</div>
</div>

<div class="column xlarge-1 small-12">
<div class="columns">
<p>1 columns</p>
</div>
</div>
</div>

12 columns

<div class="row">
<div class="column xlarge-12 small-12">
<div class="columns">
<p>12 columns</p>
</div>
</div>
</div>

Useful classes

To center, left or right align text use these classes:

To center it

.center-text

To left align it

.left-text

To right align it use

.right-text

To hide elements:

To hide on tablet and down

.hide-tablet-down

To hide on mobile

.hide-mobile

To hide on any screen size

.hide