LogoLogo
9.0.x
9.0.x
  • Overview
    • About Varbase
    • Roadmap
    • Release Cycle and Supported Versions
    • How to Get Support
  • Developers
    • Getting Started
    • Installing Varbase
      • Requirements
      • Installing Varbase with DDEV
      • Installing Varbase with Lando
    • Understanding Varbase
      • Basic Concepts
      • Core Components
        • Varbase Core
          • Varbase Admin
          • Varbase Page
          • Varbase Security
          • Varbase Webform
          • Varbase Default Content
          • Varbase Tour
        • Varbase Media
        • Varbase Editor
        • Varbase Email
        • Varbase SEO
        • Varbase Workflow
        • Varbase Layout Builder
          • Varbase Landing page (Layout Builder)
          • Varbase Heading Block
          • Varbase Rich Text Block
          • Varbase HTML Code Block
          • Varbase Media (Image/Video) Block
          • Varbase Gallery Block
        • Varbase Total Control Dashboard
        • Vartheme Claro
        • Vartheme BS4
      • Optional Components
        • Varbase API
        • Varbase Internationalization
        • Varbase Media Hero Slider
        • Varbase Carousels
        • Varbase Blog
        • Varbase Search
        • Varbase Social Single Sign-On
        • Varbase Media Twitter
        • Varbase Media Instagram
        • Varbase Content Planner
        • Varbase Bootstrap Paragraphs
          • Varbase Bootstrap Paragraphs Text and Image
        • Varbase Landing Page (Paragraphs)
      • Additional Components
        • Varbase Media Header
        • Varbase FAQs
        • Varbase Reports
        • Varbase Commerce
        • Varbase YouTube Import
      • Development Components
        • Varbase Development
        • Varbase Style Guide
        • Reroute Email
        • Varbase Updates Helper
    • Configuring a Varbase Site
      • Navigation
        • Defining Active Menu Trail Using Menu Position
      • Using View Modes Inventory
      • Content Moderation and Workflows
      • URL Aliases in Varbase/Drupal
        • Configuring URL Aliases
        • Managing URL Aliases
      • Managing URL Patterns for Multilingual Websites
      • Managing Date and Time Formats to Display Across the Site
      • Using Varbase Layout Builder
        • Creating a Landing Page With Varbase Layout Builder
        • Activating Varbase Layout Builder for Content Types
      • Configuring Pathologic When Going Live
      • Configuring SEO Features
        • Disallow Oembed Media Links
      • Configuring Security Features
        • Spam Protection
        • Password Policies
        • Other Security Kits
        • Flood Contorl
        • Enable HTTP Password Authentication
      • Configuring JSON:API Features
      • Configure Varbase Media Hero Slider
      • Configuring Varbase Media Header
      • Configuring Varbase Mailer Settings
        • Configure Symfony Mailer
        • Configure Swift Mailer
        • Switch From Swift Mailer to Symfony Mailer
      • Entity Definition Update Manager Class
      • Module Installer Factory Class
    • Theme Development with Varbase
      • Understanding The Vartheme Base Theme
      • Creating Your Own Theme
      • Local Tasks and Moderation Sidebar
      • Add Preloaded Fonts in Vartheme
      • Switch From Node SASS to Dart SASS for Old Sub-Themes
    • Launching a Varbase Site to Production
    • Updating a Varbase Site
      • Understanding Varbase Updater Package
      • Handling Patches When Updating
      • Handling Configuration Updates
      • Updating Varbase to work with Composer 2.0
      • Updating Drush to the Latest Stable Version
      • Version Update Guides
        • Updating Varbase ~9.0 to Drupal 10
        • Switch from CKEditor 4 to CKEditor 5 in Varbase ~9.1.0
        • Updating from Varbase 8.x to 9.x
    • Varbase Patches
    • Frequently Asked Questions (FAQs)
    • Extending Varbase
      • Overriding Varbase
      • Creating Your Own Feature
      • Creating A Sub Profile From Varbase
        • Varbase Sub Profile Generator
        • Varbase Sub Profile Basic Template
        • Varbase Sub Profile Basic Project Template
      • Install Needed YARN and Gulp Tools
      • Compiling Provided Component Styles
      • Check Standards/Practice Coding And Linting
  • Content Designers
    • Terminology
    • Accessing the Administration Area
      • Website Environments
    • User Management
      • Allow Email/Username Login & Registration
      • Default Roles and Site Personas
        • Edit Roles' Permissions
        • Managing Roles
      • Add User
      • Edit User
      • Masquerading as another user
    • Dashboard
      • Reports
    • Content Structure
      • EntityQueues
      • Menu Management
        • Add Menu Items
        • Update Menu Items
        • Adding a Page to the Menu
      • Taxonomies
        • Manage Vocabulary
        • Edit Vocabulary
        • List Terms
        • Add Terms
        • Reorder and Edit Terms
      • Webforms
        • Setting up Emails Handler Conditions
        • Setting up Confirmations Message Settings Types
    • Content Management
      • Create Content
        • Add a Basic page
        • Add a Landing page
        • Add Blog
        • Add Media
          • Image
          • Remote video
          • Video
      • Modify Content
      • Delete Content
      • Preview Content
      • Bulk Edit Content
      • Content Moderation
      • Publish Content
      • URL Alias
    • About Layout Builder
      • Section
      • Custom Blocks
        • Heading Block
        • Basic Block
        • Media Block(Image/Video)
        • Rich-Text Editor “WYSIWYG”
      • Managing Blocks
    • Search Engine Optimization
      • XML Sitemap
      • Meta Tags in Varbase
      • URL Redirects
      • Domain Redirects
      • Prevent a Single Content From Being Indexed
    • Site Configuration
      • System
        • Clearing Varbase Cache
        • Google analytics
        • Mail templates
      • User interface
      • Development
      • Varbase settings
      • Web services
    • Common Error Handling Tips
  • Contributing
    • Contributing to Documentation
Powered by GitBook
On this page
  • Vartheme BS4: Varbase Theme (Bootstrap 4 - SASS)
  • Varbase Components and SMACSS
  • Vartheme BS4 theme and SMACSS
  • Drupal SMACSS
  • Bootstrap Framework
  • Vartheme BS4 Theme Custom Components CSS Classes
  • Vartheme BS4 Theme Custom Layouts CSS Classes
  • Example Varbase Custom Components
  1. Developers
  2. Theme Development with Varbase

Understanding The Vartheme Base Theme

PreviousTheme Development with VarbaseNextCreating Your Own Theme

Last updated 1 year ago

Vartheme BS4: Varbase Theme (Bootstrap 4 - SASS)

A base theme for standard websites.

Based on the theme (Bootstrap 4 - SASS).

Mostly base Varbase layouts and styling of components are managed in the Vartheme BS4 base theme.

Customizing for a project? keep using the Vartheme BS4 base theme by:

A sub theme could be generated automatically to start with. Installed and set as default theme for a website. Changes over coloring, theming, having custom web components, adding more libraries would be managed under the new sub theme, without changing the base theme.

This way a guaranteed full integration between Varbase components and Varbase themes.

Varbase Components and SMACSS

All Varbase components organize CSS files under libraries with full use of in mind.

A flexible guide to developing sites small and large.

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.

Inspected for Varbase components with basic or no styling to look better when Vartheme BS4 or a sub theme of it was the default theme for the site.

Vartheme BS4 theme and SMACSS

Have a look at the SCSS and CSS folders

Drupal SMACSS

Drupal follows a SMACSS-style categorization of its CSS rules:

  1. Base — CSS reset/normalize plus HTML element styling.

  2. Layout — macro arrangement of a web page, including any grid systems.

  3. Component — discrete, reusable UI elements.

  4. State — styles that deal with client-side changes to components.

  5. Theme — purely visual styling (“look-and-feel”) for a component.

Refer to Drupal.org standards for CSS file organization (for Drupal 9)

Refer to Drupal.org standards for CSS architecture

Bootstrap Framework

Build fast, responsive sites with Bootstrap.

Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Browse the list of all Bootstrap 4 components

Vartheme BS4 Theme Custom Components CSS Classes

Vartheme BS4 Theme Custom Layouts CSS Classes

Example Varbase Custom Components

Vartheme BS4 too organize CSS files under libraries with full use of in mind.

SCSS:

CSS:

: Bootstrap callouts. Have the Bootstrap styling for call outs component.

: Styles a list of tags, which much looks like the pager with rounded borders.

: Edge to Edge layout for content.

: Equal height layout for bootstrap rows. ( variations with -sm, -md, -lg, and -xl ) will work within the Bootstrap default breakpoints for the theme.

.varbase-heroslider-media : style.

: Number of view mode components, layouts, and themes, which you can copy from the module and custom for each content type. ( Have a look at )

Varbase
Bootstrap Barrio
Creating Your Own Theme
SMACSS
Scalable and Modular Architecture for CSS
SMACSS
https://git.drupalcode.org/project/vartheme_bs4/-/tree/9.0.x/scss
https://git.drupalcode.org/project/vartheme_bs4/-/tree/9.0.x/css
https://www.drupal.org/docs/develop/standards/css/css-file-organization-for-drupal-9
https://www.drupal.org/docs/develop/standards/css/css-architecture-for-drupal-9
https://getbootstrap.com/docs/4.6/components
.bs-callout
.vb-tags
.bg-edge2edge
.equal-height
Varbase Hero slider media
View Modes Inventory - Bootstrap Ready
Using the VMI