Instructions
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.v
Styling
This template 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:
- typeface
- radius
- color/primary
- color/secondary
- color/neutral
- color/success
- color/alert
- color/error
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); } }
*/
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
color: var(--surface--primary); background: var(--surface--brand-primary);
}
.sub-nav_component {
scrollbar-width: none; /* For Firefox - hides the scrollbar */
}
.sub-nav_component::-webkit-scrollbar {
display: none; /* For WebKit browsers like Chrome, Safari, Edge */
}
.text-rich-text iframe {
border-radius: 16px;
}
.nav_menu_content {
scrollbar-width: none; /* For Firefox - hides the scrollbar */
}
.nav_menu_content::-webkit-scrollbar {
display: none; /* For WebKit browsers like Chrome, Safari, Edge */
}
</style>