# Fedora.css

#### Minimalis CSS Framework

### Alert

##### Just Alert

Default Alert Primary Alert Warning Alert Danger Alert Success Alert Info Alert Grey Alert Light Alert White Alert Black Alert Dark Alert
`
<label class="alert"> Default </label>
<label class="alert primary"> Primary</label>
<label class="alert warning"> Warning </label>
<label class="alert danger"> Danger </label>
<label class="alert info"> Info </label>
<label class="alert grey"> Grey </label>
<label class="alert light"> Light </label>
<label class="alert white"> White </label>
<label class="alert black"> Black </label>
<label class="alert dark"> Dark </label>
`

### Button

##### Different types and color

`
<button class="btn"> Default </button>
<button class="btn primary"> Primary</button>
<button class="btn warning"> Warning </button>
<button class="btn danger"> Danger </button>
<button class="btn info"> Info </button>
<button class="btn grey"> Grey </button>
<button class="btn light"> Light </button>
<button class="btn white"> White </button>
<button class="btn black"> Black </button>
<button class="btn dark"> Dark </button>
<button class="btn dark disabled="disabled"> Disabled </button>
<a href="#" class="btn"> Link Button </a>
`

##### Change Sizes

`
<button class="btn small"> Small </button>
<button class="btn"> Default </button>
<button class="btn large"> Large </button>
<button class="btn xlarge"> XLarge </button>
<button class="btn jumbo"> Jumbo </button>
`

##### Block Button

`
<button class="btn block"> default block </button>
<button class="btn primary block"> primary block </button>
`

### Color

##### Color and Background

.bg-primary
.bg-default
.bg-warning
.bg-danger
.bg-success
.bg-info
.bg-grey
.bg-light
.bg-white
.bg-black
.bg-dark
.text-primary
.text-default
.text-warning
.text-danger
.text-success
.text-info
.text-grey
.text-light
.text-white
.text-black
.text-dark
`
<p class="text-white bg-primary"> Text going white and background going primary </p>
`

### Container

##### container with responsive feature.

`
<div class="container"> Responsive Container </div>
` *note, container adds 16px left and right paddings.

##### full width container.

`
<div class="container-full"> Full width container </div>
`

### Display

##### Positioning content

.top-left
.top-center
.top-right
.middle-left
.middle-center
.middle-right
.bottom-left
.bottom-center
.bottom-right

##### Positioning inside container

`
<div class="container relative">
<div class="top-left">
Content positioning on top left
</div>
</div>
`

##### Without Container

`
<div class="top-left">
Content positioning on top left
</div>
`

### Grid

##### 12 grids responsive base layout

.col-8, .sm-12, .md-6, .lg-6, .xl-6, .xxl-8
.col-4, .sm-12, .md-6, .lg-6, .xl-6, .xxl-4
.col-4, .sm-12, .md-6, .lg-6, .xl-6, .xxl-4
.col-8, .sm-12, .md-6, .lg-6, .xl-6, .xxl-8
.col-6, .sm-12, .md-6, .lg-6, .xl-6, .xxl-6
.col-6, .sm-12, .md-6, .lg-6, .xl-6, .xxl-6

##### Grid Rules

`<div class="grid">
<div class="set col-8 sm-12 md-6 lg-6 xl-6 xxl-8">
default 66.6%
small 100%
medium 50%
large 50%
xlarge 66.6%
</div>
<div class="set col-4 sm-12 md-6 lg-6 xl-6 xxl-4">
default 33.3%
small 100%
medium 50%
large 50%
xlarge 33.3%
</div>
</div>`

#### Grid Classes

Class | Description
--- | ---
.grid | Container to grid
.set | Defines Grid

#### Default Display

Class | Width
--- | ---
.col-1 | 8.333%
.col-2 | 16.888%
.col-3 | 25%
.col-4 | 33.333%
... | ...
.col-12 | 100%

#### Small Display (576px)

Class | Width
--- | ---
.sm-1 | 8.333%
.sm-2 | 16.888%
.sm-3 | 25%
.sm-4 | 33.333%
... | ...
.sm-12 | 100%

#### Medium Display (768px)

Class | Width
--- | ---
.md-1 | 8.333%
.md-2 | 16.888%
.md-3 | 25%
.md-4 | 33.333%
... | ...
.md-12 | 100%

#### Large Display (992px)

Class | Width
--- | ---
.lg-1 | 8.333%
.lg-2 | 16.888%
.lg-3 | 25%
.lg-4 | 33.333%
... | ...
.lg-12 | 100%

#### Extra Large Display (1200px)

Class | Width
--- | ---
.xl-1 | 8.333%
.xl-2 | 16.888%
.xl-3 | 25%
.xl-4 | 33.333%
... | ...
.xl-12 | 100%

#### More Extra Large Display (1456px)

Class | Width
--- | ---
.xxl-1 | 8.333%
.xxl-2 | 16.888%
.xxl-3 | 25%
.xxl-4 | 33.333%
... | ...
.xxl-12 | 100%

#### Offset

Push in the columns

off-2 col-10
off-4 col-8
off-6 col-6
`
<div class="grid">
<div class="set off-6 off-md-2 off-lg-4 off-xl-4 off-xxl-6 col-6 col-md-10 col-lg-8 col-xl-8 col-xxl-6">
Content goes here
</div>
</div>
`

Class | Margin Left
--- | ---
.off-1 | 8.333%
.off-2 | 16.666%
.off-3 | 33.333%
.off-4 | 25%
... | ...
.off-12 | 100%

- For small screen : `.off-sm-*`
- For medium screen : `.off-md-*`
- For large screen : `.off-lg-*`
- For xlarge screen : `.off-xl-*`
- For xxlarge screen : `.off-xxl-*`

### Input

##### Form Input

Use class `.input` to create basic input

`<input class="input">`

Add class `.full` after class `.input` to create full width input

`<input class="input full">`

Use class `.group` to create grouping input

Username
Password
`<div class="group">
<label> Username </label>
<input class="input">
</div>`

#### Change the border color

Use classes in the below to change the border colors. See documentation of colors

Class | Description
--- | ---
primary | primary color
warning | warning color
success | success color
danger | danger color
... | ...
dark | dark color

### Table

##### Just table

# | Name | Email
--- | --- | ---
1 | John Doe | john.doe@email.com
2 | Grace Grey | greygrace1@email.com
3 | Natalie Lim | lim.natalie@email.com

`<table class="table">
<tr>
<th> # </th>
<th> Name </th>
<th> Email </th>
</tr>
<tr>
<td> 1 </td>
<td> John Doe </td>
<td> John.Doe@email.com </td>
</tr>
</table>`

#### Stripped Table

Just add class `.stripped` after class `.table`

# | Name | Email
--- | --- | ---
1 | John Doe | john.doe@email.com
2 | Grace Grey | greygrace1@email.com
3 | Natalie Lim | lim.natalie@email.com

#### Bordered Table

Juts add class `.bordered` after class `.table`

# | Name | Email
--- | --- | ---
1 | John Doe | john.doe@email.com
2 | Grace Grey | greygrace1@email.com
3 | Natalie Lim | lim.natalie@email.com

#### Borderless Table

Just add class `.borderless` after class `.table`

# | Name | Email
--- | --- | ---
1 | John Doe | john.doe@email.com
2 | Grace Grey | greygrace1@email.com
3 | Natalie Lim | lim.natalie@email.com

### List

Normal List

- List 1
- List 2
- List 3

`<ul>
<li> List 1 </li>
<li> List 2 </li>
<li> List 3 </li>
</ul>`

Reset List

- List 1
- List 2
- List 3

`<ul class="reset">
<li> List 1 </li>
<li> List 2 </li>
<li> List 3 </li>
</ul>`

Inline List

- List 1
- List 2
- List 3

`<ul class="inline">
<li> List 1 </li>
<li> List 2 </li>
<li> List 3 </li>
</ul>`

### Typography

#### Heading

###### <h1> ~ <h6>

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

#### Bold

Text going bold

`<p class="bold"> Bold </p>`

#### Italic

Text going italic

`<p class="italic"> Italic </p>`

#### Caps

text going capitalize

`<p class="capitalize"> Capitalize </p>`

#### Underline

text going underline

`<p class="underline"> underline </p>`

#### Aligned

align left

align center

align right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`<p class="align-left"> alignt left </p>
<p class="align-center"> alignt center </p>
<p class="align-right"> alignt right </p>
<p class="justify"> justify </p>
`

### Utilities

##### Tools for fedora

#### Font Size

###### Change the font size

size XXLarge
size XLarge
size Large
size Normal
size Medium
size Small
`<p class="fs-xxlarge"> fs-xxlarge </p>
<p class="fs-xlarge"> fs-xlarge </p>
<p class="fs-large"> fs-large </p>
<p class="fs-normal"> fs-normal </p>
<p class="fs-medium"> fs-medium </p>
<p class="fs-small"> fs-small </p>
`

#### Display

###### Block, Inline, Inline-block

`<div class="block"> Content goes here </div>
<div class="inline"> Content goes here </div>
<div class="inline-block"> Content goes here </div>`

#### Width

###### Change the width of content

.w-100 (width 100%)
.w-75 (width 75%)
.w-50% (width 50%)
.w-25% (width 25%)
`<div class="w-100"> Content goes here </div>
<div class="w-75"> Content goes here </div>
<div class="w-50"> Content goes here </div>
<div class="w-25"> Content goes here </div>`

Use class `.margin-auto` to centering object

.w-100 (width 100%)
.w-75 (width 75%)
.w-50% (width 50%)
.w-25% (width 25%)

#### Object Position

###### Static, Fixed, Absolute, Relative

`<div class="static"> Content goes here </div>
<div class="fixed"> Content goes here </div>
<div class="w-50"> Content goes here </relative>
<div class="absolute"> Content goes here </div>`

#### Floating

Use class `.left` to floating left and use class `.right` to floating right.

#### Responsive

Put class `.responsive` before the content to give bottom scrollbar

#### Spacer

Spacer give padding-top and padding-bottom inside the content

Name | Description
--- | ---
spacer-1 | top 16px & bottom 16px
spacer-2 | top 32px & bottom 32px
spacer-3 | top 64px & bottom 64px
spacer-4 | top 128px & bottom 128px
spacer-5 | top 192px & bottom 192px

#### Margin and Padding

Base classes of margin & padding

Class | Description
--- | ---
ml-* | Margin Left
mr-* | Margin Right
mb-* | Margin Bottom
mt-* | Margin Top
pl-* | padding Left
pr-* | padding Right
pb-* | padding Bottom
pt-* | padding Top
no-padding | No all paddings
no-margin | No all margins

Value of margin & padding. Put in after "-" of base classes

Class | Description
--- | ---
small | 4px
medium | 8px
normal | 16px
large | 24px
xlarge | 28px
0 | 0px