Fedora.css
Minimalis CSS Framework
Alert
Just 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
<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 | |
|---|---|---|
| 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 | |
|---|---|---|
| 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 | |
|---|---|---|
| 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 | |
|---|---|---|
| 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
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 XXLargesize 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 |
