?

HOW TO USE THIS BLOCK

 

Startup Framework is a set of components

We’ve created the product that will help your
startup to look even better.

?

HOW TO USE THIS BLOCK

 

Features of Startup Framework

You have the design, you have the code. We’ve created the product that will help your startup to look even better.

We have a full version of Startup Framework

You will find there all the components and blocks you can use for creating a website.

Watch the Presentation
Startup user manual

Block Header #10

  1. Overview

    This block was developed as a special header block. All blocks that are marked as header should only be used once on one page. This header block has a navigation bar, which can have two states. The standard state is described further in this documentation and the fixed-top state is shown in the example for this for this block.

  2. Installation

    If you haven’t already done all the instructions from the how to install page of this documentation, please do that first.

  3. CSS version:

    To use this block, simply copy and paste the following line of code into your HTML file:

     

    Startup Framework is a set of components

    We’ve created the product that will help your
    startup to look even better.

  4. LESS version:

    Copy the same code as in css version and paste it in your '.less' file. Put the following line after that code:

    @import '../../ui-kit/ui-kit-header/less/header-10.less';
  5. Component Modification:

    In this section you will see what modifications you can do to the block.

    This block, as many other header blocks in our framework, has a special place for background image, which is: <div class="background">...</div>. To put your own image as background you need to add CSS rules for this element. You can also manage the opacity for this element. Here is an example:

    .background {
    	background-image:url('your image url’);
    	opacity: opacity value;
    }

    In the “Less" version, you can use the cross browser function for the opacity property:

    .opacity(value from 0 to 100);

    You can replace the content in this block with your own. In order to do this you need to replace the content between the tags <div class="hero-unit">...</div>.

    This block also has a special button for jumping to the next content block.

  6. Samples

    We have created examples for you to see how this block looks along with other content.


    You can see it in sample # 4 and sample # 18

Block Header #11

  1. Overview

    This block was developed as a special header block. All blocks that are marked as header should only be used once on one page. This header block has a navigation bar, which can have two states. The standard state is described further in this documentation and the fixed-top state is shown in the example for this for this block. The navigation bar is hidden now, but you can activate it at any time by just removing the class ".hidden" from <header class="header-11 hidden">

  2. Installation

    If you haven’t already done all the instructions from the how to install page of this documentation, please do that first.

  3. CSS version:

    To use this block, copy and paste the following line of code into your HTML file:

    
    
     

    Features of Startup Framework

    You have the design, you have the code. We’ve created the product that will help your startup to look even better.

  4. LESS version:

    Copy the same code as in css version and paste it in your '.less' file. Put the following line after that code:

    @import '../../ui-kit/ui-kit-header/less/header-11.less';
  5. Component Modification:

    In this section you will see what modifications you can do to the block.

    This block, as many other header blocks in our framework, has a special place for background image, which is: <div class="background">...</div>. To put your own image as background you need to add CSS rules for this element. You can also manage the opacity for this elementsent. Here is an example:

    .background {
    	background-image:url('your image url’);
    	opacity: opacity value;
    }

    In the “Less" version, you can use the cross browser function for the opacity property:

    .opacity(value from 0 to 100);

    You can replace the content in this block with your own. In order to do this you need to replace the content between the tags <div class="span4">...</div>.

    This block has a video container where you can put your own video: <div class="player">...</div> .

    This block also has a special sign up functionality which is implemented with the following form: <div class="signup-form"> <form>...</form></div>. You can send the data from the form to the server or so something else with it.

  6. Samples

    We have created this example for you to see how this block looks combined with other content.


    You can see it in sample # 3