HTML5 in 24 Hours

Teach Yourself Bootstrap Part 4 Code Listings

· 5 min read

Part 4: Customizing Bootstrap

Sams Teach Yourself Bootstrap in 24 Hours

Hour 21: Customizing Bootstrap and Your Bootstrap Website

Listing 21.1

body {
  background-color: #4C521D; 
}
body > .container {
  background-color: #fff;
}
.jumbotron {
  background: #6c702d;
  background: -moz-linear-gradient(top, #6c702d 0%, #dfdfdf 100%); 
  background: -webkit-gradient(linear, left top, left bottom,
    color-stop(0%,#6c702d), color-stop(100%,#dfdfdf)); 
  background: -webkit-linear-gradient(top,
    #6c702d 0%,#dfdfdf 100%); 
  background: -o-linear-gradient(top, #6c702d 0%,#dfdfdf 100%); 
  background: -ms-linear-gradient(top, #6c702d 0%,#dfdfdf 100%);
  background: linear-gradient(to bottom, #6c702d 0%,#dfdfdf 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#6c702d', endColorstr='#dfdfdf',
    GradientType=0 ); 
  color: #000;
}
.jumbotron h1 {
  color: #D8AA10;
  text-shadow: 4px 4px 4px #000;
}
.quote {
  background-color: #6C702D;
  color: #ddd;
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left,
    rgba(170,140,23,1) 0,rgba(0,0,0,.0001) 100%);
  background-image: -o-linear-gradient(left,rgba(170,140,23,1) 0,
    rgba(0,0,0,.0001) 100%);
  background-image: -webkit-gradient(linear,left top,right top,
    from(rgba(170,140,23,1)),to(rgba(0,0,0,.0001)));
  background-image: linear-gradient(to right,rgba(170,140,23,1) 0,
    rgba(0,0,0,.0001) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#80000000', endColorstr='#00000000',
    GradientType=1);
}
.carousel-control.right {
  background-image: -webkit-linear-gradient(left,
    rgba(0,0,0,.0001) 0,rgba(170,140,23,1) 100%);
  background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,
    rgba(170,140,23,1) 100%);
  background-image: -webkit-gradient(linear,left top,right top,
    from(rgba(0,0,0,.0001)),to(rgba(170,140,23,1)));
  background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,
    rgba(170,140,23,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#00000000', endColorstr='#80000000',
    GradientType=1);
}
h1, h2, h3, h4, h5, h6, a, a:link {
  color: #D8AA10;
}
.panel-default>.panel-heading {
  background-color: rgba(179,196,170,.25);
}
.btn.btn-info {
  background-color: #d8aa00;
  border-color: #aa8c10;
}

Hour 22: Making Bootstrap Accessible

Listing 22.1

<body>
  <a href="#main" class="sr-only sr-only-focusable">Skip to primary content</a>
  ...
  <div class="container" id="main" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Listing 22.2

<div class="form-group has-success has-feedback">
  <label class="control-label" for="fullname">Fill in Your Full
  Name</label>
  <input type="text" class="form-control" id="fullname"
         aria-describedby="fullnameStatus" placeholder="Full Name">
  <span class="glyphicon glyphicon-ok form-control-feedback"
        aria-hidden="true"></span>
  <span id="fullnameStatus" class="sr-only">(success)</span>
</div>

Hour 23: Using Less and Sass with Bootstrap

Listing 23.1

@yellow: #F0E433;

p.pull-right { 
  color: @yellow;
}

Listing 23.2

.centered-block {
  margin-right: auto;
  margin-left: auto;
}

h1 {
  width: 80%;
  .centered-block;
}

Listing 23.3

.green-bordered(@borderwidth: 3px) {
  border: solid green @borderwidth; 
}

p.pull-right {
  .green-bordered();
}

p.wide-border {
  .green-bordered(10px);
}

Listing 23.4

@yellow: #F0E433;
@other-yellow: @yellow - #555;

p.pull-right {
  color: @yellow;
  text-shadow: 2px 2px @other-yellow;
}

Listing 23.5

@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%);
@gray-dark: lighten(@gray-base, 20%);
@gray: lighten(@gray-base, 33.5%);
@gray-light: lighten(@gray-base, 46.7%);
@gray-lighter: lighten(@gray-base, 93.5%);

.black {
  color: @gray-base; // @gray-base
}
.darkest {
  color: @gray-darker; // @gray-darker
}
.dark {
  color: @gray-dark; // @gray-dark
}
.gray {
  color: @gray; // @gray
}
.light {
  color: @gray-light; // @gray-light
}
.lightest {
  color: @gray-lighter; // @gray-lighter
}

Listing 23.6

$yellow: #F0E433;

p.pull-right { 
  color: $yellow;
}

Listing 23.7

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box { @include border-radius(10px); }

Listing 23.8

.myImage {
  @include size (400px, 300px)
}

Listing 23.9

// Sass code
#main p {
  color: #000000;
  width: 98%;
  
  .highlight {
  	background-color: #f1b161;
  }
}

// Output CSS
#main p {
  color: #000000;
  width: 98%;
}
main p .highlight {
  background-color: #f1b161; 
}

Listing 23.10

.standard {
  font-family: "Source Sans Pro";
  background-color: #e6b29a;
}
aside {
  @extend .standard();
  border: solid #efefef 1px;
}

// compiled CSS
.standard, aside {
  font-family: "Source Sans Pro";
  background-color: #e6b29a;
}
aside {
  border: solid #efefef 1px;
}

Listing 23.11

// import the file my-bootstrap-styles.less 
@import "my-bootstrap-styles.less"

Listing 23.12

// import the file \_my-bootstrap-styles.scss 
@import "my-bootstrap-styles"

Hour 24: Going Further with Bootstrap

Listing 24.1

/\*
Theme Name:   My Bootstrap Blog Theme
Theme URI:    http://example.com/my-bootstrap-theme
Author:       my name
Author URI:   my URL
Description:  This is a theme based off the Bootstrap Blog 
              template: 
              http://getbootstrap.com/examples/blog/.  
Version:      1.0
License:      Attribution-ShareAlike 3.0 Unported
License URI:  http://creativecommons.org/licenses/by-sa/3.0/
Tags:         blue, light, two columns, responsive, bootstrap
\*/

Listing 24.2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
    initial-scale=1">
    <!-- The above 3 meta tags \*must\* come first in the head; any
    other head content must come \*after\* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Blog Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="blog.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2
    lines! -->
    <!--\[if lt IE 9\]><script
src="../../assets/js/ie8-responsive-file-warning.js"></script>
    <!\[endif\]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js">
    </script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5
    elements and media queries -->
    <!--\[if lt IE 9\]>
<script
  src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
    <!\[endif\]-->
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New features</a>
          <a class="blog-nav-item" href="#">Press</a>
          <a class="blog-nav-item" href="#">New hires</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">The Bootstrap Blog</h1>
        <p class="lead blog-description">The official example
        template of creating a blog with Bootstrap.</p>
      </div>

      <div class="row">

Listing 24.3

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">
      Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.
      </p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load
    faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/
jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js">
    </script>
  </body>
</html>

Listing 24.4

<?php 

function bootstrap\_jquery\_scripts() {
	// Register the script
	wp\_register\_script( 'my-script', get\_template\_directory\_uri() .
    '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
	// Enqueue the script:
	wp\_enqueue\_script( 'my-script' );
}
add\_action( 'wp\_enqueue\_scripts', 'bootstrap\_jquery\_scripts' );

?>

Listing 24.5

<?php get\_header(); ?>

        <div class="col-sm-8 blog-main">
<?php if ( have\_posts() ) : while ( have\_posts() ) : the\_post(); ?>

          <div class="blog-post">
            <h2 class="blog-post-title"><?php the\_title(); ?></h2>
            <p class="blog-post-meta"><?php the\_time('F jS, Y'); ?>
              by <?php the\_author\_posts\_link(); ?></p>

            <?php the\_content(); ?>
            
          </div><!-- /.blog-post -->
<?php endwhile; else: ?>
	<p><?php \_e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

          <nav>
            <ul class="pager">
              <li><a href="#">Previous</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis
            euismod. Cras mattis consectetur purus sit amet
            fermentum. Aenean lacinia bibendum nulla sed
            consectetur.</p>
          </div>
          <div class="sidebar-module">
            <h4>Archives</h4>
            <ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
          </div>
          <div class="sidebar-module">
            <h4>Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
            </ol>
          </div>
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

<?php get\_footer(); ?>