Welcome to this idea. Introduction stuff here
This is an adaptation of Bootstrap made for usage in the Webflow environment. Adds some functionalities and base classes that give more consistency to Webflow builds. Some Bootstrap functionalities are omitted, some are already packaged within Webflow.
In this document I will use the following text styles to refer to various aspects within the webflow environment. Webflow Elements: example. Native Webflow classes: example. Custom Webflow classes: example.
Note: Due to differences in language, please be aware that some special actions must be taken to utilize this. For example. Bootstrap uses row which is not a default element within Webflow, instead we use a div and the class row.
Try designing with the base classes in mind. Ideally set combo classes before overriding initial classes, think: "Am I creating a global element or am I making a variation on a global element" for choosing between editing a base class vs creating a new combo class with the base. Try to set all your global styles at the beginning of a project to avoid conflicts down-the-line.
To make the development process easier, generally work with the mentality of adding vertical space below instead of above when possible, however this will not apply when adding the top-most section of a page. For example, all sections have a base of 5rem applied to the bottom margin, whereas the hero section has 5rem applied to the top as well to add section spacing below the navigation.
| | row
| | | col
| | | | [Element goes here]
To create a new section, drag in the default Webflow section element. Then add the class below that fits the purpose of the section.
Use class section
for body sections without backgrounds - these have 5rem margin-bottom which can be adjusted per site.
Use class section-bg for body sections with backgrounds
Use class section-hero for the top-most section of a page - as other sections have 5rem margin-bottom, a hero section also has 5rem margin-top applied.
Use class section-hero-bg for the top-most section of a page - as other sections have 5rem margin-bottom, a hero section also has 5rem margin-top applied.
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).While containers can be nested, most layouts do not require a nested container.
Use class container for responsive fixed width container
Use class container-fluid for full-width container, spanning viewport.
Still need to set up the referenced z-index compnents
Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.We don’t encourage customization of these individual values; should you change one, you likely need to change them all.
To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.
Use a native font stack that selects the best font-family for each OS and device.
For a more inclusive and accessible type scale, we assume the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
h1 through h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
I still need to set this up
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Make a paragraph stand out by adding lead.
Use class mark to add highlight to text. Example
Use class code to add code styling to text. Example
Use class small to add small styling to text. Example
Use class sup to add superscript styling to text. Example
Use class sub to add subscript styling to text. Example
Use class caption to add caption styling to text.
Use class lead to add caption styling to text. Example
By default, images in Webflow use max-width: 100%; and height: auto; so that it scales with the parent element.
You can use img-thumbnail to give an image a rounded 1px border appearance.
Anytime you need to display a piece of content—like an image with an optional caption (paragraph with caption class added in Webflow), consider using a figure.
This consists of a parent div with the class of figure. An image with the class of figure-img, and a paragraph with the combo class caption figure-caption.
Aligning the figure’s caption is easy with our text utilities. TBD
Use class list-unstyled for list without styling.
Use class list-inline when displaying a list horizontally.
Use class list-inline-item for the individual items on an inline list.
Note: Inline list items automatically have a bit of right margin. However Webflow does not offer front-end support for targetting the last item on the list. To alleviate this, set the last item as a this combo class list-inline-item last-child to the last item in the list.
Note: Webflow does not have a element for a horizonal rule. Instead we can add a div and give it the class hr.
no-gutters-row on row - no-gutters-col on column to remove column gutters
Block QuoteButton Text
How to use fontawesome webfont - is html Embed with the unicode from this cheat sheet