Module Framework documentation v0.1.0

Introduction

Export features are available only for Module Framework customers

Module Framework is a tool which helps you to create your own website with great modern design. You may choose one of our ready-to-use templates or build your own page and customize it with a lot of predefined blocks.

Adding blocks

Module Framework has a huge amount of clearly designed blocks, which you can use to build your page: headers, footers, hero images, forms, team, testimonials and so on. Click on the (+) icon in the right top corner to open menu with list of categories. Select category to open panel with preview of blocks. Drag block from the left menu on the page template and drop it. Drag blocks up and down to rearrange them on the layout. Use a magnifier button to zoom in and out. You can insert blocks between existing ones by dragging it between them. To delete a block click on the trash icon in the top right corner of the selected block.

Using predefined templates

Module Framework provides you a list of predefined page templates for different cases: landing pages, events, mobile apps promotion, e-commerce etc. Click button "See templates" at the bottom of navigation panel and choose any template to load it into the generator. Now you can change it: delete blocks you don't need or add new ones.

Exporting your completed template

To export your completed template you need to enter a license key. In case you already purchased the Module Framework, you’ll find the license key atteched with your receipt from Gumroad. In case you haven't bought it yet click ‘Buy Now’ button on the popup and purchase the product. # Code sources

Export features are available only for Module Framework customers

HTML / CSS Version

Folders and files

After exporting your web page you will get zip archive with html & css files, scripts, icons and images with the following structure:

  • blocks - images for webpage’s blocks
  • css
    • main.css - minified styles
  • js
    • main.js - blocks’ scripts
    • vendor.js - 3-rd party libraries
  • index.html - your web page

Page structure

Every web page consist of two main parts: head and body. Head is using to describe some information about web page: title, description, keywords, styles, responsiveness etc. Body contains everything what should be visible in the web browser.

Modules are placed between <body> HTML tags. Each module is a <div> with class attribute describing current module’s name and its content:

<div class="call-to-action-4">
  <div class="call-to-action-4__container container" data-aos="fade-up">

    <h1 class="call-to-action-4__title">
      Absolutely New Thing
    </h1>

    <div class="call-to-action-4__subheading subheading">
      Easily grant access to friends and family
      or share a separate guest network with them
    </div>
    
    <a class="call-to-action-4__button button" href="#">
      Buy now for $23
    </a>

    <div class="call-to-action-4__caption caption">
      Basic equipment
    </div>

  </div>
</div>

Paths to the images are described in src attributes of <img> HTML tags.

The text of the page is placing between tags. For example:

<p>
  This is text content
</p>

Customizing content

To edit a text in web page HTML code you may use any text editor. We recommend you to use Sublime Text 3 with syntax highlighting. Run Sublime Text, then go to “File -> Open” and choose index.html file from the zip archive provided by Generator.

Edit text between HTML tags and press ⌘S to save your changes.

Refresh your page in browser to see changes.

Use your own images

You can change photos on your site by replacing proper images in blocks directory or adding them into web page directory and writing relative urls in html code:

<img src="blocks/testimonials-8/images/image-1.png">

Advanced Pug / Sass version

With Module Framework you can get ready to use build system developed on Node.js and Gulp with popular preprocessors: Sass and Pug.

Structure

After exporting your web page as advanced user you will get zip-archive with preprocessors files, node.js and gulp configs and 13 predefined templates.

  • build - compiled styles and pages
  • src - code sources and pages templates
    • blocks - scripts, styles and templates of components
    • fonts - custom fonts
    • js - common scripts and 3-rd party libraries
    • pug - mixins and helpers for pug pages
    • sass - sass mixins, gelpers and reusable components
    • sprite - png and svg icons to build a spritesheet
  • *.pug - predefined templates in pug

Build system

To use Gulp you need to install latest version of Node.js.

Open terminal in the build system directory. Install globally Gulp and Bower:

npm install gulp bower -g

Then install local libs and dependencies:

bower install && npm install

And run gulp task manager to compile templates, run local server and watch files to restart build with changes in source files:

gulp

Open your browser and go to http://localhost:3000

Pug templates

You can build a simple page with Module Framework components just writing them in order you need:

doctype html
html
  head(lang="en")
    include pug/metatags.pug
    +title('#1 iOS app')
    include pug/styles.pug

  body
    include pug/svg.pug

    include blocks/header-1/template.pug
    include blocks/features-12/template.pug
    include blocks/promo-3/template.pug
    include blocks/promo-4/template.pug
    include blocks/features-13/template.pug
    include blocks/contents-18/template.pug
    include blocks/promo-5/template.pug
    include blocks/testimonials-1/template.pug
    include blocks/footer-1/template.pug

    script(src="https://cdnjs...")
    include pug/scripts.pug

For example, if you want to build your pages with such components as header-3, testimonials-2, call-to-action-5 and footer-7, just create new pug file, name it as you wish and insert this code:

doctype html
html
  head(lang="en")
    include pug/metatags.pug
    +title('#1 iOS app')
    include pug/styles.pug

  body
    include pug/svg.pug

    include blocks/header-3/template.pug
    include blocks/testimonials-2/template.pug
    include blocks/call-to-action-5/template.pug
    include blocks/footer-7/template.pug

    script(src="https://cdnjs...")
    include pug/scripts.pug

Run gulp watcher from console, save your changes and Gulp will transpile your template into html an dplace it into build directory. As you see all you havo to do is change order and numbers of components.

Sass includes

Every component has its own styles in blocks directory named as _style.scss file.

~/blocks/contents-1/_style.scss
.contents-1 {
  padding: rem-calc(20 20 0);
  background-color: $color-white;

  &__inner {
    position: relative;
    padding: rem-calc(100 30);
    background-color: $color-wild-sand;
  }

  &__title {
    margin-bottom: rem-calc(17);
    text-align: center;
    color: $color-mako;
  }

  ...
}

As you see colors are stored as variables. You can change it values in file ~/sass/base/_colors.scss and customize styles as you wish.

~/sass/base/_colors.scss
$color-abbey: #50555b;
$color-alabaster: #f9f9f9;
$color-alto: #ddd;
$color-apple: #67b93c;
$color-athens-gray: #f7f7f9;
$color-black: #000;
$color-boston-blue: #3582c1;
$color-bottle-green: #0b3835;
...

Run gulp watcher from console, save your changes and Gulp will transpile all scss components into main.css file.

You may also change a lot of layout settings based on opensource framework ZURB Foundation. All layout settings and Foundation components and dependencies are in ~/sass/base/_settings.scss and ~/sass/base/_foundation.scss files.