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

Bootstrap is the most popular HTML CSS and JS frameworkfor developing responsive mobile first projects on the web

SIMILAR PROJECTSFoundationPure CSS

PREDECESSORS960 GridsYUI Grids

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

Apple FIFA HBO Ing

Instacart Ly Microso NASA

New Relic Newsweek Spotify Vogue

And about 10 million more BuiltWithcom

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 - 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 - 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 - 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 - 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 - 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 - 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 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

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

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

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 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

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

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

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

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

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

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

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

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

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