Installation

Startup framework uses HTML5 doctype! So your HTML file should start with following rows:

<!--DOCTYPE html -->
...

First, you need to have the Startup framework package or have access to its repository on Github.

Place the folder containing the Startup framework into the root directory of your project. (You can change its location, but you should be careful with the URLs in that case).

The Startup framework has two abstract versions for your use.

Let's Start!

If you have no experience developing with "LESS", you can use this version. In order to start developing with the css version you only need to know HTML and CSS (and JavaScript, if you want do more interesting effects).

First step. Put following code into your HTML file:

<!-- this code between <header> ... </header> -->
<link rel="stylesheet" href="(way to the startup folder)/flat-ui/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="(way to the startup folder)/flat-ui/bootstrap/css/bootstrap-responsive.css">
<link rel="stylesheet" href="(way to the startup folder)/flat-ui/css/flat-ui.css">
<!-- Using only with Flat-UI (free)-->
<link rel="stylesheet" href="(way to the startup folder)/common-files/css/icon-font.css">
<!-- end -->
<link rel="stylesheet" href="(way to the startup folder)/common-files/css/animations.css">
<!-- this code directly before </body> -->
<script src="(way to the startup folder)/common-files/js/jquery-1.10.2.min.js"></script>
<script src="(way to the startup folder)/flat-ui/js/bootstrap.min.js"></script>
<script src="(way to the startup folder)/common-files/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="(way to the startup folder)/common-files/js/modernizr.custom.js"></script>
<script src="(way to the startup folder)/common-files/js/page-transitions.js"></script>
<script src="(way to the startup folder)/common-files/js/easing.min.js"></script>
<script src="(way to the startup folder)/common-files/js/jquery.svg.js"></script>
<script src="(way to the startup folder)/common-files/js/jquery.svganim.js"></script>
<script src="(way to the startup folder)/common-files/js/jquery.parallax.min.js"></script>
<script src="(way to the startup folder)/common-files/js/startup-kit.js"></script>

Second step. Insert the styles for the elements you want to use:

<!-- header -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-header/css/style.css">
<!-- content -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-content/css/style.css">
<!-- blog -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-blog/css/style.css">
<!-- contacts -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-contacts/css/style.css">
<!-- crew -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-crew/css/style.css">
<!-- price -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-price/css/style.css">
<!-- projects -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-projects/css/style.css">
<!-- footer -->
<link rel="stylesheet" href="(way to the startup folder)/ui-kit/ui-kit-footer/css/style.css">

Finally, choose the block you want to use and follow the instructions for it!

The "LESS" version

It's your choice, if you want to use "LESS". We have done everything to make the usability of our framework simpler.

The first step is the same as with the simple version.

Second step. In your main '.less' file add the following lines of code:

@import '(way to the startup folder)/flat-ui/less/config.less';
@import '(way to the startup folder)/flat-ui/less/mixins.less';
/*only fo flat-ui free*/
@import '(way to the startup folder)/common-files/less/flat-ui-free2.0.0-fix.less';
/* end only for flat-ui free*/
@import '(way to the startup folder)/common-files/less/mixins.less';
@import '(way to the startup folder)/common-files/less/common.less';
@import '(way to the startup folder)/common-files/less/navbar.less';
@import '(way to the startup folder)/common-files/less/helper.less';

The last step is the same as with the simple version.

Responsive Tip

All components of Startup framework use responsive design. Some of them could have differences between browsers that support JavaScript and browsers without JavaScript support. Those differences are not critical. But if you are developing a product for these particular browsers, please be careful and don't forget to test the result.

Flat UI

Startup Framework based on Flat UI Free. You can add new elements using Flat UI Pro Version.

Learn More

Video Tutorials

Video tutorials show you how to make a web-site for your startup from design to code.

Watch Tutorials

Have a Question?

You can leave your questions and comments on GitHub or e-mail us. Also we have F.A.Q.

F.A.Q Page