Initializing help system before first use

Working with Page Layouts and Styling

VDL incorporates a default style sheet derived from a foundation based on Bootstrap 3.x. This arrangement inherits some rules on how you can augment the built-in styling that applies to container sizes and the horizontal spacing of elements.

VDL components can be placed within a hierarchy of containers that correspond closely to similarly-named container and layout classes in Bootstrap.

Where in VDL there are vdl-section, vdl-row and vdl-column tags, they correspond to container, row and col-*-* classes in Bootstrap 3.x.

Covered Topics
  • Custom CSS Styling
    You can provide custom CSS styling as a file called application.css within a css subfolder in your app's client_resources directory. The file is implicitly included in each of your app's views.
  • Using Sections to Organize Page Content
    Introduced in the example app earlier, VDL sections can help you structure and organize your page content - they correspond to the Bootstrap container class.
  • Creating Column Layouts
    Use the vdl-column tag to create multi-column layouts.
  • Using Grid Layouts
    Use the vdl-row tag within a section to create a grid layout.
Parent Topic Using VDL to Create Custom Views