Bootstrap Framework and Drupal
Transcript of Bootstrap Framework and Drupal
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
THE ENDCONTINUING THE CONVERSATION
Created by
Jim BirchjimbirchpresentationsbootstrapthejimbirchXeno Media Inc