A simple and responsive CSS Framework.
Version 1.0.0

GET STARTED

Get Started

easyCSS is minimal, user-friendly and purely responsive CSS framework that is built for small projects. Specially designed for users that don't have advance knowledge with HTML and CSS.

Instructions

Just DOWNLOAD the compressed or uncompressed version of the CSS file and paste it to your CSS folder. (Make sure that you have a separate folder for CSS).

Uncompressed Version

Paste this code to the <head> section of your HTML file to link the Uncompressed CSS file into your HTML.


							<!-- For Uncompressed Version -->

							<link rel="stylesheet" type="text/css" href="css/easycss.css">

Compressed Version

Paste this code to the <head> section of your HTML file to link the Compressed CSS file into your HTML.


							<!-- For Compressed Version -->

							<link rel="stylesheet" type="text/css" href="css/easycss.min.css">

Typography

Headings

To allow users to resize the text (in the browser menu), many developers use em instead of pixels. The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em. The typography in easyCSS has font-size defined in 1em (16px).

Heading

<h1>3em (48px)

Heading

<h2>2.25em (36px)

Heading

<h3>1.75em (28px)

Heading

<h4>1.375em (22px)

Heading

<h5>1.125em (18px)

Heading

<h6>1em (16px)


							<!-- Default Headings -->

							<h1>Heading</h1>

							<h2>Heading</h2>

							<h3>Heading</h3>

							<h4>Heading</h4>

							<h5>Heading</h5>

							<h6>Heading</h6>

							
<!-- Other Tags to Style your Heading -->

							<a>Anchor</a>

							<em>Emphasis</em>

							<small>Small</small>

							<span>span</span>

							<u>Underline</u>

List

List is the common tag used to display items. easyCSS has three different type of list. The unordered List <ul> will display your items with bullets, ordered list <ol> will display your items with numbers and description list <dl> with terms and description.

Unordered list item 1
Unordered list item 2
Unordered list item 3

Ordered list item 1
Ordered list item 2
Ordered list item 3

Description list item 1: Description list item 1.1
Description list item 2


								<!-- Unordered List -->

								<ul>

								   <li>Unordered list item 1</li>

								   <li>Unordered list item 2</li>

								   <li>Unordered list item 3</li>

								</ul>

								

								<!-- Ordered List -->

								<ol>

								   <li>Ordered list item 1</li>

								   <li>Ordered list item 2</li>

								   <li>Ordered list item 3</li>

								</ol>

								

								<!-- Description List -->

								<dl>

								   <dt>Description list item 1</dt>

								   <dd>Description list item 1.1</dd>

								   <dt>Description list item 2</dt>

								</dl>

Paragraph

The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element. EasyCSS use the default font-size 1em (16px) and use the font-familyRoboto, created by Christian Robertson, and provided by Google Fonts.

This is an example of a paragraph with 1em(px) font-size using Roboto font from Google Fonts.


								<!-- Paragraph -->

								<p>This is an example of a paragraph with 1em(px) font-size using Roboto font from Google Fonts.</p>

Grid System

Responsive columns that is mobile-friendly. EasyCSS has 5 different column layout that will help you design your simple website. Just replace the <span> with your content in each column.

col-50

col-33

col-60

col-40

col-60

col-25


							<!-- Two Columns with both 50% width -->

							<div class="row">

							   <div class="col-50">	

							      <span>col-50</span>

							   </div>

							   <div class="col-50">

							      <span>col-50</span>

							   </div>

							   <div class="clearfix"></div>

							</div>

							

							<!-- Three Columns with 33.33333% width each -->

							<div class="row">

							   <div class="col-33">	

							      <span>col-33</span>

							   </div>

							   <div class="col-33">

							      <span>col-33</span>

							   </div>

							   <div class="col-33">	

							      <span>col-33</span>

							   <div class="clearfix"></div>

							</div>

							

							<!-- Two Columns with 60% and 40% width -->

							<div class="row">

							   <div class="col-60">	

							      <span>col-60</span>

							   </div>

							   <div class="col-40">

							      <span>col-40</span>

							   </div>
					
							   <div class="clearfix"></div>

							</div>

							

							<!-- Two Columns with 40% and 60% width -->

							<div class="row">

							   <div class="col-40">	

							      <span>col-40</span>

							   </div>

							   <div class="col-60">

							      <span>col-60</span>

							   </div>
					
							   <div class="clearfix"></div>

							</div>

							

							<!-- Four Columns with 25% width each -->

							<div class="row">

							   <div class="col-25">	

							      <span>col-25</span>

							   </div>

							   <div class="col-25">

							      <span>col-25</span>

							   </div>
	
							   <div class="col-25">	

							      <span>col-25</span>

							   </div>

							   <div class="col-25">

							      <span>col-25</span>

							   </div>
					
							   <div class="clearfix"></div>

							</div>

Tables

The table in HTML is defined by <table> tag. Table element allows users to display arrange sets of data using rows and columns. This table includes a <caption> tag to describe the title of each table element. easyCSS have 2 different table format. The Three Column Table and Four Column Table. If you want to add more rows in your table, just add another <tr> element before the </table> tag. Remember NOT to use Tables for your website layout.

Three Column Table with Caption
Member	Age	Location
Dela Cruz, Juan	21	Rizal
Penduko, Pedro	27	Laguna
Doe, John	18	Batangas


							

							<!-- Three Column Table with Caption -->

							<table>

							  <caption>Three Column Table with Caption</caption>

							  <tr>

							    <th>Member</th>

							    <th>Age</th>

							    <th>Location</th>

							  </tr>

							  <tr>

							    <td>Dela Cruz, Juan</td>

							    <td>21</td>

							    <td>Rizal</td>

							  </tr>

							  <tr>

							    <td>Penduko, Pedro</td>

							    <td>27</td>

							    <td>Laguna</td>

							  </tr>

							  <tr>

							  <tr>

							    <td>Doe, John</td>

							    <td>18</td>

							    <td>Batangas</td>

							  </tr>

							</table>

Four Column Table with Caption
Students	Prelim	Midterm	Finals
Dela Cruz, Juan	89%	92%	85%
Penduko, Pedro	93%	87%	86%
Doe, John	83%	81%	88%


									<!-- Four Column Table with Caption -->

									<table>

									  <caption>Four Column Table with Caption</caption>

									  <tr>

									    <th>Students</th>

									    <th>Prelim</th>

									    <th>Midterm</th>

									    <th>Finals</th>

									  </tr>

									  <tr>

									    <td>Dela Cruz, Juan</td>

									    <td>89%</td>

									    <td>92%</td>

									    <td>85%</td>

									  </tr>

									  <tr>

									    <td>Penduko, Pedro</td>

									    <td>93%</td>

									    <td>87%</td>

									    <td>86%</td>

									  </tr>

									  <tr>

									  <tr>

									    <td>Doe, John</td>

									    <td>83%</td>

									    <td>91%</td>

									    <td>88%</td>

									  </tr>

									</table>

Alerts

easyCSS has 4 different varities for alert messages. Alert messages often used to display notification to users.

SUCCESS! This is an alert success message.

ERROR! This is an alert error message.

WARNING! This is an alert warning message.

NOTICE! This is an alert notice message.


							<!-- Success Alert Box -->

							<div class="alert-success">

							  <span>SUCCESS!</span> This is an alert success message.

							</div>


							<!-- Error Alert Box -->

							<div class="alert-error">

							  <span>ERROR!</span> This is an alert error message.

							</div>


							<!-- Warning Alert Box -->

							<div class="alert-warning">

							  <span>WARNING!</span> This is an alert warning message.

							</div>


							<!-- Notice Alert Box -->

							<div class="alert-notice">

							  <span>NOTICE!</span> This is an alert notice message.

							</div>

Buttons

easyCSS offers two different option for Buttons. The Default Buttons and the Outlined Buttons. easyCSS also offers 5 different varieties for buttons depending on user's preferences. You can also resize your buttons with 4 different sizes, just combine the class of your chosen button with the class name of the size you choose. (your code should look like this class="class-1 class-2")

Default Buttons


							<!-- Default Buttons -->

							<button class="primary-button">Primary Button</button>

							<button class="secondary-button">Secondary Button</button>

							<button class="success-button">Success Button</button>

							<button class="warning-button">Warning Button</button>

							<button class="error-button">Error Button</button>

Outlined Buttons


							<!-- Outlined Buttons -->
	
							<button class="outlined-primary-button">Primary Button</button>

							<button class="outlined-secondary-button">Secondary Button</button>

							<button class="outlined-success-button">Success Button</button>

							<button class="outlined-warning-button">Warning Button</button>

							<button class="outlined-error-button">Error Button</button>

You can use the button classes on the following: <a>, <button>, or <input> element.

Anchor Button


							<!-- You can use any of these tags to create a button, just apply the type of button you want to use -->

							<a href="#" class="primary-button" role="button">Anchor Button</a>

							<button type="button" class="secondary-button">Button Tag</button>

							<input type="button" class="success-button" value="Input Button">

							<input type="submit" class="outlined-primary-button" value="Submit Button">

Button Sizes

EasyCSS have 4 button sizes that you can combine with Default Buttons or Outlined Buttons.


							<!-- Different button sizes using .primary-button class -->

							<button class="primary-button xs-button">XSmall Button</button>

							<button class="primary-button sm-button">Small Button</button>

							<button class="primary-button md-button">Medium Button</button>

							<button class="primary-button lg-button">Large Button</button>

Forms

HTML forms are used if you want to collect some data from the visitors of your website. Data's collected will be send to the back-end for processing. easyCSS offers different type of forms to be use to collect data from users.

Input field with Input Button


								<!-- Input field with Input Button -->

								<form>

								  <input type="text" placeholder="Enter Email"><br>

								  <input type="password" placeholder="Enter Password"><br>

								  <input type="submit" class="primary-button" value="Submit Button">

								</form>

Dropdown List


								<!-- Dropdown List -->

								<form>

								  <select required>
			      <option value="" disabled selected>Select Size...</option>
	
								      <option>Small</option>

								      <option>Medium</option>

								      <option>Large</option>

								  </select>

								</form>

Select Option Multiple


								<!-- Select Option Multiple -->

								<form>

								  <select multiple>

								    <option>Blue</option>

								    <option>Red</option>

								    <option>Green</option>

								    <option>Black</option>

								    <option>Yellow</option>

								  </select>

								</form>

Checkbox


								<!-- Checkbox -->

								<form>

								  <input id="S" type="Checkbox"><label for="S">S</label>

								  <input id="M" type="Checkbox"><label for="M">M</label>

								  <input id="L" type="Checkbox"><label for="L">L</label>

								  <input id="XL" type="Checkbox"><label for="XL">XL</label>

								</form>

Radio Buttons


								<!-- Radio Buttons -->

								<form>

								  <input id="female" type="radio" name="gender"><label for="female">Female</label>

								  <input id="male" type="radio" name="gender"><label for="male">Male</label>

								</form>

Text Area


								<!-- Text Area with 150px height -->

								<form>

								  <textarea placeholder="Put your Message here">

								  <!-- You can add your own text inside this <textarea> element -->

								  </textarea> 

								</form>

Required Inputs


								<!-- Required Inputs -->

								<form>

								  <input type="email" placeholder="Requires an email" required>

								</form>

Read-Only Inputs


								<!-- Read-Only Inputs -->

								<form>

								  <input type="text" value="Read-Only input here..." readonly>

								</form>

Disabled Inputs


								<!-- Disabled Inputs -->

								<form>

								  <input type="text" placeholder="Disabled input here..." disabled>

								</form>

Blockquote

The blockquote element is used quoted content used to represent information from other sources.

easyCSS is the best CSS Framework!
John Ray Pantaleon


								<!-- Blockquote -->

								<blockquote>

								  <p>easyCSS is the best CSS Framework!</p>

								  <cite>John Ray Pantaleon</cite>

								</blockquote>