Getting started

Start developing with Html Website Framework

  1. Home
  2. Getting started

Starting

You can start with the file below, download it, place it into the HTWF folder and insert the contents you want. You will build your project by copy and paste the code snippets of the documentation(this website) and by set the contents and options of the various components.

Tips

  • The documentation is all this website. Every code, option and tutorial of this website can be used into your project.
  • The best method for create a website with Framework Y is by maintain always open this website on your browser and use it for everything.
  • Become a master of CSS! This framework, included the WordPress version, provide all the features required for create a template or theme to sell on Themeforest, you not need to write any code but the CSS only. More good you will be with the CSS more great and fast will be your work.
Download blank page

Page layout and structure

The structure (layout) of the page is always the same: header, sections and footer. Every page of your website will containt only the header, a lists of sections and the footer.

Sections

The sections are the core container of everything and usually contains only columns, you can access the sections from the Containers menu voice.

Columns

The columns are based on the Bootstrap grid system. You have 12 columns widths where col-12 is the larger full-width column and col-1 is the smaller. Columns are responsive, you can set different widths on mobile with special classes, click the below button for more details.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-7
.col-md-5
.col-md-10
.col-md-2
.col-md-11
.col-..
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
<div class="row">
    <div class="col-md-12">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-6">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-4">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-4">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-3">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-3">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-3">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
</div>

<div class="row">
    <div class="col-md-2">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-2">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-2">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-2">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-2">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
    <div class="col-md-2">
        <!-- COMPONENTS OR CONTAINERS HERE -->
    </div>
</div>
Bootstrap grid system Responsive classes

Components and containers

The components and the containers are the true contents and should be inserted only into the columns.

Structure example

All your pages should have the same structure of the code below:

<html>
        <head>
             ...
        </head>
        <body>
            <div id="preloader"></div>
            <header>
                <!-- MENU HERE -->
            </header>
            <div class="section-empty section-item">
                <div class="container content">
                    <!-- COLUMNS HERE -->
                </div>   
            </div>
            <div class="section-empty section-item">
                <div class="container content">
                    <div class="row">
                        <div class="col-md-4">
                            <!-- COMPONENTS OR CONTAINERS HERE -->
                        </div>
                        <div class="col-md-4">
                            <!-- COMPONENTS OR CONTAINERS HERE -->
                        </div>
                        <div class="col-md-4">
                            <!-- COMPONENTS OR CONTAINERS HERE -->
                        </div>
                    </div>
                </div>   
            </div>
            <!-- NEW SECTIONS HERE -->
            <footer>
                 <!-- FOOTER CONTENT HERE -->
            </footer>
        </body>
</html>

Design

1. Include file skin.css into the template root folder into header object of every page as last item. The file skin.css must be the last css file included.

2. Replace the template's colors by edit the first block of the skin.css code: COLORS.

Layout, Bootstrap and columns

Before starting you should also understand the basic features of the framework and of Bootstrap, this will save you much time in future.

Go to components base documentation Bootstrap official website

Commercial templates

You can use this framework for free to develop commercial templates to sell on Themeforest, other markeplace or in any other way you want. The only requirement is to display a banner on the sale page of the item, the banner must link to www.framework-y.com, please download the banner from the button below. You can provide to your customers this website as documentation, with link to http://www.framework-y.com/docs.html, the download package contain also a ready to use documentation file.

Download banner

Commercial WordPress themes

You can combine the HTML version with the WordPress version, and sell the WordPress theme on Themeforest as well. Combining two versions will not only boost your productivity and your earnings, but will allow you to create the WordPress version starting from the HTML version, saving you weeks of work. You can create yourselft the WordPress theme by buying the extended licence of WPTF or you can give to us your template and we will create the WordPress version for you, details here.

Requirements

If you want give to us your template for the WordPress conversion there are some requirements that you must meet.

  • Do not insert any custom HTML code, use always the codes of the framework, all the codes snippets can be found by visit the documentation (this website). The only allowed custom codes are the CSS, insert all your styles into the skin.css file. You can use also JS\JQUERY but all the codes must be inserted into one single dedicated .js file.
  • Only high quality designs are accepted. We can accept only templates that look really good and so that generate good sales.
  • The design must cover all the framework components (titltes, headers, components, containers) not only the ones used by your template demos. You can be sure to cover all the components by check with your design the pages under Features menu of the Template folder included in the download, like showed here. Don't worry, most components will already display correctly also with your design, you need only to fix some CSS, it's a fast work.
  • The static template must be already approved by Themeforest.

Licence

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification).
Commercial templates must display a banner to the sale page with a link to http://www.framework-y.com/.

(The MIT licence - with variations)

Copyright (c) 20212 Schiocco - support@schiocco.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software with the following rights:

  • Rights to use, copy, modify, merge copies of the Software.
  • Rights to develop and sell commercial templates on Themeforest or other markeplaces.
  • Rights to develop and sell websites and other web services (but not frameworks) built with this framework.
  • Rights to develop and sell privately to a single end user any variations of the framework.
Including, without additional limitations than the ones written here, the rights to use, copy, modify, merge, publish, distribute. and to permit persons to whom the Software is furnished to do so, subject to the following conditions: Commercial templates must display a banner to the sale page with a link to http://www.framework-y.com/. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THIS LICENSE DON'T PROVIDE THE RIGHTS TO PUBLISH OR SELL FRAMEWORKS, PAGE BUILDERS OR COMPOSERS BUILT WITH THIS FRAMEWORK IN ANY PROGRAMMING LANGUAGE INCLUDING HTML, PHP, C#, JAVA, .NET. THESE RESTRICTIONS ARE STILL VALID IF THIS FRAMEWORK IS ONLY PARTIALLY IMPLEMENTED. THE ONLY SOFTWARE BASED ON THIS FRAMEWORK THAT CAN BE SOLD OR PUBLICLY DISTRIBUITED ARE THE COMMERCIAL TEMPLATES (A TEMPLATE WITH READY DEMOS, EXACTLY LIKE THE HTML TEMPLATES OF THEMEFOREST).

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.