Hipsta Logo

All new features

Valid HTML5, CSS3 transitions, animation features and dynamic responsive blocks

Time Economy

Hundreds predefined blocks, typography elements and much more!

Multi Purpose

Use Hipsta Theme for your next business site, blog, portfolio or online shop

Thank you for purchasing our theme. We hope that the development of your new project based on our theme will bring you joy and pleasure. We are also hope that you appreciate our work and will continue to purchase our products.

Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Hipsta. You'll see something like this:

  Hipsta Theme/
  ├── css/
  │   ├── bootstrap.css (BootStrap Style Sheet File)
  │   ├── bootstrap-responsive.min.css (BootStrap Responsive Features)
  │   ├── font-awesome.min.css (Font Awesome Styles)
  │   ├── styles.css (Custom Hipsta Styles)
  │   ├── slider.css (Slider Main Styles)
  │   ├── slider-customs.css (Slider Custom Styles)
  └── fonts/
      ├── Oswald Fonts Family
      └── Ultra Font
      └── Font Awesome (Main Icon Font)
      └── Fontello Font (Maki and Entypo Icons)
  ├── js/
  │   ├── dazein-custom.js (Compiled Custom Script for Hipsta Theme)
  │   ├── bootstrap.min.js (Compiled BootStrap JaveScript)
  │   ├── jquery.js (jQuery)
  │   ├── modernizr.custom.79639.js (Transitions)
  │   ├── jquery.slitslider.js (Main Page SlitSlider Lib)
  │   ├── jquery.jigowatt.js (Contact Form Lib)
  │   ├── baraja.options.js (Baraja Options and Examples)
  │   ├── jquery.baraja.js (Baraja Lib)
  │   ├── jquery.isotope.min.js (Isotop Lib)
  │   ├── jquery.masonry.min.js (Masonry Lib)
  └── img/
      ├── autors/ (Dummy Authors Avatars)
      └── logo/ (Dummy Clients Logos)
      └── shop/ (Images For Shop)
      └── slider/ (Images For Slider)
  └── Sources/
      ├── PSD File with Design Elements
        

Please note that all JavaScript plugins require jQuery to be included.

Theme Files Description Table

Page Description JavaScript Used As Required* PHP Script Used
blog.html Typical Blog Page with Text Widgets, Calendar and Sidebar bootstrap.min.js
blog2rows.html Typical 2 Columns Blog Page with Masonry Effect bootstrap.min.js, jquery.masonry.min.js, dazein-custom.js, modernizr.custom.79639.js
blog-post.html Typical Blog Post Page with Comments bootstrap.min.js
contact.html Contact Page with Google Map and AJAX Contact Form bootstrap.min.js, jquery.jigowatt.js, jquery.js contact.php
errors.html Server Errors Page bootstrap.min.js
gallery.html Gallery Page with CSS3 Lightbox bootstrap.min.js
index.html Main Page with SlitSlider bootstrap.min.js, dazein-custom.js, jquery.slitslider.js, modernizr.custom.79639.js save.php, base.sql
portfolio-1.html Simple Portfolio Page with CSS3 Lightbox bootstrap.min.js
portfolio-2.html Portfolio Page Composition One bootstrap.min.js, jquery.isotope.min.js, dazein-custom.js, modernizr.custom.79639.js
portfolio-3.html Portfolio Page Composition Two bootstrap.min.js, jquery.isotope.min.js, dazein-custom.js, modernizr.custom.79639.js
portfolio-item.html Portfolio Item Page with Baraja Slider holder.js, jquery.baraja.js, baraja.options.js, dazein-custom.js
pricing.html Pricing Page with Pricing Tables and Coupon Snippets bootstrap.min.js
shop.html Shop Page with Bootstrap Slider bootstrap.min.js, jquery.js,
product-page.html Shop Product Page with Bootstrap Slider holder.js, jquery.js, bootstrap.min.js,
who.html Who We Are Page bootstrap.min.js, jquery.js
typography.html Examples Of Typography Using on Blue bootstrap.min.js
*jquery.js used in active state as a default

Docs sections

Scaffolding

Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS

Styles for common HTML elements like typography, code, tables, forms, and buttons.

Components

Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

Icons

All information concerning icons, icons shortcodes and examples of use.

JavaScript plugins

Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

With a brief intro into the contents out of the way, we can focus on putting Hipsta to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.

Now, here's a look at a typical HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>Hipsta Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
  </body>
</html>

To make this a Hipsta Template, just include the appropriate CSS and JS files:

<!DOCTYPE html>
<html>
  <head>
    <title>Hipsta Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/styles.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

And you're set! With those two files added, you can begin to develop any site or application with Theme Hipsta.