Components
- Code
- Documentation
- Miscellaneous
- User interface
Documentation
Images
Ecosystem
Licence
http://www.gnu.org/licenses/old-licenses/gpl-2.0.htmlpermet d'avoir un thème de base en Bootstrap 5 à surcharger
Release
Covered by Drupal's security advisory policy
Release type : New features
Covered by Drupal's security advisory policy
Release type : Bug fixes
Covered by Drupal's security advisory policy
Release type : Bug fixes
Covered by Drupal's security advisory policy
Release type : Bug fixes
Description
Barrio is a Drupal - Bootstrap 5 Base Theme. Drupal markup is completely overwrite as standard Bootstrap 5 markup using from roots twig templates based on Single Directory Components referencing only to Bootstrap CSS and little custom CSS.
Barrio is Flex based for whatever is not covered by Bootstrap. Use SASS Barrio Drupal Starterkit Subtheme to streamline your development, creating custom compiled Bootstrap styles by just changing a few variables.
Single Directory Components defined as low level components, to allow subthemes to build their own components based on Barrio.
Color Management
Color management using predefined or custom color combinations, declaring CSS variables.
Variables will generate a complete color scheme overriding Bootstrap default color variables.
Variables could also be referenced from custom CSS or SCSS
jQuery is no longer required on Barrio 5.5.*.
If your subtheme requires jQuery ensure that the dependency is declared on your subtheme info file before upgrading to 5.5.7
Docksal Barrio Drupal 9 Boilerplate
This theme has no style rather than layout to serve as a start Base Theme.
Starterkit subtheme is fully integrated with Color Module.
1, 2 or 3 columns are handled automatically with configurable column widths. An extensive easy to use configuration form allows to configure 'Bootstrap Style' tables, buttons, navbars, containers, rows, Google Fonts, icons, messages, menus, etc.
To upgrade from Barrio 8.x-4.x to Barrio 5.1.x, if your theme does not use the Barrio Layouts on Display Suite then you can upgrade your Barrio theme with no harm
If your theme use Barrio Layouts on Display Suite please read before upgrading to Barrio 5.x.
Cards and Media Bootstrap layouts are declared to use them out of the box on Barrio Subthemes.
Bootstrap Cards and Media Quick Tutorial.
Now Barrio comes with optional SVG Bootstrap icons defined for Drupal default menu links, to activate go to Font & Icon settings. New Barrio version also includes automatically generated classes for all menu links.
For awesome block style manipulation use Block Styles Module. With this module any block could be turned into dropdown, modal or collapse with a click. It also let you add classes to blocks allowing padding and margins being handled from configuration.
Layout note
Barrio 5.x layouts are defined using layout discovery classes, this layouts can be used out of the box with Layout Builder, Display Suite or any other module that consumes layout.
Layouts included:
- Cards (several formats)
- Media
- 2 columns (6-6, 3-9, 9-3)
- 3 columns (4-4-4)
- 4 columns (3-3-3-3, collapse to 6-6 on small)
✔ SASS
Almost every Drupal CSS is overriten using Bootstrap variables for sitewide standard colors and spacing. Based on Google Material Design full color scheme is generated including variants for main and secondary colors.
This subtheme is compatible with Bootstrap Material Design.
Want to learn more:
✔ Features
- Columns
- Column based grid
- 1, 2 and 3 column automatic layouts
- User defined column widths
- Container and container fluid layout
- Markup
- Standard Bootstrap 4 or 5 markup replacing Drupal twig templates
- Easy to customize twig templates
- Standard markup for header navigation
- Bootstrap 5 offcanvas menu
- Hide node titles on all view modes
- Multilevel main menu flyout submenus options
- Collapsed left slide main menu option
- Bootstrap form elements, including custom elements
- Classes to identify menu links
- Customized Bootstrap themed tables
- SVG icons integration on default links
- Scroll class on body on window scroll, with scroll up and down class added on scroll behaviour
- Three options for messages customizations
- Replace Commerce templates with Bootrstrap twig template
- Features
- Color Module integration on subtheme
- Bootswatch integration via CDN
- Predefined Google Fonts combinations
- Card Column Views template to alllow card column listings
- Extra theme suggestions for entities and blocks
- Body classes for entities and views
✔ Installation
- Download and install Barrio.
- Define Barrio Settings
- Choose how to load Bootstrap files, CDN or locally
- If load Bootstrap files from CDN, choose version to load on Bootstrap Library settings.
✔ Bootstrap Libraries Load
To copy dist files into libraries folder during installation, you can add the following 2 lines of script into your main composer.json file:
"scripts": {
"post-install-cmd": [
"@composer drupal-scaffold"
],
"post-update-cmd": [
"@composer drupal-scaffold",
+ "mkdir -p web/libraries/bootstrap",
+ "cp -R vendor/twbs/bootstrap/dist web/libraries/bootstrap"
],
This will mantain your bootstrap version up to date when updating via composer.
Also, Bootstrap Libraries could be loaded by the Bootstrap Library module, this give you extra flexibility to load the library either via CDN or locally, choosing an up to date Bootstrap version regardless of the theme version.
✔ Menu dropdowns
Barrio works with menu dropdowns, but they are handled via Bootstrap dorpdown javascript. To work properly all parent menu link must be set as expanded.
✔ Funding
Barrio es basically a personal effort shared with the community and with a high growth in the last months. Is this them has been usefull to your organization please consider taking advantage of our consulting services or making a donation to support further development.
Documentation
Bootstrap Barrio Installation
Basic installation and subthemes
Bootstrap Barrio Configuration Settings
Configuring Bootstrap Barrio using the settings form
Bootstrap Barrio Features
Features to improve your subtheme
Bootstrap Barrio Tips & Tricks
Do more on your subtheme with simple code snippets
Drupal 7
Bootstrap Barrio Installation
Basic installation and subthemes
Bootstrap Barrio Configuration Settings
Configuring Bootstrap Barrio using the settings form
Bootstrap Barrio Features
Features to improve your subtheme
Bootstrap Barrio Tips & Tricks
Do more on your subtheme with simple code snippets
Bootstrap Barrio is a sub-theme of the Bootstrap Theme, adding 1, 2 or 3 columns with configurable widths, Skinr manipulation of blocks for easy span width control, Parallax / One Page option for front page, definition of blocks as modals, YAMM megamenu using blocks as sub-menus, full width slider region, device visibility configuration for blocks, fixed 970px width disabling responsiveness.
✔ Following modules and themes are requiered:
- jQuery Update - 7.x-2.3 or higher. Bootstrap requires a minimum jQuery version of 1.7 or higher. You must manually set this in the configuration after it is installed.
- Bootstrap Theme
- Skinr
Following modules are recommended:
- DHTML Menu. Works like charm with Twitter Bootstrap menus.
- Display Suite. Allows personalization of any field, making it easy to convert to Bootstrap markup. Three basic Bootstrap layouts are available on Display Suite: Thumbnails, Panels and Media
✔ Installation
- Unpack and upload Bootstrap Theme in sites/all/themes. Installing in default will drop errors.
- Unpack and upload Bootstrap Barrio within your default's themes folder (usually sites/default/themes).
- Download Twitter Bootstrap Library and install on sites/all/libraries/bootstrap and enable with Bootstrap Library Module or just configure CDN loading on theme's administrator.
- Download and enable the Skinr module, set permissions if you're not uid 1
- Configure jQuery update to version 1.7, version 1.8 have weird behaivour on views.
✔ One Page / Parallax
From version 7.x-3.5 there is an aditional option that allows to show fron page as One Page, side bars are disabled and all regions will have full width backgrounds.
For a complete configuration you will want to use the following modules:
- Void menu, will let set menu items pointing to anchors on the same page.
- Parallax background, will add parallax effects to your One Page regions.
- Scroll Reveal, nice effects when element enters viewport.
✔ IE8 compatibility
See: IE8 Drupal Bootstrap Compatibility
Mantainers of this theme:
Sponsored by:
Toutes les informations proviennent du site drupal.org