Platforma HTML documentation v0.1.0

Introduction

Export features are available only for Platforma HTML customers

Platforma HTML is a tool which helps you to build responsive HTML prototype that works like finished website. Choose and combine components with online generator right in your browser and get clean HTML wireframe immediately.

Adding blocks

Platforma HTML has a huge amount of responsive blocks, which you can use to build your prototype: Headers, Contents, Sliders, Simple grids, Features, Portfolio 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.

Exporting your completed template

To export your completed template you need to enter a license key. In case you already purchased the Platforma HTML, 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 # Code sources

Export features are available only for Platforma HTML 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:

  • img - contains images by categories
  • css
    • main.css - minified styles
  • js - common scripts and 3rd 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 <section> with attributes class and id, which denotes name and number of block:

<section class="grids pt-60 pb-20 pt-lg-100 pb-lg-60" id="grids-2">
  <div class="container">
    <div class="row justify-content-around">
      <div class="col-12 col-sm-6 col-lg-4 mb-40">
        <img class="mb-20" src="img/pics/star-54.svg" alt=""/>
        <h3 class="mb-20">Feature One</h3>
        <p>Far far away, behind the word mountains</p>
      </div>
      <div class="col-12 col-sm-6 col-lg-4 mb-40">
        <img class="mb-20" src="img/pics/star-54.svg" alt=""/>
        <h3 class="mb-20">Feature Two</h3>
        <p>Far far away, behind the word mountains</p>
      </div>
    </div>
  </div>
</section>

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 / Stylus version

With Platforma HTML you can get ready to use build system developed on Node.js and Gulp with popular preprocessors: Stylus 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
    • fonts - custom fonts
    • css - custom fonts
    • js - common scripts and 3-rd party libraries
    • img - images
  • modules - code sources and pages templates
    • index.pug - generated template
  • styles - contains basic reused styles. Specific styles are in the category folder (for example: modules/headers/headers.styl)

Build system

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

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

npm install gulp -g

Then install local libs and dependencies:

npm install

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

npm run start

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

Pug templates

You can build a simple page with Platforma Wireframe components just calling mixin blocks:

doctype html
extend ../layout

  block title
    title Platforma prototype

  block content
    include all-in

    //- Insert modules here as mixin calls.
    //- (same indent as this comment)

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 (по умолчанию это modules/index.pug):

doctype html
extend ../layout

  block title
    title Platforma prototype

  block content
    include all-in

    +header-3()
    +testimonials-2()
    +call-to-action-5()
    +footer-7()

Also you're able to just launch gulp watch, to build without using server that will track changes in *.pug and *.styl. CSS and HTML will build in the "build" folder.

How to code PUG and Stylus

For grid creating we used 12-columns Bootstrap 4 grid, based on flexbox. For your convenience you're able to use these pug mixins:


+row('between', 'start')
// <div class="justify-content-between align-items-start"></div>
  +col(['12', 'sm-6', 'lg-3'])
  // <div class="col-12 col-sm-6 lg-3"></div>

For customization and blocks settings are used responsive classes. For example this string will have margin-bottom: 40px on mobile devices and margin-bottom: 80px on desktop screens.

div.mb-40.mb-sm-60.mb-lg-80

All list of available classes are in the file: styles/base/atoms.styl