Getting started

Start developing with Framework Y

Starting


You can start with the file below, download it, place it into the root template folder and insert the contents you want. You will build your project by copy and paste the code snippets of the documentation 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.
  • WordPress - If you want maintain your HTML project compatible with the WordPress version not insert any custom HTML\JS\PHP codes, use always the codes of the documentation, you should find everything you need. The only custom codes you can use are only the CSS, insert all your styles into the skin.css file.
  • WordPress - If you need to write custom HTML\JS\PHP codes you can do it without problems but you will need to create also the custom components for the WordPress version.

Download blank page

HTML PAGE STRUCTURE

You can use this code of a empty content HTML page for start your first website page:

<!DOCTYPE html>
<!--[if lt IE 10]> <html lang="en" class="iex"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]><!-->
<html lang="en">
    <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Page title</title>
            <meta name="description" content="Here is a description of the page content">
            <script src="scripts/jquery.min.3.1.1.js"></script>
            <link rel="stylesheet" href="../../scripts/bootstrap/css/bootstrap.css">
            <script src="../../scripts/script.js"></script>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet" href="skin.css">
        </head>
        <body>
            <div id="preloader"></div>
            <header>
                <!-- MENU HERE -->
            </header>
            <div class="section-empty section-item">
                <div class="container content">
                    <!-- CONTENTS HERE -->
                </div>   
            </div>
            <!-- NEW SECTIONS HERE -->
            <footer>
                <div class="content">
                    <div class="container">
                        <!-- FOOTER CONTENT HERE -->
                    </div>
                </div>
                <link async rel="stylesheet" href="scripts/font-awesome/css/font-awesome.min.css">
                <script async src="scripts/bootstrap/js/bootstrap.min.js"></script>
                <link rel="stylesheet" href="css/animations.css">
                <script src="scripts/imagesloaded.min.js"></script>
            </footer>
        </body>
</html>


CSS 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 theme's colors by edit first block of CSS code of skin.css: COLORS.


Bootstrap and base features


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