May Meetup

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Trebor's picture
Start: 
2016-05-09 17:30 - 18:30 America/Vancouver
Organizers: 
Event type: 
User group meeting

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

Trebor's picture

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

Trebor's picture

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