Clean CSS, footer menu, CSS adjustments

LICENSE.txt

+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, write to the Free Software Foundation, Inc.,
+    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Ty Coon>, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.

bootstrap_barrio.libraries.yml

@@ -28,8 +28,8 @@ global-styling:
       css/components/messages.css: {}
       css/components/node.css: {}
       css/components/node-preview.css: {}
+      css/components/page.css: {}
       css/components/page-title.css: {}
-      css/components/pager.css: {}
       css/components/panel.css: {}
       css/components/primary-menu.css: {}
       css/components/search-form.css: {}
@@ -91,6 +91,12 @@ indented:
     component:
       css/components/indented.css: {}
 
+links:
+  version: VERSION
+  css:
+    component:
+      css/components/links.css: {}
+
 maintenance_page:
   version: VERSION
   css:

bootstrap_barrio.theme

@@ -48,6 +48,21 @@ function bootstrap_barrio_preprocess_html(&$variables) {
  * Implements hook_preprocess_HOOK() for page templates.
  */
 function bootstrap_barrio_preprocess_page(&$variables) {
+  if (\Drupal::moduleHandler()->moduleExists('bootstrap_library')) {
+    $library = theme_get_setting('bootstrap_barrio_library');
+    switch ($library) {
+      case 'cdn' :
+        $variables['#attached']['library'][] = 'bootstrap_library/bootstrap-cdn';
+        break;
+      case 'production':
+        $variables['#attached']['library'][] = 'bootstrap_library/bootstrap';
+        break;
+      case 'development':
+        $variables['#attached']['library'][] = 'bootstrap_library/bootstrap-dev';
+        break;
+    }
+  }
+
   $width = _bootstrap_barrio_content_width(!empty($variables['page']['sidebar_first']), !empty($variables['page']['sidebar_second']));
   $content_width = 'col-md-' . $width;
   $sidebar_first_width = 'col-md-' . theme_get_setting('bootstrap_barrio_sidebar_first_width');
@@ -264,6 +279,16 @@ function bootstrap_barrio_preprocess_menu_local_task(&$variables) {
   $variables['item'] = Link::fromTextAndUrl($link['title'], $url);
 }
 
+/**
+ * Implements hook_theme_suggestions_HOOK_alter() for links templates.
+ */
+function bootstrap_barrio_theme_suggestions_links_alter(array &$suggestions, array $variables) {
+  // ToDo get from core a variable to flag inline links
+  if ( in_array('inline', $variables['attributes']['class']) ) {
+    $suggestions[] = 'links__inline';
+  }
+}
+
 /**
  * Implements hook_theme_suggestions_HOOK_alter() for form templates.
  */

config/install/bootstrap_barrio.settings.yml

+# Library
+# --------------
+bootstrap_barrio_library: 0
 # Layout
 # --------------
 bootstrap_barrio_sidebar_position: 'both'
@@ -6,7 +9,6 @@ bootstrap_barrio_sidebar_first_width: 3
 bootstrap_barrio_sidebar_first_offset: 0
 bootstrap_barrio_sidebar_second_width: 3
 bootstrap_barrio_sidebar_second_offset: 0
-bootstrap_barrio_footer_layout: '1-1-1-1-1'
 
 # Container
 # --------------
@@ -25,54 +27,3 @@ bootstrap_barrio_navbar_top_background: 'faded'
 bootstrap_barrio_navbar_position: ''
 bootstrap_barrio_navbar_color: 'dark'
 bootstrap_barrio_navbar_background: 'inverse'
-
-# Anchors
-# --------------
-bootstrap_barrio_anchors_fix: 1
-bootstrap_barrio_anchors_smooth_scrolling: 1
-
-# Forms
-# --------------
-bootstrap_barrio_forms_required_has_error: 0
-bootstrap_barrio_forms_has_error_value_toggle: 1
-bootstrap_barrio_forms_smart_descriptions: 1
-bootstrap_barrio_forms_smart_descriptions_limit: 250
-bootstrap_barrio_forms_smart_descriptions_allowed_tags: 'b, code, em, i, kbd, span, strong'
-
-
-# Popovers
-# --------------
-bootstrap_barrio_popover_enabled: 1
-bootstrap_barrio_popover_animation: 1
-bootstrap_barrio_popover_html: 0
-bootstrap_barrio_popover_placement: 'right'
-bootstrap_barrio_popover_selector: ''
-bootstrap_barrio_popover_trigger:
-  hover: 0
-bootstrap_barrio_popover_trigger:
-  focus: 0
-bootstrap_barrio_popover_trigger:
-  click: 'click'
-bootstrap_barrio_popover_trigger_autoclose: 1
-bootstrap_barrio_popover_title: ''
-bootstrap_barrio_popover_content: ''
-bootstrap_barrio_popover_delay: 0
-bootstrap_barrio_popover_container: 'body'
-
-# Tooltips
-# --------------
-bootstrap_barrio_tooltip_enabled: 1
-bootstrap_barrio_tooltip_descriptions: 1
-bootstrap_barrio_tooltip_descriptions_length: 200
-bootstrap_barrio_tooltip_animation: 1
-bootstrap_barrio_tooltip_html: 0
-bootstrap_barrio_tooltip_placement: 'auto left'
-bootstrap_barrio_tooltip_selector: ''
-bootstrap_barrio_tooltip_trigger:
-  hover: 'hover'
-bootstrap_barrio_tooltip_trigger:
-  focus: 'focus'
-bootstrap_barrio_tooltip_trigger:
-  click: 0
-bootstrap_barrio_tooltip_delay: 0
-bootstrap_barrio_tooltip_container: 'body'

css/components/comments.css

@@ -43,29 +43,20 @@
   margin: 4px 0;
   line-height: 1.2;
 }
-.comment__time {
+.comment__time, .comment__permalink {
   margin-bottom: 4px;
   color: #68696b;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.733em;
   line-height: 1.2;
-
+  padding: 0 0.5em 0 0; /* LTR */
+}
+[dir="rtl"] .comment__time, .comment__permalink {
+  padding: 0 0 0 0.5em;
 }
 .comment__permalink {
   font-size: 0.733em;
   line-height: 1.2;
 }
-.comment__content {
-  position: relative;
-  display: table-cell;
-  padding: 10px 25px 10px 25px;
-  vertical-align: top;
-  width: 100%;
-  border: 1px solid #d3d7d9;
-  font-size: 0.929em;
-  line-height: 1.6;
-  word-break: break-all;
-}
 
 .comment__content:before {
   content: '';
@@ -118,11 +109,11 @@
 .comment .links {
   padding: 0 0 0.25em 0;
 }
-.comment .links li {
+.comment .links-inline span {
   padding: 0 0.5em 0 0; /* LTR */
   font-size: 1.08em;
 }
-[dir="rtl"] .comment .links li {
+[dir="rtl"] .comment .links-inline span {
   padding: 0 0 0 0.5em;
 }
 .comment--unpublished {

css/components/header.css

 /* ------------------ Header ------------------ */
+.navbar-brand .site-logo {
+  margin-right: 1rem;
+}

css/components/links.css

@@ -21,3 +21,10 @@ ul.inline li {
 ul.links a.is-active {
   color: #000;
 }
+.links-inline span {
+  padding: 0 0.5em 0 0; /* LTR */
+  font-size: 1.08em;
+}
+[dir="rtl"] .links-inline span {
+  padding: 0 0 0 0.5em;
+}

css/components/page.css

+/**
+ * @file
+ * Styles for Bootstrap Barrio page.
+ */
+
+#main {
+    margin-top: 10px;
+}

css/components/search-form.css

@@ -3,38 +3,6 @@
  * The visual styles for Bartik's search form(s).
  */
 
-.search-form {
-  font-size: 0.875rem;
-}
-.search-form .form-search {
-  float: left; /* LTR */
-  margin-right: 5px; /* LTR */
-  padding: 4px;
-}
-[dir="rtl"] .search-form .form-search {
-  float: right;
-  margin-left: 5px;
-  margin-right: 0;
-}
-.button.search-form__submit,
-.search-form__submit {
-  background: #f0f0f0 url(../../../../misc/icons/505050/loupe.svg) no-repeat center;
-  cursor: pointer;
-  height: 26px;
-  margin-left: 0;
-  margin-right: 0;
-  overflow: hidden;
-  padding: 0;
-  text-indent: -9999px;
-  direction: ltr;
-  width: 34px;
-}
-.button.search-form__submit:hover,
-.search-form__submit:hover,
-.button.search-form__submit:focus,
-.search-form__submit:focus {
-  background: #dedede url(../../../../misc/icons/424242/loupe.svg) no-repeat center;
-}
-.search-form .form-item-keys label {
-  display: block;
+input[type="search"] {
+    box-sizing: border-box;
 }

subtheme/templates/page.html.twig

+{% extends "themes/bootstrap_barrio/templates/layout/page.html.twig" %}
+
+{#
+/**
+ * @file
+ * Bootstrap Barrio's theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template normally located in the
+ * core/modules/system directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ * - logo: The url of the logo image, as defined in theme settings.
+ * - site_name: The name of the site. This is empty when displaying the site
+ *   name has been disabled in the theme settings.
+ * - site_slogan: The slogan of the site. This is empty when displaying the site
+ *   slogan has been disabled in theme settings.
+
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.top_header: Items for the top header region.
+ * - page.top_header_form: Items for the top header form region.
+ * - page.header: Items for the header region.
+ * - page.header_form: Items for the header form region.
+ * - page.highlighted: Items for the highlighted region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.featured_top: Items for the featured top region.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.featured_bottom_first: Items for the first featured bottom region.
+ * - page.featured_bottom_second: Items for the second featured bottom region.
+ * - page.featured_bottom_third: Items for the third featured bottom region.
+ * - page.footer_first: Items for the first footer column.
+ * - page.footer_second: Items for the second footer column.
+ * - page.footer_third: Items for the third footer column.
+ * - page.footer_fourth: Items for the fourth footer column.
+ * - page.footer_fifth: Items for the fifth footer column.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * Theme variables:
+ * - navbar_top_attributes: Items for the header region.
+ * - navbar_attributes: Items for the header region.
+ * - content_attributes: Items for the header region.
+ * - sidebar_first_attributes: Items for the highlighted region.
+ * - sidebar_second_attributes: Items for the primary menu region.
+ *
+ * @see template_preprocess_page()
+ * @see bootstrap_barrio_preprocess_page()
+ * @see html.html.twig
+ */
+#}
+
+{% block head %}
+  {% if page.secondary_menu or page.page.top_header or page.top_header_form %}
+    <nav{{ navbar_top_attributes }}>
+      <div class="section {{ container }} clearfix">
+        <div class="navbar-nav">
+          {{ page.secondary_menu }}
+          {{ page.top_header }}
+        </ div>
+        {% if page.top_header_form %}
+          <div class="form-inline navbar-form pull-right">
+            {{ page.top_header_form }}
+          </div>
+        {% endif %}
+      </div>
+    </nav>
+  {% endif %}
+  <nav{{ navbar_attributes }}>
+    <div class="section {{ container }} clearfix">
+      <div class="navbar-brand">
+        {{ page.header }}
+      </div>
+      <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#CollapsingNavbar">
+        &#9776;
+      </button>
+      <div class="collapse navbar-toggleable-xs navbar-nav" id="CollapsingNavbar">
+        {{ page.primary_menu }}
+      </div>
+      {% if page.header_form %}
+        <div class="form-inline navbar-form pull-right">
+          {{ page.header_form }}
+        </div>
+      {% endif %}
+    </div>
+  </nav>
+{% endblock %}
+
+{% block content %}
+  <div id="main" class="{{ container }}">
+    <div class="row clearfix">
+      {{ page.breadcrumb }}
+        <main{{ content_attributes }}>
+          <section class="section">
+            <a id="main-content" tabindex="-1"></a>
+            {{ page.content }}
+          </section>
+        </main>
+      {% if page.sidebar_first %}
+        <div{{ sidebar_first_attributes }}>
+          <aside class="section" role="complementary">
+            {{ page.sidebar_first }}
+          </aside>
+        </div>
+      {% endif %}
+      {% if page.sidebar_second %}
+        <div{{ sidebar_second_attributes }}>
+          <aside class="section" role="complementary">
+            {{ page.sidebar_second }}
+          </aside>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endblock %}
+
+{% block footer %}
+  <div class="{{ container }}">
+    {% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
+      <div class="site-footer__top clearfix">
+        {{ page.footer_first }}
+        {{ page.footer_second }}
+        {{ page.footer_third }}
+        {{ page.footer_fourth }}
+      </div>
+    {% endif %}
+    {% if page.footer_fifth %}
+      <div class="site-footer__bottom">
+        {{ page.footer_fifth }}
+      </div>
+    {% endif %}
+  </div>
+{% endblock %}

templates/block/block--card.html.twig

+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+	'card',
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <div class="card-header">
+      <h2{{ title_attributes }}>{{ label }}</h2>
+    </div>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass(['content', 'card-block']) }}>
+      {{ content }}
+    </div>
+  {% endblock %}
+</div>

templates/block/block--system-branding-block.html.twig

@@ -14,12 +14,12 @@
 #}
 {% set attributes = attributes.addClass('site-branding') %}
   {% if site_logo %}
-    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="pull-left">
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="pull-left site-logo">
       <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
     </a>
   {% endif %}
   {% if site_name or site_slogan %}
-    <div class="pull-left">
+    <div class="pull-left site-name-slogan">
       {% if site_name %}
         <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
       {% endif %}

templates/block/form--search-block-form.html.twig

@@ -10,6 +10,6 @@
  * @see template_preprocess_form()
  */
 #}
-<form{{ attributes.addClass('search-form', 'search-block-form', 'form-inline') }}>
+<form{{ attributes.addClass('search-form', 'search-block-form') }}>
   {{ children }}
 </form>

templates/content/comment.html.twig

@@ -78,37 +78,41 @@
   ]
 %}
 <article role="article"{{ attributes.addClass(classes)|without('role') }}>
-  {#
-    Hide the "new" indicator by default, let a piece of JavaScript ask the
-    server which comments are new for the user. Rendering the final "new"
-    indicator here would break the render cache.
-  #}
-  <span class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
 
-  <footer class="comment__meta">
+  <div class="comment__meta col-sm-3">
+    {#
+      Hide the "new" indicator by default, let a piece of JavaScript ask the
+      server which comments are new for the user. Rendering the final "new"
+      indicator here would break the render cache.
+    #}
+    <span class="hidden text-danger" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
     {{ user_picture }}
-    <p class="comment__author">{{ author }}</p>
-    <p class="comment__time">{{ created }}</p>
-    <p class="comment__permalink">{{ permalink }}</p>
+    <small class="comment__author">{{ author }}</small>
     {#
       Indicate the semantic relationship between parent and child comments
       for accessibility. The list is difficult to navigate in a screen
       reader without this information.
     #}
     {% if parent %}
-      <p class="visually-hidden">{{ parent }}</p>
+      <p class="sr-only">{{ parent }}</p>
     {% endif %}
-  </footer>
+  </div>
 
-  <div{{ content_attributes.addClass('comment__content') }}>
-    {% if title %}
-      {{ title_prefix }}
-      <h3{{ title_attributes }}>{{ title }}</h3>
-      {{ title_suffix }}
-    {% endif %}
-    {{ content|without('links') }}
-    {% if content.links %}
-      <nav>{{ content.links }}</nav>
-    {% endif %}
+  <div{{ content_attributes.addClass(['comment__content', 'col-sm-9', 'card']) }}>
+    <div class="card-block">
+      {% if title %}
+        {{ title_prefix }}
+        <h3{{ title_attributes.addClass('card-title') }}>{{ title }}</h3>
+        {{ title_suffix }}
+      {% endif %}
+      {{ content|without('links') }}
+      {% if content.links %}
+        <nav>{{ content.links }}</nav>
+      {% endif %}
+    </div>
+    <div class="card-block">
+      <span class="comment__time">{{ created }}</span>
+      <span class="comment__permalink">{{ permalink }}</span>
+    </div>
   </div>
 </article>

templates/content/links--node.html.twig

@@ -35,7 +35,28 @@
  */
 #}
 {% if links %}
+  {{ attach_library('boostrap_barrio/links') }}
+
   <div class="node__links">
-    {% include "links.html.twig" %}
+    {%- if heading -%}
+      {%- if heading.level -%}
+        <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
+      {%- else -%}
+        <h2{{ heading.attributes }}>{{ heading.text }}</h2>
+      {%- endif -%}
+    {%- endif -%}
+    <nav{{ attributes.addClass(['nav', 'links-inline']) }}>
+      {%- for key, item in links -%}
+        <span{{ item.attributes.addClass(key|clean_class, 'nav-link') }}>
+          {%- if item.link -%}
+            {{ item.link }}
+          {%- elseif item.text_attributes -%}
+            <span{{ item.text_attributes }}>{{ item.text }}</span>
+          {%- else -%}
+            {{ item.text }}
+          {%- endif -%}
+        </span>
+      {%- endfor -%}
+    </nav>
   </div>
 {% endif %}

templates/content/mark.html.twig

@@ -13,8 +13,8 @@
 #}
 {% if logged_in %}
   {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'New'|t }}</span>
+    <span class="text-danger">{{ 'New'|t }}</span>
   {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'Updated'|t }}</span>
+    <span class="text-danger">{{ 'Updated'|t }}</span>
   {% endif %}
 {% endif %}

templates/content/node.html.twig

 {#
 /**
  * @file
- * Bartik's theme implementation to display a node.
+ * Bootstrap Barrio's theme implementation to display a node.
  *
  * Available variables:
  * - node: The node entity with limited access to object properties and methods.
@@ -70,7 +70,6 @@
     'clearfix',
   ]
 %}
-{{ attach_library('classy/node') }}
 <article{{ attributes.addClass(classes) }}>
   <header>
     {{ title_prefix }}
@@ -83,9 +82,11 @@
     {% if display_submitted %}
       <div class="node__meta">
         {{ author_picture }}
-        <span{{ author_attributes }}>
-          {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
-        </span>
+        {% block submitted %}
+          <span{{ author_attributes }}>
+            {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
+          </span>
+        {% endblock %}
         {{ metadata }}
       </div>
     {% endif %}

templates/layout/page.html.twig

@@ -69,39 +69,41 @@
 <div id="page-wrapper">
   <div id="page">
     <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
-      {% if page.secondary_menu or page.page.top_header or page.top_header_form %}
-        <nav{{ navbar_top_attributes }}>
+      {% block head %}
+        {% if page.secondary_menu or page.page.top_header or page.top_header_form %}
+          <nav{{ navbar_top_attributes }}>
+            <div class="section {{ container }} clearfix">
+              <div class="navbar-nav">
+                {{ page.secondary_menu }}
+                {{ page.top_header }}
+              </div>
+              {% if page.top_header_form %}
+                <div class="form-inline navbar-form pull-right">
+                  {{ page.top_header_form }}
+                </div>
+              {% endif %}
+            </div>
+          </nav>
+        {% endif %}
+        <nav{{ navbar_attributes }}>
           <div class="section {{ container }} clearfix">
-            <div class="navbar-nav">
-              {{ page.secondary_menu }}
-              {{ page.top_header }}
+            <div class="navbar-brand">
+              {{ page.header }}
             </div>
-            {% if page.top_header_form %}
+            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#CollapsingNavbar">
+              &#9776;
+            </button>
+            <div class="collapse navbar-toggleable-xs navbar-nav" id="CollapsingNavbar">
+              {{ page.primary_menu }}
+	        </div>
+            {% if page.header_form %}
               <div class="form-inline navbar-form pull-right">
-                {{ page.top_header_form }}
+                {{ page.header_form }}
               </div>
             {% endif %}
           </div>
-	    </nav>
-      {% endif %}
-      <nav{{ navbar_attributes }}>
-        <div class="section {{ container }} clearfix">
-          <div class="navbar-brand">
-            {{ page.header }}
-          </div>
-          <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#CollapsingNavbar">
-            &#9776;
-          </button>
-          <div class="collapse navbar-toggleable-xs navbar-nav" id="CollapsingNavbar">
-            {{ page.primary_menu }}
-	      </div>
-          {% if page.header_form %}
-            <div class="form-inline navbar-form pull-right">
-              {{ page.header_form }}
-            </div>
-          {% endif %}
-        </div>
-      </nav>
+        </nav>
+      {% endblock %}
     </header>
     {% if page.highlighted %}
       <div class="highlighted">
@@ -118,31 +120,33 @@
       </div>
     {% endif %}
     <div id="main-wrapper" class="layout-main-wrapper clearfix">
-      <div id="main" class="{{ container }}">
-        <div class="row clearfix">
-          {{ page.breadcrumb }}
-            <main{{ content_attributes }}>
-              <section class="section">
-                <a id="main-content" tabindex="-1"></a>
-                {{ page.content }}
-              </section>
-            </main>
-          {% if page.sidebar_first %}
-            <div{{ sidebar_first_attributes }}>
-              <aside class="section" role="complementary">
-                {{ page.sidebar_first }}
-              </aside>
-            </div>
-          {% endif %}
-          {% if page.sidebar_second %}
-            <div{{ sidebar_second_attributes }}>
-              <aside class="section" role="complementary">
-                {{ page.sidebar_second }}
-              </aside>
-            </div>
-          {% endif %}
+      {% block content %}
+        <div id="main" class="{{ container }}">
+          <div class="row clearfix">
+            {{ page.breadcrumb }}
+              <main{{ content_attributes }}>
+                <section class="section">
+                  <a id="main-content" tabindex="-1"></a>
+                  {{ page.content }}
+                </section>
+              </main>
+            {% if page.sidebar_first %}
+              <div{{ sidebar_first_attributes }}>
+                <aside class="section" role="complementary">
+                  {{ page.sidebar_first }}
+                </aside>
+              </div>
+            {% endif %}
+            {% if page.sidebar_second %}
+              <div{{ sidebar_second_attributes }}>
+                <aside class="section" role="complementary">
+                  {{ page.sidebar_second }}
+                </aside>
+              </div>
+            {% endif %}
+          </div>
         </div>
-      </div>
+      {% endblock %}
     </div>
     {% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
       <div class="featured-bottom">
@@ -154,21 +158,23 @@
       </div>
     {% endif %}
     <footer class="site-footer">
-      <div class="{{ container }}">
-        {% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
-          <div class="site-footer__top clearfix">
-            {{ page.footer_first }}
-            {{ page.footer_second }}
-            {{ page.footer_third }}
-            {{ page.footer_fourth }}
-          </div>
-        {% endif %}
-        {% if page.footer_fifth %}
-          <div class="site-footer__bottom">
-            {{ page.footer_fifth }}
-          </div>
-        {% endif %}
-      </div>
+      {% block footer %}
+        <div class="{{ container }}">
+          {% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
+            <div class="site-footer__top clearfix">
+              {{ page.footer_first }}
+              {{ page.footer_second }}
+              {{ page.footer_third }}
+              {{ page.footer_fourth }}
+            </div>
+          {% endif %}
+          {% if page.footer_fifth %}
+            <div class="site-footer__bottom">
+              {{ page.footer_fifth }}
+            </div>
+          {% endif %}
+        </div>
+      {% endblock %}
     </footer>
   </div>
 </div>

templates/navigation/links--inline.html.twig

+{#
+/**
+ * @file
+ * Theme override to display inline links.
+ *
+ * Available variables:
+ * - attributes: Attributes for the UL containing the list of links.
+ * - links: Links to be output.
+ *   Each link will have the following elements:
+ *   - title: The link text.
+ *   - href: The link URL. If omitted, the 'title' is shown as a plain text
+ *     item in the links list. If 'href' is supplied, the entire link is passed
+ *     to l() as its $options parameter.
+ *   - attributes: (optional) HTML attributes for the anchor, or for the <span>
+ *     tag if no 'href' is supplied.
+ *   - link_key: The link CSS class.
+ * - heading: (optional) A heading to precede the links.
+ *   - text: The heading text.
+ *   - level: The heading level (e.g. 'h2', 'h3').
+ *   - attributes: (optional) A keyed list of attributes for the heading.
+ *   If the heading is a string, it will be used as the text of the heading and
+ *   the level will default to 'h2'.
+ *
+ *   Headings should be used on navigation menus and any list of links that
+ *   consistently appears on multiple pages. To make the heading invisible use
+ *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   removes it from screen readers and assistive technology. Headings allow
+ *   screen reader and keyboard only users to navigate to or skip the links.
+ *   See http://juicystudio.com/article/screen-readers-display-none.php and
+ *   http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @see template_preprocess_links()
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('boostrap_barrio/links') }}
+
+{% if links %}
+  <div class="inline__links">
+    {%- if heading -%}
+      {%- if heading.level -%}
+        <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
+      {%- else -%}
+        <h2{{ heading.attributes }}>{{ heading.text }}</h2>
+      {%- endif -%}
+    {%- endif -%}
+    <nav{{ attributes.addClass(['nav', 'links-inline']) }}>
+      {%- for key, item in links -%}
+        <span{{ item.attributes.addClass(key|clean_class, 'nav-link') }}>
+          {%- if item.link -%}
+            {{ item.link }}
+          {%- elseif item.text_attributes -%}
+            <span{{ item.text_attributes }}>{{ item.text }}</span>
+          {%- else -%}
+            {{ item.text }}
+          {%- endif -%}
+        </span>
+      {%- endfor -%}
+    </nav>
+  </div>
+{% endif %}

templates/navigation/links.html.twig

@@ -23,7 +23,7 @@
  *
  *   Headings should be used on navigation menus and any list of links that
  *   consistently appears on multiple pages. To make the heading invisible use
- *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   the 'sr-only' CSS class. Do not use 'display:none', which
  *   removes it from screen readers and assistive technology. Headings allow
  *   screen reader and keyboard only users to navigate to or skip the links.
  *   See http://juicystudio.com/article/screen-readers-display-none.php and
@@ -33,6 +33,8 @@
  */
 #}
 {% if links -%}
+  {{ attach_library('boostrap_barrio/links') }}
+
   {%- if heading -%}
     {%- if heading.level -%}
       <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>