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 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

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
www.000webhost.com