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:
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 the Header with structure/{preset}/header.html
Customize the Content with structure/content.html either directly, or by including components
Customize the Footer with structure/{preset}/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>
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:
- live filter
- responsive table with inline editing
- ajax/json data loader to approximate ajax responses in mock-up Coming Soon
For examples on creating components, and including them in your mock-up, take a look at structure/content.html
I think that covers pretty much everything. Like I said, super-simple.