Zimhosting CSS framework

Back

On this page you will find the framework documentation that was created for the application

Download the framework

Before you start

Framework integration

HTML code

<head>
<meta charset="utf-8"/>
<link rel='stylesheet' href='zimhosting_css/style.css'/>
<title></title>
</head>

Framework integration for mobile

HTML and PHP code

<?php
require 'zimhosting_css/function.php';
?>

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>

<?php
$ip = getDevice();
if(($ip == 'iphone') || ($ip == 'iPod') || ($ip == 'iPad') || ($ip == 'Android')){
echo "<link rel='stylesheet' href='zimhosting_css/m.style.css'/>";
}else{
echo "<link rel='stylesheet' href='zimhosting_css/style.css'/>";
}
?>

<title></title>
</head>

Documentation

Stubbornness

Code

<header>
<h1>Title</h1>
</header>

Navigation bar

Code

<nav>
<div id='nav'>
<ul class="topnav">
<li class="nav"><a href="#">link</a></li>
<li class="nav nav-active"><a href="#">link2</a></li>
<li class="nav nav-active"><a href="#">link3</a></li>
</ul>
<form id='searchbox' method='get' action='#'>
<input type="search" name='q' size='15' placeholder='Enter a search' style='width:250px;' />
<input id='search_submit' type='submit' value='To research' />
</form>
<a class='topnav-inactive' onclick="NavDisplay()">
<div class='topnav-burger'>
<div class="burger">
<span></span>
</div>
</div>
</a>
</div>
<ul id='navdisplay'>
<a href="#"><li class='navdisplay'>link2</li></a>
<a href="#"><li class='navdisplay'>link3</li></a>
</ul>
</nav>
<script src="zimhosting_css/script.js"></script>

Container

Code

<div class='container'>
###
</div>

Content block

Large block of content

<div class='content-large'>
<h2>Title</h2>
<hr>
###
</div>

Small block of content

<div class='content-small'>
<h2>Title</h2>
<hr>
###
</div>

Applications menu

Container

<div class='boxapp'>
</div>

Application

<div class='siteapp'>
<a href='#'>
<div class='app'>
<img src='#' width=192px;>
<p>app</p>
</div>
</a>
</div>

Form

Container

<form method='post'>
###
</form>

Text field

<input name='#' type='text' placeholder=''/>

Email field

<input name='#' type='email' placeholder=''/>

Password field

<input name='#' type='password' placeholder=''/>

Radio button

<input name='#' type='radio' value=''/>#

Checkbox button

<input name='#' type='checkbox' value=''/>#

Button

<input name='#' type='button' value=''>

Submit button

<input name='#' type='submit' value=''>

Button

<button>
###
</button>

Textarea

<textarea>
###
</textarea>