Developer Guide

Hey 🖐, welcome to this guide.

Starter HTML file

Use this code as your starter HTML file, then add your blocks in the body.

<!doctype html>
      <html lang="en">
      
      <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      
        
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
      
        
        <link rel="stylesheet" href="./app.css">
      
        <title>Your template</title>
      </head>
      
      <body>

</body>
      
      </html>

AخA
 
      <!doctype html>
      <html lang="en">
      
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
        <!-- font awesome 5 free -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      
        <!-- Poppins font from Google -->
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
      
        <!-- Your Custom CSS file that will include your blocks CSS -->
        <link rel="stylesheet" href="./app.css">
      
        <title>Your template</title>
      </head>

Starter CSS file

Use this code as your starter CSS file, then add your blocks after it.

:root {
        --primary: #5e22e6;
        --secondary: #0a1f44;
        --primary-invert: #fff;
        --secondary-invert: #fff;

--gradient-primary: linear-gradient(230deg, #7445ff, #520df4);
        --gradient-secondary: linear-gradient(230deg, #0a1f44, #020024);

/* DEFAULT COLOR OF TEXTS */
        --text-primary: #0a1f44;

/* FOR BUTTONS & INPUTS */
        --elements-roundness: 10rem;

--space-between-blocks: 5.3rem;
        /* for mobiles */
        --space-between-blocks-small-screens: 3rem;
      }

body {
        font-family: "Poppins", sans-serif;
        color: var(--text-primary);
      }

.space-between-blocks {
        padding-top: var(--space-between-blocks-small-screens);
        padding-bottom: var(--space-between-blocks-small-screens);
      }

@media (min-width: 992px) {
        .space-between-blocks {
          padding-top: var(--space-between-blocks);
          padding-bottom: var(--space-between-blocks);
        }
      }

/* Buttons */

button {
        color: inherit;
        padding: 0;
        background: none;
        border: none;
      }

button:focus {
        outline: none;
        box-shadow: none;
      }

.btn {
        font-size: 0.87rem;
        padding: 0.8rem 1.6rem;
        border: none;
        border-radius: var(--elements-roundness);
        transition: 0.2s all;
      }

@media (min-width: 992px) {
        .btn {
          padding: 0.8rem 2rem;
        }
      }

.btn,
      .btn:hover,
      .btn:focus {
        border: none;
        box-shadow: none;
        outline: none;
      }

.btn:hover,
      .btn:focus {
        transform: scale(1.05);
      }

.btn-primary,
      .btn-primary:hover,
      .btn-primary:focus {
        background: var(--gradient-primary, --primary);
        color: var(--primary-invert);
      }

.btn-secondary,
      .btn-secondary:hover,
      .btn-secondary:focus {
        background: var(--gradient-secondary, --secondary);
        color: var(--secondary-invert);
      }

.btn-primary--empty,
      .btn-primary--empty:hover,
      .btn-primary--empty:focus {
        color: var(--primary);
      }

.btn-sm {
        padding: 0.8rem;
      }

.highlight {
        color: var(--primary)
      }

/* block header */

.block__header {
        margin-bottom: 4rem;
      }

.block__title {
        font-size: 2rem;
        font-weight: 900;
        line-height: 1.4;
      }

@media(min-width: 992px) {
        .block__title {
          font-size: 2.5rem;
        }

.block__title--big {
          font-size: 3rem;
          line-height: 1.1;
        }
      }

@media(min-width: 1200px) {
        .block__title--big {
          font-size: 3.5rem;
          line-height: 1.2;
        }
      }

.block__paragraph {
        font-size: 1.1rem;
        line-height: 1.5;
        opacity: .9;
      }

@media(min-width: 992px) {
        .block__paragraph--big {
          font-size: 1.2rem;
          line-height: 1.6;
        }
      }

/* Icons */

.fr-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 5px;
        background: rgba(0,0,0,0.04);
        margin-bottom: 1.5rem;
        transition: .5s;
      }

.fr-icon--medium {
        font-size: 1.5rem;
        height: 3rem;
        width: 3rem;
      }

.fr-icon--large {
        font-size: 1.2rem;
        height: 3.25rem;
        width: 3.25rem;
      }

@media (min-width: 992px) {
        .fr-icon--large {
          height: 3.8rem;
          width: 3.8rem;
          font-size: 1.9rem;
        }
      }

/* Put your blocks here */

​x
 
      :root {
        --primary: #5e22e6;
        --secondary: #0a1f44;
        --primary-invert: #fff;
        --secondary-invert: #fff;
​
        --gradient-primary: linear-gradient(230deg, #7445ff, #520df4);
        --gradient-secondary: linear-gradient(230deg, #0a1f44, #020024);
​
        /* DEFAULT COLOR OF TEXTS */
        --text-primary: #0a1f44;
​
        /* FOR BUTTONS & INPUTS */
        --elements-roundness: 10rem;
​
        --space-between-blocks: 5.3rem;
        /* for mobiles */
        --space-between-blocks-small-screens: 3rem;
      }
​
      body {
        font-family: "Poppins", sans-serif;

 
      ...
      
      <!-- 👇 Remove this li -->
      <li javascript-language-selector=""
        class="hero-nav__item hero-nav__item--with-dropdown hero-nav__item--dropdown-right hero-nav__item--lg-dropdown-left mx-3 mx-lg-2 flex-grow-1 flex-lg-grow-0 d-flex justify-content-end">
        ...
      </li>
      
      ...
    

How to give the top sticky navbar a full width

Paste this code in your CSS file near after the Hero's CSS

 
      .hero-nav--is-sticky {
        box-shadow: none;
      }
​
      .hero-nav--is-sticky::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: white;
        width: 99999%;
        margin-left: -999%;
        z-index: -1;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
      }
    

How to change screenshots inside the MackBook & iPhone

For iPhone, you must resize your browser and take screenshot at 378px width and 825px height.

For MackBook, you must resize your browser and take screenshot at 1920px width and 1200px height.

How to change logo in the sticky navbar

Near to `src` attribute in HTML, you'll find another attribute called `change-src-onscroll`.

How to change the sticky navbar to not sticky

Search: `.hero-nav--is-sticky` then change this line: `position: fixed !important;` To `position: static !important;`

How to style your icons

Go to your CSS file and open the search input in your code editor, enter `fr-icon` and you'll find the CSS code of all your icons.

Check these examples for more info.

FREE resources to change your icons

SVG icons

Font icons

to use font icons, remove the SVG code and replace it with `<i class="fas fa-{icon name}"></i>`

https://fontawesome.com/cheatsheet

Image icons

You can use image icons only in block-12 (this blocks is built to use images as icons)

https://www.flaticon.com

How to include VideoJS

Note: You need this only if you are using a block contains a video.

You have to include the CSS & JavaScript files of this library like the example down below.

 
      <head>
        ...
        👇
        <link href="https://cdn.jsdelivr.net/npm/video.js@7.5.0/dist/video-js.min.css" rel="stylesheet" />
        <script>
          /* Disable VideoJS tracking */
          window.HELP_IMPROVE_VIDEOJS = false;
        </script>
        ☝️
        ...
      </head>
      <body>
        ...
​
        👇
        <script src="https://cdn.jsdelivr.net/npm/video.js@7.5.0/dist/video.min.js"></script>
        ☝️
      </body>
    

How to add blocks that contain a slider.

Note: You need this only if you are using a block contains a slider.

You have to include the CSS file of this library like the example down below.

 
      <head>
        ...
        👇
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
        ☝️
        ...
      </head>
    

🤔 If you have any questions or suggestions, do not hesitate to contact us at ✉️ hello@frontendor.com