Bootstrap Framework and Drupal
Transcript of Bootstrap Framework and Drupal
![Page 1: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/1.jpg)
BOOTSTRAPFRAMEWORKAND DRUPALCreated by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
WHAT IS BOOTSTRAPBootstrap is an open source projectthat can be used by front enddevelopers and site builders in awide variety of ways from beginnerto advanced
Bootstrap is the most popular HTML CSS and JS frameworkfor developing responsive mobile first projects on the web
SIMILAR PROJECTSFoundationPure CSS
PREDECESSORS960 GridsYUI Grids
Originally developed at Twitter by and todocument and share common design patterns and assets
within the company
mdo fat
WHO USESBOOTSTRAP
Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 2: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/2.jpg)
WHAT IS BOOTSTRAPBootstrap is an open source projectthat can be used by front enddevelopers and site builders in awide variety of ways from beginnerto advanced
Bootstrap is the most popular HTML CSS and JS frameworkfor developing responsive mobile first projects on the web
SIMILAR PROJECTSFoundationPure CSS
PREDECESSORS960 GridsYUI Grids
Originally developed at Twitter by and todocument and share common design patterns and assets
within the company
mdo fat
WHO USESBOOTSTRAP
Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 3: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/3.jpg)
Bootstrap is the most popular HTML CSS and JS frameworkfor developing responsive mobile first projects on the web
SIMILAR PROJECTSFoundationPure CSS
PREDECESSORS960 GridsYUI Grids
Originally developed at Twitter by and todocument and share common design patterns and assets
within the company
mdo fat
WHO USESBOOTSTRAP
Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 4: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/4.jpg)
SIMILAR PROJECTSFoundationPure CSS
PREDECESSORS960 GridsYUI Grids
Originally developed at Twitter by and todocument and share common design patterns and assets
within the company
mdo fat
WHO USESBOOTSTRAP
Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 5: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/5.jpg)
Originally developed at Twitter by and todocument and share common design patterns and assets
within the company
mdo fat
WHO USESBOOTSTRAP
Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 6: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/6.jpg)
WHO USESBOOTSTRAP
Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 7: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/7.jpg)
Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 8: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/8.jpg)
And about 10 million more BuiltWithcom
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 9: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/9.jpg)
The Bootstrap contributed Drupal theme is the second mostpopular theme on Drupalorg with over 110000 installsalmost 700000 downloads
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 10: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/10.jpg)
Joomla uses Bootstrap in coreWordPress has 221 Bootstrap-based themes 11 of alltheir themesThemeforest lists 19645 designs and an incredible 34 ofthose refer to using Bootstrap
Love it or Hate it Bootstrap is Winning the Web - August 12 2015
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 11: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/11.jpg)
WHAT MAKESUP THEBOOTSTRAPFRAMEWORK
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 12: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/12.jpg)
THE BOOTSTRAP FRAMEWORKINCLUDES
a responsive grid systema large amount of theme-able HTML and CSS contentelementsa very readable Typography basea number of Javascript components that add additionalfunctionalityand documentation about all of it
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 13: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/13.jpg)
RESPONSIVE GRID SYSTEMContainer Fluid (full width) or Container (fixed width)RowColumns (12)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 14: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/14.jpg)
RESPONSIVE GRID SYSTEM
ltdiv class=container-fluidgt ltdiv class=rowgt ltdiv class=col-md-8gtLorem ipsumltdivgt ltdiv class=col-md-4gtSed ut perspiciatisltdivgt ltdivgt ltdivgt
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 15: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/15.jpg)
RESPONSIVE GRID SYSTEM
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 16: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/16.jpg)
RESPONSIVE GRID SYSTEMColumns will wrap if more that 12Columns can be set per responsive screen sizeColumns can be offsetColumns can be ordered
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 17: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/17.jpg)
CONTENT ELEMENTSOver a dozen reusable components built to provide
iconography dropdowns input groups navigation alertsand much more
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 18: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/18.jpg)
Dropdowns ButtonsInputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels Wells
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 19: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/19.jpg)
CARDS COMING IN BOOTSTRAP 4Replaces wells thumbnails and panels
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 20: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/20.jpg)
TYPOGRAPHY BASEHEADERS
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 21: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/21.jpg)
TYPOGRAPHY BASEBLOCKQUOTES
TABLES
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 22: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/22.jpg)
TYPOGRAPHY BASEFORMS
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 23: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/23.jpg)
JAVASCRIPTSBring Bootstraps components to life with jQuery plugins
Easily include them all or one by one
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 24: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/24.jpg)
ModalDropdown Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts Button states
CollapsibleAccordions
Carousel Affix
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 25: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/25.jpg)
DOCUMENTATIONEvery feature of Bootstrap is documented This
documentation is always available online and can be easilyset up in local development and staging environments
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 26: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/26.jpg)
PROS amp CONSOF USING THEBOOTSTRAPFRAMEWORK
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 27: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/27.jpg)
ADVANTAGESDocumentation
Standardization helps teams become more productiveOnboarding new developers is quicker
CustomizableCompletely customizable for large projectsMixins for adding existing styles to semantic html
Best practices for smalllow budget projectsOpen Source - MIT License
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 28: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/28.jpg)
DISADVANTAGESBootstrap is largebloatedheavyBootstrap sites all look the sameDecisions are made for youJavascript not robust enoughUpgrading is very difficultCan lead to non-semantic HTML
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 29: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/29.jpg)
USING THEBOOTSTRAPDRUPAL THEME
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 30: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/30.jpg)
BOOTSTRAP DRUPAL THEMEVery mature for Drupal 7Release candidate for Drupal 8Comes with Subtheme right out of the boxGreat documentation at drupal-bootstraporg
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 31: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/31.jpg)
TWO OPTIONS TO CREATING A SUBTHEMELoading Bootstrap Framework from a Content DeliveryNetwork (CDN)Compiling your own using a local LESS preprocessor
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 32: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/32.jpg)
CREATING A SUBTHEME - CDN (D7)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tositesallthemesRename the folder to your new theme nameRename starterkitcdn toYOURNEWTHEMENAMEinfoEdit the info fileActivate and Set Default your new theme
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 33: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/33.jpg)
CREATING A SUBTHEME - CDN (D7)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 34: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/34.jpg)
CREATING A SUBTHEME - CDN (D8)Download the Bootstrap theme as you normally wouldIn the theme copy the starterkitscdn folder tothemescustomRename the folder to your new theme nameRename 5 files gtgtgt
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 35: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/35.jpg)
CREATING A SUBTHEME - CDN (D8)Rename THEMENAMEtheme toYOURNEWTHEMENAMEthemeRename THEMENAMEstarterkityml toYOURNEWTHEMENAMEinfoymlRename THEMENAMElibrariesyml toYOURNEWTHEMENAMElibrariesymlRename configinstallTHEMENAMEsettingsymltoconfiginstallYOURNEWTHEMENAMEsettingsymlRename configschemaTHEMENAMEschemayml toconfigschemaYOURNEWTHEMENAMEschemayml
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 36: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/36.jpg)
CREATING A SUBTHEME - CDN (D8)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 37: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/37.jpg)
CREATING A SUBTHEME - CDN (D8)Edit YOURNEWTHEMENAMEinfoymlEditconfigschemaYOURNEWTHEMENAMEschemaymland rename - THEMENAMEsettings andTHEMETITLE settingsActivate and Set Default your new theme
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 38: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/38.jpg)
CREATING A SUBTHEME - CDN VERSIONScssstylecss to add your custom style overridesGrab what you need to override from the parentthememodulescore and add to your new themeDont forget to add your own logopng screenshotpngand faviconico
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 39: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/39.jpg)
CREATING A SUBTHEME - LESS VERSIONSSet up is the same but with these additional stepsDownload the into theroot of your new theme THEMENAMEbootstrapYou will need a - GruntGulpAer you make changes to the less files you have tocompile them into theTHEMENAMEcssstylescss
Bootstrap Framework Source Files
LESS compiler
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 40: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/40.jpg)
CREATING A SUBTHEME - LESS VERSIONSTHEMENAMElessvariable-overridesless -Allows you to override the variables provided by theBootstrap FrameworkTHEMENAMElessbootstrapless - A copy of theBootstrap Frameworks file with the addition of includingvariable-overrideslessTHEMENAMElessoverridesless - Containsoverrides to properly integrate Drupal with the BootstrapFrameworkTHEMENAMElessstyleless - The glue thatcombines the bootstrapless and overridesless filestogether Generally you will not need to modify this file
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 41: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/41.jpg)
CREATING A SUBTHEME - LESS VERSIONSOnce you have compiled all of the mixing will be run andthe less files will be concatenated into one css file
THEMENAMEcssstylescss
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 42: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/42.jpg)
SEE ALSORADIX THEME
Radix is another base theme for Drupal It has BootstrapSass Gulp BrowserSync and Font Awesome built-in
Used in a lot of distributionsHas various PanelsViewsetc contrib modulesAlpha release for Drupal 8
There are also currently with the word Bootstrapin them on Drupalorg
171 themes
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 43: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/43.jpg)
COMPILINGYOUR OWNTHEME USINGBOOTSTRAP
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 44: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/44.jpg)
WHY BUILD YOUR OWN THEMEFor complete control of markupIf your designer is designing in the browser andproviding htmlcssIf you are using a prototyping tool like whichexports htmlcssIf you are making your own htmlcss prototypes beforemoving to Drupal
Sketch
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 45: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/45.jpg)
THEMEABLE DRUPAL ELEMENTSFieldsEntitiesBlocksPanesRegionsLayoutsPages
DRUPAL 7
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 46: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/46.jpg)
DRUPAL 7BADcamp 2015 session Optimizing Drupal 7 HTML Markup
The origin blog post Using Fences and Page Manager tooptimize HTML markup in Drupal 7
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 47: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/47.jpg)
DRUPAL 7Fences module to reset field markupNodePageRegionBlocketc templates to reset thatmarkupPanels layouts to add semantic HTMLPage Manager (ctools) to place content
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 48: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/48.jpg)
DRUPAL 8 has an Alpha release
Twig templates give us ultra specificity works and will eventually be
moved to core is a stand alone module now or
allows you to set defaults and override onindividual nodes
Fences
Layout plugin module
Page ManagerPanelizer
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 49: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/49.jpg)
CREATING YOUR OWN THEMECreate an empty themeDownload the Bootstrap Framework source filesUpdate Gruntfilejs to output your css file tocssTHEMENAMEcss and your js file tojsTHEMENAMEcssAdd your own less filesInclude them in your bootstrapless
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 50: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/50.jpg)
GRUNTFILEJS
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 51: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/51.jpg)
BOOTSTRAPLESS
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 52: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/52.jpg)
COMPILING BOOTSTRAPGrunt or Gulp
cd sitesallthemesTHEMENAMEbootstrapgrunt dist - Compiles all the filesgrunt watch - Watches the folder and automaticallyupdates aer file changes
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 53: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/53.jpg)
THE WONDERFUL WORLD OF MIXINS
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 54: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/54.jpg)
USE MIXINS ON YOUR OWN SEMANTIC HTML
main-content container()
main-content gt section make-row()
main-content gt section gt article make-md-column(9) make-sm-column(8)
main-content gt section gt aside make-md-column(3) make-sm-column(4)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 55: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/55.jpg)
USE MIXINS ON YOUR OWN SEMANTIC HTML
live-chat-button btn-primary() padding 10px 30px border-radius 4px background live-chat-button-background
amphover text-decoration none color btn-primary-color background darken(live-chat-button-background 5)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 56: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/56.jpg)
BOOTSTRAPNAVBAR INDRUPAL 8
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 57: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/57.jpg)
PAGEHTMLTWIG12345
hosted with by
if pageheader ltnav class=navbargt ltdiv class=container-fluidgt pageheader ltdivgtltnavgt endif
view rawBootstrap Navbar in Drupal 8 - pagehtmltwig GitHub
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 58: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/58.jpg)
BLOCK--SYSTEM-BRANDING-BLOCKHTMLTWIG
Upload your logo in the UI at adminappearancesettingstheme_name
12345678910111213
hosted with by
block content if site_logo ltdiv class=navbar-headergt ltbutton type=button class=navbar-toggle collapsed data-toggle=collapse data-target=navbar aria-expanded=false aria-controls ltspan class=sr-onlygtToggle navigationltspangt Menu ltbuttongt lta class=navbar-brand href= path(ltfrontgt) title= site_name rel=homegt ltimg src= site_logo alt= site_name gt ltagt ltdivgt endif endblock
view rawBootstrap Navbar in Drupal 8 - block--system-branding-blockhtmltwig GitHub
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 59: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/59.jpg)
BLOCK--THEME_NAME-MAIN-MENUHTMLTWIG
123
hosted with by
ltdiv id=navbar class=collapse navbar-collapsegt content ltdivgt
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menuhtmltwig GitHub
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 60: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/60.jpg)
MENU--MAINHTMLTWIG123456789101112131415161718192021
hosted with by
menusmenu_links(items attributes 0)
macro menu_links(items attributes menu_level) import _self as menus if items if menu_level == 0 ltul class=nav navbar-navgt else ltul class=nav navbar-navgt endif for item in items ltli itemattributes gt link(itemtitle itemurl) if itembelow menusmenu_links(itembelow attributes menu_level + 1) endif ltligt endfor ltulgt endif endmacro
view rawBootstrap Navbar in Drupal 8 - menu--mainhtmltwig GitHub
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 61: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/61.jpg)
BOOTSTRAPDRUPALMODULES
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 62: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/62.jpg)
JQUERY UPDATERequired for Drupal 7 to bring jQuery up to modern times
Not needed for Drupal 8
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 63: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/63.jpg)
DRUPAL MODULESAs of the writing of this presentation there were 332
modules that contain Bootstrap in their name
Drupalorg Bootstrap Modules
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 64: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/64.jpg)
DRUPAL MODULESVIEWS BOOTSTRAP
No release yet for D8
DRUPAL MODULES
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 65: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/65.jpg)
DRUPAL MODULESBOOTSTRAP LAYOUTS
This project is a combination of and for Drupal 8
Display Suite BootstrapLayouts Panels Bootstrap Layouts
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc
![Page 66: Bootstrap Framework and Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042619/58708f621a28ab412b8b5267/html5/thumbnails/66.jpg)
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc