Get Started

Basic Structure

Designing websites using the Froala Design Framework is easy and requires minimal coding. Follow the steps below to learn how our Github Demo has been created.

This is how the basic structure looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Add meta tags. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Froala Design Framework Demo</title>
    <meta name="description" content="Froala Design Framework allows you to easily build modern websites with responsive design, parallax effects and flat colors. Minimal coding is required." />

    <!-- Add other meta tags. -->

    <!-- Include Font -->
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700">

    <!-- Include required CSS files listed in the Stylesheets section below. -->
  </head>

  <body>
    <!-- Include design blocks HTML code listed in the HTML section below.  -->

    <!-- Include required javascript files listed in the Javascript section below. -->
  </body>
</html>

HTML

Froala Design Framework uses certain HTML elements and CSS properties that requires the use of the HTML5 doctype <!DOCTYPE html>. Make sure you include it at the top of every page.

Choose the design block you wish to use and copy its HTML code in your <body>.

Example: If you use the content 2, design block 1, then you should copy the code below:

<section class="content-2 screen-height txt-white hi-white-smoke bg-black overlay-30 parallax-bg bgi-10 c-fade-out">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="effects-left">
          <h1 class="text-light text-xlarge">Website Design.</h1>
          <h3 class="text-light">The most simple and yet powerful way to design websites. Froala Design Framework is the perfect design tool if you want to impress your users.</h3>
        </div>
      </div>
    </div>
  </div>
</section>

Notice: The class .bgi-10 specifies the background image used. For more information about background images see Background.

Font

By default Froala Design Framework uses the Lato font family. You need to include the Lato font in your <head>.

<!-- Include Font -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700">

If you want to use another font family, you have to include it like above and then add the following CSS rule:

body {
  font-family: Font Name;
}

Notice: If you want to use Font Awesome Icons then you should also add the following line:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

Stylesheet

To get started you should include the css/froala.css CSS file. Additionally, depending on what design blocks you use you have to include the corresponding CSS file. Also, if you are using background image classes, such as .bgi-10 then you should include the css/backgrounds.css file too.

Example: If you use the a design block from content 2, then you should include its CSS file css/content-2.css.

<link rel="stylesheet" href="css/froala.css" />
<link rel="stylesheet" href="css/backgrounds.css" />
<link rel="stylesheet" href="css/content-2.css" />

Notice: For demo purposes we are including each CSS file in the example. In order to optimize CSS delivery and improve your website's performance, we strongly recommend you to use minified CSS code and combine all the files into a single CSS file.

Colors Stylesheet

The color CSS files are the ones inside the css/colors folder. They contain the CSS rules for changing the colors of the design blocks. Text, background and highlight colors can be changed only by using 3 CSS classes: .txt-*, .bg-* and .hi-*, where * may be replaced with one of our flat design colors.

Example: In the HTML section you can see that the design block from content 2 uses .txt-white, .bg-black and .hi-white-smoke. This means you should include the following CSS files:

<link rel="stylesheet" href="css/colors/white.css" />
<link rel="stylesheet" href="css/colors/black.css" />
<link rel="stylesheet" href="css/colors/white-smoke.css" />

Notice: For more details about the CSS color classes see Colors.

For demo purposes we are including each CSS file in the example. In order to optimize CSS delivery and improve your website's performance, we strongly recommend that you use minified CSS code and combine all the files into a single CSS file.

Javascript

Froala Design Framework uses the jQuery 1.10.0 library to enable Background Effects and Content Effects.

In addition to the jQuery library you have to include the JS file js/fdk.min.js which makes full use of the Skrollr JS library.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/fdk.min.js"></script>

Mobile Optimized

Each design blocks has been tested on mobile devices to ensure that your website is mobile friendly. In fact Froala Design Framework is designed with mobile first styles throughout the entire library.

To ensure your website is mobile-optimized, add the viewport meta tag to your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. You can disable zooming on mobile devices by adding user-scalable=no to the viewport meta tag. With zoom disabled users are only able to scroll the webpage and this may increase your website's native application feeling. However, for some websites disabling zoom can do more harm than good, so use it carefully.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Expected Result

We started from the basic structure, chosen content 2, design block 1, included the CSS and JS files and the result should look like the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Add meta tags. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Froala Design Framework Demo</title>
    <meta name="description" content="Froala Design Framework allows you to easily build modern websites with responsive design, parallax effects and flat colors. Minimal coding is required." />

    <!-- Add other meta tags. -->

    <!-- Include Font -->
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700">

    <!-- Include Font Awesome -->
    <!-- Content 2, variation 1 design block does not use Font Awesome Icons. However if you wish to add such icons you should also add this line. -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

    <!-- Include required CSS files. -->
    <link rel="stylesheet" href="css/froala.css" />
    <link rel="stylesheet" href="css/backgrounds.css" />
    <link rel="stylesheet" href="css/content-2.css" />

    <!-- Include colors CSS files. -->
    <link rel="stylesheet" href="css/colors/white.css" />
    <link rel="stylesheet" href="css/colors/black.css" />
    <link rel="stylesheet" href="css/colors/white-smoke.css" />
  </head>

  <body>
    <!-- Include content 2, variation 1 design blocks HTML code. -->
    <section class="content-2 screen-height txt-white hi-white-smoke bg-black overlay-30 parallax-bg bgi-10 c-fade-out">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-6">
            <div class="effects-left">
              <h1 class="text-light text-xlarge">Website Design.</h1>
              <h3 class="text-light">The most simple and yet powerful way to design websites. Froala Design Framework is the perfect design tool if you want to impress your users.</h3>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Include jQuery -->
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!-- Include Froala Design Framework javascript -->
    <script type="text/javascript" src="js/fdk.min.js"></script>
  </body>
</html>