Instructions - Envision - Webflow HTML website template

Introduction Editing Designing Customizing Custom code

Introduction

This template uses the industry-leading Client-First framework. Make sure to read the documentation before modifying the page structure. If you run into issues or have any questions, don't hesitate to contact Jaroslav Dlask, the author of this template. For complete customization and ongoing website maintenance, consider using the Design & Development On-Demand service.

Editing

Edit mode in Webflow allows you to edit content without affecting site design or structure. It gives content editors like copywriters, product marketers, or content strategists the power to edit text, images, links, CMS Collection items and more inside the Designer. And not only can you see the edits you make directly on the canvas, you can also manage publishing for the site.

Please visit the official Webflow guide to edit mode for further information.

Designing

The Webflow Designer lets you customize your site structure, design the look and feel of your site, and add content, interactions, animations, and custom code to create fully functioning websites, landing pages, prototypes, presentations, and more.

Please visit the official guide to Webflow Designer for further information.

Customizing

Envision is built with variables - allowing you to customize this template in less than two minutes. Head over to the variables (V) and update following sections:

color/neutral
color/primary
color/secondary
color/success
color/alert
color/error
radius
typeface

Variables allow you to create a consistent design system for your site. You can create variables for size, color, and font styles and reuse them for a consistent and faster design experience. When you update a variable value, that change will update everywhere it’s used on the site, even on elements in different classes.

Please visit the official Webflow guide to variables for further information.

Custom code

To unlock the full potential of the Client-First framework, copy and paste the following code to the Global Styles component.

<style>

  /* Make text look crisper and more legible in all browsers */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Focus state style for keyboard navigation for the focusable elements */
  *[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
    outline: 0.125rem solid #4d65ff;
    outline-offset: 0.125rem;
  }

  /* Get rid of top margin on first element in any rich text element */
  .w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
    margin-top: 0 !important;
  }

  /* Get rid of bottom margin on last element in any rich text element */
  .w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
    margin-bottom: 0 !important;
  }

  /* Prevent all click and hover interaction with an element */
  .pointer-events-none {
    pointer-events: none;
  }

  /* Enables all click and hover interaction with an element */
  .pointer-events-auto {
    pointer-events: auto;
  }

  /* Make sure containers never lose their center alignment */
  .container-medium,.container-small, .container-large {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* 
  Make the following elements inherit typography styles from the parent and not have hardcoded values. 
  Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
  Uncomment this CSS to use it in the project. Leave this message for future hand-off.
  */
  /*
  a,
  .w-input,
  .w-select,
  .w-tab-link,
  .w-nav-link,
  .w-dropdown-btn,
  .w-dropdown-toggle,
  .w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
  }
  */

  /* Apply "..." after 3 lines of text */
  .text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* Apply "..." after 2 lines of text */
  .text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Apply "..." after 1 line of text */
  .text-style-1line {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  /* Adds inline flex display */
  .display-inlineflex {
    display: inline-flex;
  }

  /* These classes are never overwritten */
  .hide {
    display: none !important;
  }

  @media screen and (max-width: 991px), 
    @media screen and (max-width: 767px), 
    @media screen and (max-width: 479px){
      .hide, .hide-tablet{
        display: none !important;
      }
  }
  @media screen and (max-width: 767px)
    .hide-mobile-landscape{
      display: none !important;
  }
  }
  @media screen and (max-width: 479px)
    .hide-mobile{
      display: none !important;
  }
  }

  .margin-0 {
    margin: 0rem !important;
  }

  .padding-0 {
    padding: 0rem !important;
  }

  .spacing-clean {
    padding: 0rem !important;
    margin: 0rem !important;
  }

  .margin-top {
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-top {
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-right {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-right {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-bottom {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-bottom {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
  }

  .margin-left {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 0rem !important;
  }

  .padding-left {
    padding-top: 0rem !important;
    padding-right: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .margin-horizontal {
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
  }

  .padding-horizontal {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
  }

  .margin-vertical {
    margin-right: 0rem !important;
    margin-left: 0rem !important;
  }

  .padding-vertical {
    padding-right: 0rem !important;
    padding-left: 0rem !important;
  }

  /* Fluid font size
  html { font-size: calc(0.625rem + 0.41666666666666663vw); }
  @media screen and (max-width:1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
  @media screen and (max-width:1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
  @media screen and (max-width:479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }
  */

  ::selection {
    color: var(--surface--primary-invert); background: var(--surface--brand-primary);
  }

  .text-rich-text ol ol,
  .text-rich-text ul ul,
  .text-rich-text ol ul,
  .text-rich-text ul ol {
    padding: 0 0 0 1.5rem;
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
  }

  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

To enable the current document category indicator on the documents template page, copy and paste this code into the 'Before </body> tag' section.

<!-- Mark Current Document Category -->
<script>
  // Load all elements with the class 'document-categories_text' into an array
  const documentCategoryTexts = document.querySelectorAll('.document-categories_text');

  // Load the innerHTML of the element with the id 'current-category'
  const currentCategory = document.getElementById('current-category').innerText;

  // Iterate through each element in documentCategoryTexts
  documentCategoryTexts.forEach((element) => {
    // Check if the innerHTML of the current element matches the currentCategory
    if (element.innerText.trim() === currentCategory.trim()) {
      // If it matches, add the 'is-current' class to the parent element of this document-category_text
      element.parentElement.classList.add('is-current');
    }
  });
</script>