build themes faster with HTML5 Quick Start Pack.Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
HTML5 Quick Start Pack is a complete blank slate starter theme with 0 unnecessary styled elements. It’s completely focused on simplicity and speed.
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Owl Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!--WOW CSS -->
<link rel="stylesheet" href="css/animate.css">
<!--UI KIT CSS -->
<link rel="stylesheet" href="css/uikit.min.css">
<!--Jquery Mean Memu CSS -->
<link rel="stylesheet" href="css/meanmenu.min.css">
<!--Simple Grid CSS -->
<link rel="stylesheet" href="css/simplegrid.css">
<!-- ALL JS HERE-->
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Owl Carousel JS -->
<script src="js/owl.carousel.min.js"></script>
<!-- WOW JS -->
<script src="js/wow.min.js"></script>
<!-- UI KIT JS -->
<script src="js/uikit.min.js"></script>
<!-- Jquery Mean Menu JS -->
<script src="js/jquery.meanmenu.min.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>- Completely blank slate
- Simplistic
- Fast
HTML5 Blank is a good choice for you if you are already adept at CSS, and want complete control over every single element, and you want absolute 0 wasted lines of code in your site.
- HTML5 Boiler plate
- Bootstrap
- Fontawesome
- Owl Carousel
- WOW JS
- Animate CSS
- UI Kit
- jquery mean menu-responsive menu plugin
- Simple Grid
The following table lists the versions that UIkit is tested on. "Latest" means that it works just fine on all recent versions of that browser. With many browser moving towards a rolling release strategy, pinning down browser support to a specific version has become a little tricky in recent years. Long story short Quick Start pack will work on pretty much any modern browser.
Simple Grid is a basic lightweight grid, not a CSS framework. There are no styles for buttons, tables, typography etc. etc. Simple Grid comes with two different types of grids. There is a grid for content, which looks like <div class="col-1-3"></div> and a grid for layouts, which looks like <div class="col-4-12"></div>. Simple Grid is also built for responsive layouts. With fluid columns, the grid will resize to adjust to the browser resolution. To accommodate for mobile and tablet devices, the grid will essentially stack all columns, one above another, when viewed on smaller screens.
Before starting with anything please make sure to include this snippet of code in your <head> tag so that the grids will be responsive on mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1"
>
In terms of use, Simple Grid is basically just like every other grid. Starting out, you need to wrap your grid in a div class named grid. If you want a 20px padding around your grid, add the class grid-pad to the div wrapper. Next, all you have to do is decide what size you want your grid to be and add the appropiate classes. For example, if you want a grid with a left sidebar and main content area you would do:
<div class="grid"> <div class="col-3-12"> </div> <div class="col-9-12"> </div> </div>If you have a page and would like four columns of content, you would do:
<div class="grid"> <div class="col-1-4"> </div> <div class="col-1-4"> </div> <div class="col-1-4"> </div> <div class="col-1-4"> </div> </div>The first column of content in your grid will always be floated left. If you would like to float a column to the right, all you have to do is add the class
push-right.
To push a column to the right, you can use the push-X-X classes:
<div class="grid"> <div class="col-1-3 push-1-3"> </div> <div class="col-1-3 "> </div> </div>
If you don't want to stack all columns on mobile and tablet you can simply add a extra class to each column:
<div class="grid"> <div class="col-1-3 mobile-col-1-2"> </div> <div class="col-1-3 mobile-col-1-2"> </div> <div class="col-1-3 hide-on-mobile"> </div> </div>To hide a element (column, div, a, etc.) on mobile and tablets you can add the class
hide-on-mobile to it.
To see the grid in action jump on over to the Simple Grid example page.
License: MIT
Currently V 1.O.O.