Super-simple Mock-up framework meant to ease the transition from mock-ups to actual products. The idea would be to begin your mock-ups for each new product with a fresh download of this project, and then customize it to your heart’s content. The focus should be in creating clean, modular markup, and visuals, which can then be transferred to your real project.

This folder still needs to be served from behind a server like Apache or Nginx. - In other words, you should access these mock-ups with a url likemy-mockups.dev or http://localhost/mockups not file://my-desktop/mockups/index.html

Uses:

Structural Presets #

Uses jQuery imports to separate the main structure into:

Header
Content
Footer

This project comes with five structural presets. That is, how the elements above (Header, Content, and Footer) interact with one another.

You set the preset in index.html

// To customize the structural preset, comment all the presets you do not want to use, and uncomment the one you want applied.
    var structure_preset = 'elastic';
    // var structure_preset = 'scroll_behind';
    // var structure_preset = 'fixed_header';
    // var structure_preset = 'fixed_footer';
    // var structure_preset = 'sticky_footer';

Elastic (Default)

Fixed Scroll-Behind

Fixed Header

Fixed Footer

Sticky Footer

Customize #

Customize the Header with structure/header.html

Customize the Content with structure/content.html either directly, or by including components

Customize the Footer with structure/footer.html

Customize the CSS with css/main.css

Customize the JS functions with js/main.js

Add more JS libraries by including these in js/vendor/ then adding the links in the index.html to include them in the <head> or in structure/footer.html to include them before </body>

Components #

Content can be added either directly in content.html, or through the use of components. This project includes some components to help you get started.

Included components: