just another minimal css framework

Ver 1.0

Get Started

Get Started

Download Minium

Install with npm

                $ npm install minium

Grid Layout

# extra small
<576px		 small
≥576px		 medium
≥768px		 large
≥992px		 extra large
≥1200px
Class Name x s m l xl
# of columns 12
Padding 15 px all sides 
                <div class="container-fluid">
	<div class="row">
		<div class="x12 s6 m4 l3 xl1"></div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="x12 s6 m4 l3 xl1"></div>
	</div>
</div>
12
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12
                <div class="row">
	<div class="x12 s12">12</div>

	<div class="x12 s1">1</div>
	<div class="x12 s11">11</div>

	<div class="x12 s2">2</div>
	<div class="x12 s10">10</div>

	<div class="x12 s3">3</div>
	<div class="x12 s9">9</div>

	<div class="x12 s4">4</div>
	<div class="x12 s8">8</div>

	<div class="x12 s5">5</div>
	<div class="x12 s7">7</div>

	<div class="x12 s6">6</div>
	<div class="x12 s6">6</div>

	<div class="x12 s7">7</div>
	<div class="x12 s5">5</div>

	<div class="x12 s8">8</div>
	<div class="x12 s4">4</div>

	<div class="x12 s9">9</div>
	<div class="x12 s3">3</div>

	<div class="x12 s10">10</div>
	<div class="x12 s2">2</div>

	<div class="x12 s11">11</div>
	<div class="x12 s1">1</div>

	<div class="x12 s12">12</div>
</div>

Typography

Heading 1 h14 rem

Heading 2 h23.6 rem

Heading 3 h33 rem

Heading 4 h42.4 rem

Heading 5 h51.8 rem
Heading 6 h61.5 rem
                <h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p>The base type is 17.6px (1.1em) over 1.5 line height</p>

<a>Anchor</a>

<u>Underline</u>

<em>Emphasis</em>

<strong>Strong</strong>

<small>Small</small>

Tooltip

You should use "tooltip" class and add "data-tooltip" and then write your tooltip in data-tooltip.

		        <label class="tooltip" data-tooltip="sample tooltip test">Test Tooltip</label>

Table

# First Name Last Name Job
1 Saeed Kefayati Front End Developer
2 Mohammad Reza Keikavousi Front End Developer
3 Ali Ahmadi Back End Developer 
                <table>
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Job</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Saeed</td>
			<td>Kefayati</td>
			<td>Front End Developer</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Mohammad Reza</td>
			<td>Keikavousi</td>
			<td>Front End Developer</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Ali</td>
			<td>Ahmadi</td>
			<td>Back End Developer</td>
		</tr>
	</tbody>
</table>

Button

Anchor Button 
                <a class="btn" href="#">Anchor Button</a>

<button>Button Element</button>

<input type="submit" value="Submit Input"/>

<input type="button" value="Button Input"/>

<button disabled>Disable</button>

Form

        		<form>
	<div class="row">
		<div class="x12 s6">
			<label for="exampleEmail">Email</label>
			<input type="email" id="exampleEmail">
		</div>
		<div class="x12 s6">
			<label for="examplePassword">Password</label>
			<input type="password" id="examplePassword">
		</div>
		<div class="x12 s12">
			<label for="exampleSelect">Gender</label>
			<select id="exampleSelect">
				<option value="Male">Male</option>
				<option value="Female">Female</option>
			</select>
		</div>
		<div class="x12 s12">
			<label for="exampleArea">Description</label>
			<textarea id="exampleArea" cols="30" rows="10"></textarea>		
		</div>
		<div class="x12 s12">
			<div class="row items-center">
				<div>
					<input class="margin-none" type="checkbox" id="exampleCheck">
					<label class="margin-none" for="exampleCheck">Remember Me</label>
				</div>			
				<button type="submit">Submit</button>
			</div>
		</div>	
	</div>
</form>

Custom Input

You should import "custominput.css" to your file.


Custom Checkbox :

Custom Radio button :

Custom Range :

Custom Toggle Button :

			    //Custom Checkbox
<input type="checkbox" class="customcheckbox" id="exCheckbox">
<label for="exCheckbox">Enter</label>

//Custom Radio Button
<input type="radio" class="customradio" id="exRadio">
<label for="exRadio">Enter</label>

//Custom Range
<input type="range" class="customrange" id="exRange">

//Custom Toggle Button
<input type="checkbox" class="togglebtn" id="exToggle">
<label for="exToggle">
	<span></span>
</label>

Blockquote

Talk is cheap. Show me the code.

Linus Torvalds 
                <blockquote>
	<p>Stay hungry, stay foolish.</p>
	<em>Steve Jobs</em>
</blockquote>

List

  • item
  • item
  1. item
  2. item
Description list item 1
Description list item 1.1
            	<ul>
	<li>item</li>
	<li>item</li>
</ul>

<ol>
	<li>item</li>
	<li>item</li>
</ol>

<dl>
	<dt>Description list item 1</dt>
	<dd>Description list item 1.1</dd>
</dl>

Loading

			    <div class="spinner"></div>

<svg class="loading">
	<circle cx="40" cy="40" r="30" fill="transparent" />
</svg>

Utility

                //Utility Class List

//display
.block
.inline-block
.hidden

//grid
.column-direction
.wrap
.nowrap
.flex-start
.flex-end
.justify-start
.justify-center
.justify-end
.items-start
.items-center
.items-end

//text align
.center-align
.left-align
.right-align
.justify-align

//float
.pull-left
.pull-right

//margin
.margin-auto
.margin-none
.margin-top-s
.margin-top-m
.margin-top-l
.margin-top-xl
.margin-bottom-s
.margin-bottom-m
.margin-bottom-l
.margin-bottom-xl

//padding
.padding-s
.padding-m
.padding-l

//label
.label
.label-s

//visible(hidden)
.visible(hidden)-s
.visible(hidden)-m
.visible(hidden)-l
.visible(hidden)-xl

//etc
.center-block
.box-center
.border-radius
.shadow

Media Queries

  • Mobile
  • Phablet
  • Tablet
  • Desktop
  • Desktop HD
                //Mobile
@media only screen and (max-width:576px){}

//Phablet
@media only screen and (min-width:576px){}

//Tablet
@media only screen and (min-width:768px){}

//Desktop
@media only screen and (min-width:992px){}

//Desktop HD
@media only screen and (min-width:1200px){}