Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

CIS 526

CSS & Bootstrap

Image Source: Imgur

Cascading Style Sheets

Advantages?

Disadvantages?

CSS Frameworks

Image Source: Wikipedia

Bootstrap

Reset Normalize

Without Normalize


With Normalize


Demo Page Source: Chris Bracco on GitHub

Using Bootstrap


Template

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
                        initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrap...">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/..."></script>
    <script src="https://cdnjs.cloudflare.com/..."></script>
    <script src="https://maxcdn.bootstrapcdn.com/..."></script>
    <script src="script.js" type="text/javascript"></script>
  </body>
</html>

Containers


<div class="container">
  <h1>Hello, world!</h1>
  <div style="width: 100%; background: grey">
    <p>Some text for content</p>
  </div>
</div>

<div class="container-fluid">
  <h1>Hello, world!</h1>
  <div style="width: 100%; background: grey">
    <p>Some text for content</p>
  </div>
</div>

Media Queries


// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199px) { ... }

12 Columns

<!-- Stack the columns on mobile by making one full-width and
the other half-width -->
<div class="row example">
  <div class="col col-md-8">.col .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3%
wide on desktop -->
<div class="row example">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row example">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

12 Columns


.example > div {
  background-color: #888888;
  padding: 10px;
  border: 1px solid black;
}

Media Objects

<div class="media">
  <img class="d-flex mr-3" src="http://placekitten.com/64/64" alt="image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel...

    <div class="media mt-3">
      <a class="d-flex pr-3" href="#">
        <img src="http://placekitten.com/64/64" alt="image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla ...
      </div>
    </div>
  </div>
</div>

Responsive Utilities


<img class="hidden-lg-down" src="http://placekitten.com/1100/50"
alt="image">
<img class="hidden-md-down" src="http://placekitten.com/900/50"
alt="image">
<img class="hidden-sm-down" src="http://placekitten.com/700/50"
alt="image">
<img class="hidden-xs-down" src="http://placekitten.com/500/50"
alt="image">
<div class="visible-print-block">
  <h1>Here is some hidden text!</h1>
</div>

Content - Code


<p>This is a <code>code</code> item</p>

<pre><code>This is a longer line of code
It even line wraps! Be careful of spacing.</code></pre>

<p>There is even a tag for variables like <var>x</var></p>

<p>And for indicating input <kbd>cmds</kbd></p>

<p>Sample output: <samp>This is sample output</samp></p>

https://www.w3schools.com/html/html_computercode_elements.asp

Components - Alert


<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this
  important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention,
  but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're
  <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> <a href="#" class="alert-link">
  Change a few things up</a> and try submitting again.
</div>

Components - Dismissable Alert


<div class="alert alert-warning alert-dismissible fade show"
role="alert">
  <button type="button" class="close" data-dismiss="alert"
  aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on
  some of those fields below.
</div>

Components - Buttons

<!-- Provides extra visual weight and identifies the primary
action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while
maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

jQuery - Button Click


$('#show_modal').on('click', function(){

  $('#my_modal').modal();

});

$('#close_modal').on('click', function(){

  $('#my_modal').modal('hide');

});