Skip to content

Custom components

Jump to bottom
Daniel Cañizares Corrales edited this page Sep 8, 2019 · 23 revisions

Bootlaterus includes out-of-the-box some new components to create an awesome responsive UI.

This docs are for a WIP 0.2.0. For current 0.1.5 see here.

Side navbars

bootlaterus has built-in support for side navbars without any additional javascript code.

  • Support for either left or right navbars.
  • Support for responsive collapsing of sidebars.
  • Support for responsive replacer visible when the sidebar is collapsed.
  • Support to add a margin for contents when the sidebar is visible.
  • Compatible with bootstrap color utilities and base navbars.

Side Navbar Replacer has a fixed height (56px by default), if you want to change that value, in your custom CSS or in-line style set a different value for both .navbar-side-replacer -> height and .navbar-side -> top. Note: This limitation is to avoid using javascript while keeping a relatively good looking responsive behavior for the side navbars.

JSFiddle full sample: open

Positioning Utilities

  • .h-center
  • .v-center
  • .hv-center
  • .to-bottom
  • .to-top
  • .to-left
  • .to-right

Sizing utils

  • .navbar-default-height
  • .vh-full
  • .min-vh-full
  • .vh-75
  • .vh-50
  • .vh-25
  • .min-vh-75
  • .min-vh-50
  • .min-vh-25

Aspect Ratio Utilities

We've added some CSS Classes to define Aspect Ratio (.ar- classes) of a given element.

  • .ar-16-10 (16/10 aspect ratio)
  • .ar-16-9 (16/9 aspect ratio)
  • .ar-4-3 (4/3 aspect ratio)
  • .ar-3-2 (3/2 aspect ratio)
  • .ar-8-5 (8/5 aspect ratio)

Extended Carousel

Bootlaterus includes extended classes to create carousels that look great with images of different sizes forcing a fixed aspect ratio (see previous paragraph Aspect Ratio Utilities) and using background-images that scale safely.

  • .carousel-{AN_ASPECT_RATIO}.
    • .carousel-16-10
    • .carousel-16-9
    • .carousel-4-3
    • .carousel-3-2
    • .carousel-8-5
  • Instead of adding images to carousel-items, add a div with the class .carousel-content and define a background image for it (by using an in-line style -recommended- or by creating additional css classes).

JSFiddle full sample: open

Backgrounds

Add a beautiful background to your website.

  • .background
  • .background .background-fixed
  • .background .background-fixed-full

Fonts

Use .h-font to use heading's font on your components.

  • .h-border-bottom
  • .h1-font-size
  • .h2-font-size
  • .h3-font-size
  • .h4-font-size
  • .h5-font-size
  • .h6-font-size
  • .text-small
  • .text-small-contents
  • .text-shadow

Interactables

Cards and other UI components are easier to implement as interactive elements.

  • .interactable class will add hover shadows and transitions.
  • .hover-animate-cf will animate color filter gradients (.cf-).
  • We still recommend:

Shadows

Use .shadow class to add a box-shadow to your components.

Additional colors

Bootlaterus has additional classes to add shadows and alpha-colors to your components:

  • .bg-light-alpha-1
  • .bg-light-alpha-2
  • .bg-light-alpha-3
  • .bg-dark-alpha-1
  • .bg-dark-alpha-2
  • .bg-dark-alpha-3
  • .bg-shadow-1
  • .bg-shadow-2
  • .bg-shadow-3

Color filters

Add beautifull gradients as color filters to your images: Sample

  • .bg-cf-pink-blue
  • .bg-cf-green-teal
  • .bg-cf-cyan-blue
  • .bg-cf-red-orange
  • .bg-cf-indigo-teal

Variants

  • .cf .cf-: Color filters to bu used directly with images.
  • .bg-cf: Color filters as background.
  • .bg-: Gradient without transparency.

Radial color filters

  • .bg-cf-radial-{any color}
  • .bg-cf-radial-transparent

Dark dropdowns

Add .dropdown-dark to a dropdown.

  • .dropdown .dropdown-dark

JSFiddle full sample: open

Clone this wiki locally