Location: Western City Center (the first floor of the Herald Building) - 1155 North State St.
Time: 2016-05-09 at 5:30pm-6:30pm
Agenda
-
Spend a few minutes to troubleshoot any Drupal prolbems folks may have, then move into the main topic.
-
Bootstrap 3 Theme overview, including subtheming using the LESS Starterkit. Will show some of the benefits of using the Bootstrap "mobile-first" framework (http://getbootstrap.com) and how the Less CSS preprocessor can help with more complex styling. Will also show how you can customize the Bootstrap framework build to include only the features you need for a given project/site.
Bootstrap 3 Theme project: https://www.drupal.org/project/bootstrap
Bootstrap 3 Theme Docs: http://drupal-bootstrap.org/api/bootstrap
LESS Starterkit for D7: http://drupal-bootstrap.org/api/bootstrap/starterkits%21less%21README.md...
LESS Starterkit for D8: http://drupal-bootstrap.org/api/bootstrap/starterkits%21less%21README.md...
Comments
Links from 2016-05-09 talk
Some links that may be useful from the 2016-05-09 Bootstrap talk:
Create your own custom build of Bootstrap, useful if you only need a subset of what it offers and are trying to ensure best performance:
http://getbootstrap.com/customize/
The Drupal Bootstrap Theme Docs for both D7 & D8:
http://drupal-bootstrap.org/api/bootstrap
A package for Sublime Text 2/3 for Bootstrap 3 snippets to aid in quick Bootstrap construct creation:
https://packagecontrol.io/packages/Bootstrap%203%20Snippets
A large list of Bootstrap-related resources (for Drupal and other Bootstrap-related installs):
http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-re...
A Bootstrap linter (Bootlint) to help catch errors and warnings:
https://github.com/twbs/bootlint
List of Bootlint errors and warnings:
https://github.com/twbs/bootlint/wiki
Bootstrap callouts, not part of core Bootstrap.js file
The callout CSS that appears on the main Bootstrap site (e.g. on http://getbootstrap.com/components/) that is not part of Bootstrap proper, you need to save this as a separate CSS and call it as needed:
.bs-callout {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code {
border-radius: 3px;
}
.bs-callout+.bs-callout {
margin-top: -5px;
}
.bs-callout-default {
border-left-color: #777;
}
.bs-callout-default h4 {
color: #777;
}
.bs-callout-primary {
border-left-color: #428bca;
}
.bs-callout-primary h4 {
color: #428bca;
}
.bs-callout-success {
border-left-color: #5cb85c;
}
.bs-callout-success h4 {
color: #5cb85c;
}
.bs-callout-danger {
border-left-color: #d9534f;
}
.bs-callout-danger h4 {
color: #d9534f;
}
.bs-callout-warning {
border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
color: #f0ad4e;
}
.bs-callout-info {
border-left-color: #5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}