Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="wrap">
  <div class="block">
    <h1>Bullgrid Demo</h1>
    <p>This pen is part of the <a href="https://github.com/synoa/bullgrid">Bullgrid Demo</a>.</p>
  </div>
  <div class="gw">
    
    <div class="g one-third medium-one-half  small-one-whole">
      <div class="block">
        <h3>One third, medium-one-half, small-one-whole</h3>
      </div>
    </div>
    
    <div class="g one-third medium-one-half  small-one-whole">
      <div class="block">
        <h3>One third, medium-one-half, small-one-whole</h3>
      </div>
    </div>
    
    <div class="g one-third medium-one-half  small-one-whole">
      <div class="block">
        <h3>One third, medium-one-half, small-one-whole</h3>
      </div>
    </div>
  </div>
  
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

$font--light: 300;
$font--normal: 400;
$font--bold: 700;

$padding--default: 2rem;
$margin--default: 1.25rem;

$grey--default: #aaa;
$color--accent: #2196F3;
$color--contrast: #4CAF50;
$color--contrast-light: lighten($color--contrast, 15%);
/*
 * Defaults
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 1rem/1 'Roboto Condensed', sans-serif;
  font-weight: $font--light;
  color: #333;
  background: #f1f1f1;
  border-top: .5rem solid $color--accent;
}

a {
  color: $color--contrast;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  font-weight: $font--normal;
  transition: color linear .25s;
    &:hover {
      color: $color--contrast-light;
    }
}

.site-header {
  width: 100%;
  height: auto;
  background: #fff;
  border-bottom: 1px solid $grey--default;
}

h1,h2,h3,h4,h5,h6 {
  line-heigt: 1.56;
  margin-bottom: .25em;
}

h1 {
  
}

h2 {
  
}

h3 {
  font-weight: $font--bold;
}

h4 {
  font-size: 1.15rem;
  margin-bottom: $margin--default/2;
  font-weight: $font--light;
}

pre {
  overflow: scroll;
  border: 1px solid $grey--default;
  padding: .25rem;
  background: #fff;
}

.block {
  padding: $padding--default;
  border: 1px solid $grey--default;
  background: #fff;
  margin-top: $margin--default;
}

.wrap.wrap {
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
}

// Used to determine max value, should be approximately 1px (if not exactly 1px)
$smallest-unit: .0625em;

// List of all breakpoints, and their minimum width
// Human names can be changed, they will be used for $breakpoint param on breakpoint mixin
$all-breakpoints: (
  ('enormous-', 110em),
  ('huge-', 75em),
  ('large-', 60em),
  ('medium-', 45em),
  ('small-', 30em),
  ('tiny-') // Last value should not have a value, it's min value will essentially be 0
);

// Default resolution, this should only change if the CSS Spec for pixel-ratio changes
$res-base: 96;
$res-units: dpi;

@mixin breakpoint($breakpoint, $up-or-down: null, $px-ratio: null){
  // Set min res if px-ratio is set
  $min-resolution: null;
  @if ($px-ratio != null) {
    $min-resolution: #{round($res-base * $px-ratio) + $res-units};
  }

  // Variable to track if the breakpoint the user asked for exists
  $breakpoint_exists: false;

  // Iterate through list of breakpoints
  // Using for instead of each to get the index which is useful
  @for $i from 1 through length($all-breakpoints) {
    // Are we on the largest or smallest breakpoint
    $largest-breakpoint: if($i == 1, true, false);
    $smallest-breakpoint: if($i == length($all-breakpoints), true, false);

    // Get the breakpoint from the index we're on
    $current-breakpoint: nth($all-breakpoints, $i);
    $current-breakpoint-name : nth($current-breakpoint, 1);

    // Support for '-major' and '-minor' breakpoints
    $is-major: false;
    $is-minor: false;
    $is-minor-or-major: false;
    @if ($current-breakpoint-name  + '-major') == $breakpoint {
      $is-major: true;
      $is-minor-or-major: true;
      $breakpoint: $current_breakpoint-name;
    } @else if ($current-breakpoint-name  + '-minor') == $breakpoint {
      $is-minor: true;
      $is-minor-or-major: true;
      $breakpoint: $current_breakpoint-name;
    }

    @if $current-breakpoint-name == $breakpoint {
      $breakpoint_exists: true;

      // Get minimum value
      $breakpoint-min: null;
      @if ($smallest-breakpoint == false){
        $breakpoint-min: nth($current-breakpoint, 2);
      }

      // Get Maximum value
      $previous-breakpoint-min: null;
      $breakpoint-max: null;
      @if ($largest-breakpoint == false){
        $previous-breakpoint: nth($all-breakpoints, $i - 1);
        $previous-breakpoint-min: nth($previous-breakpoint, 2);
        $breakpoint-max: $previous-breakpoint-min - $smallest-unit;
      }

      // Get the halfway point for the breakpoint if it's a major or minor breakpoint
      $breakpoint-halfway: null;
      @if ($is-minor-or-major) {
        $breakpoint-halfway: floor(($previous-breakpoint-min - $breakpoint-min) / 2) + $breakpoint-min;
      }

      // Unset breakpoint-min if the breakpoint is to be and down
      @if ($up-or-down == 'and down') {
        $breakpoint-min: null;
      }

      // Unset breakpoint-max if the breakpoint is to be and up
      @if ($up-or-down == 'and up') {
        $breakpoint-max: null;
      }

      // Evaluate if both min and max values have been set
      $breakpoint-min-and-max: false;
      @if ($breakpoint-min != null) {
        @if ($breakpoint-max != null) {
          $breakpoint-min-and-max: true;
        }
      }

      // If smallest breakpoint and up
      $smallest-and-up: false;
      @if ($smallest-breakpoint){
        @if ($up-or-down == 'and up') {
          $smallest-and-up: true;
        }
      }

      // If largest breakpoint and up
      $largest-and-down: false;
      @if ($largest-breakpoint){
        @if ($up-or-down == 'and down') {
          $largest-and-down: true;
        }
      }

      // Catch a boo boo
      @if ($smallest-and-up) {
        @warn "Called the smallest breakpoint and up (which is everything)";
        @content;
      }
      // Catch a boo boo
      @else if ($largest-and-down) {
        @warn "Called the largest breakpoint and down (which is everything)";
        @content;
      }
      // Just this breakpoint
      @else if ($breakpoint-min-and-max){
        // No pixel ratio
        @if($px-ratio == null){
          @media
          only screen
          and (min-width: $breakpoint-min)
          and (max-width: $breakpoint-max) {
            @content;
          }
        }

        // Pixel ratio is specified
        @else {
          @media
            only screen
            and
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (-o-min-device-pixel-ratio: $px-ratio),
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (min-resolution: $min-resolution)
            and (min-width: $breakpoint-min)
            and (max-width: $breakpoint-max) {
            @content;
          }
        }
      }

      // This breakpoint and up
      @else if ($breakpoint-min != null){
        // No pixel ratio
        @if ($px-ratio == null){
          @media
          only screen
          and (min-width: $breakpoint-min) {
            @content;
          }
        }

        // Pixel ratio is specified
        @else {
          @media
            only screen
            and
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (-o-min-device-pixel-ratio: $px-ratio),
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (min-resolution: $min-resolution)
            and (min-width: $breakpoint-min) {
            @content;
          }
        }
      }

      // This breakpoint and down
      @else if ($breakpoint-max != null){
        // No pixel ratio
        @if ($px-ratio == null){
          @media
          only screen
          and (max-width: $breakpoint-max) {
            @content;
          }
        }

        // Pixel Ratio is specified
        @else {
          @media
            only screen
            and
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (-o-min-device-pixel-ratio: $px-ratio),
              (-webkit-min-device-pixel-ratio: $px-ratio),
              (min-resolution: $min-resolution)
            and (max-width: $breakpoint-max) {
            @content;
          }
        }
      }
    }
  }
  @if ($breakpoint_exists == false) {
    @warn 'Breakpoint \"' + $breakpoint + '\" does not seem to exist, please check your spelling.';
  }
}

/**
 * bullgrid
 *
 * A grid based on the ideas of inuit.css gridsystem. 
 * https://github.com/synoa/bullgrid
 *
 */

 /**
  * Default spacing 
  */
$bullgrid-default-spacing: 1em;





/**
 * Micro clearfix. 
 */
.cf {
  &:after {
    content: "";
    display: table;
    clear: both;
  }

  // IE <= 7 support
  *zoom: 1;
}





/**
 * Grid wrapper
 */
.gw {
  @extend .cf;

  /**
   * Negative margin to negate the padding on the first grid child.
   */
  margin-left: -$bullgrid-default-spacing;
    
  /**
   * The following declarations allow us to use the `.gw` class on lists.
   */
  list-style: none;
  margin-bottom: 0;
}





/**
 * Reverse grid order
 *
   <div class="gw gw--rev">

     <div class="g one-third">
       <p>Appears on the right</p>
     </div>

     <div class="g two-thirds">
       <p>Appears on the left</p>
     </div>

   </div>
 *
 */
.gw--rev > .g {
  float: right;
}





/**
 * Very infrequently occuring grid wrappers as children of grid wrappers.
 */
.gw > .gw {
  margin-left: 0;
}





/**
 * Remove the spacing of the grid-wrapper. 
 */
.gw--no-spacing {
  margin-left: 0;
}





/**
 * Grid
 *
 */
.g {
  float: left;
  padding-left: $bullgrid-default-spacing;
}





/**
 * Remove the spacing of the grid. 
 */
.g--no-spacing {
  padding-left: 0;
}





/**
 *
 * Sizes in human readable format.
 *
 */
@mixin grid-setup($namespace: "") {

  /*
   * Float
   */
  .#{$namespace}float-left { 
    float: left; 
  }

  .#{$namespace}float-right { 
    float: left; 
  }

  .#{$namespace}clear { 
    clear: both; 
  }




  
  /*
   * Hidden
   */
  .#{$namespace}hidden { 
    display: none; 
  }





  /**
   * Whole
   */
  .#{$namespace}one-whole { 
    width: 100%; 
  }





  /**
   * Halves
   */
  .#{$namespace}one-half { 
    width: 50%; 
  }





  /**
   * Thirds
   */
  .#{$namespace}one-third { 
    width: 33.333%; 
  }
  .#{$namespace}two-thirds { 
    width: 66.666%; 
  }





  /**
   * Quarters
   */
  .#{$namespace}one-quarter { 
    width: 25%; 
  }
  .#{$namespace}two-quarters { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}three-quarters { 
    width: 75%; 
  }





  /**
   * Fifths
   */
  .#{$namespace}one-fifth { 
    width: 20%; 
  }
  .#{$namespace}two-fifths { 
    width: 40%; 
  }
  .#{$namespace}three-fifths { 
    width: 60%; 
  }
  .#{$namespace}four-fifths { 
    width: 80%; 
  }





  /**
   * Sixths
   */
  .#{$namespace}one-sixth { 
    width: 16.666%; 
  }
  .#{$namespace}two-sixths { 
    @extend .#{$namespace}one-third; 
  }
  .#{$namespace}three-sixths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}four-sixths { 
    @extend .#{$namespace}two-thirds; 
  }
  .#{$namespace}five-sixths { 
    width: 83.333%; 
  }





  /**
   * Eighths
   */
  .#{$namespace}one-eighth { 
    width: 12.5%; 
  }
  .#{$namespace}two-eighths {
     @extend .#{$namespace}one-quarter; 
   }
  .#{$namespace}three-eighths { 
    width: 37.5%; 
  }
  .#{$namespace}four-eighths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}five-eighths { 
    width: 62.5%; 
  }
  .#{$namespace}six-eighths { 
    @extend .#{$namespace}three-quarters; 
  }
  .#{$namespace}seven-eighths { 
    width: 87.5%; 
  }





  /**
   * Tenths
   */
  .#{$namespace}one-tenth { 
    width: 10%; 
  }
  .#{$namespace}two-tenths { 
    @extend .#{$namespace}one-fifth; 
  }
  .#{$namespace}three-tenths { 
    width: 30%; 
  }
  .#{$namespace}four-tenths { 
    @extend .#{$namespace}two-fifths; 
  }
  .#{$namespace}five-tenths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}six-tenths { 
    @extend .#{$namespace}three-fifths; 
  }
  .#{$namespace}seven-tenths { 
    width: 70%; 
  }
  .#{$namespace}eight-tenths { 
    @extend .#{$namespace}four-fifths; 
  }
  .#{$namespace}nine-tenths { 
    width: 90%; 
  }





  /**
   * Twelfths
   */
  .#{$namespace}one-twelfth { 
    width: 8.333%; 
  }
  .#{$namespace}two-twelfths { 
    @extend .#{$namespace}one-sixth; 
  }
  .#{$namespace}three-twelfths { 
    @extend .#{$namespace}one-quarter; 
  }
  .#{$namespace}four-twelfths { 
    @extend .#{$namespace}one-third; 
  }
  .#{$namespace}five-twelfths { 
    width: 41.666%;
  }
  .#{$namespace}six-twelfths { 
    @extend .#{$namespace}one-half; 
  }
  .#{$namespace}seven-twelfths { 
    width: 58.333%; 
  }
  .#{$namespace}eight-twelfths { 
    @extend .#{$namespace}two-thirds; 
  }
  .#{$namespace}nine-twelfths { 
    @extend .#{$namespace}three-quarters; 
  }
  .#{$namespace}ten-twelfths { 
    @extend .#{$namespace}five-sixths; 
  }
  .#{$namespace}eleven-twelfths { 
    width: 91.666%; 
  }
}





/**
 * Create the grids for the default view. 
 */
@include grid-setup();





/**
 * Create the grids for different viewport sizes. 
 *
 * Use this with the breakpoint mixin provided or you your own
 */

//
// Auto generate the code based on the list of breakpoints
//
 @for $i from 1 through length($all-breakpoints) {
   $current-breakpoint: nth($all-breakpoints, $i);
   $current-breakpoint-name: nth($current-breakpoint, 1);

     @include breakpoint($current-breakpoint-name, "and down") {
     @include grid-setup(#{$current-breakpoint-name});
   }
 }

//
// Declared manually
//
// @include breakpoint(large) {
//   @include grid-setup("large-");
// }
//
// @include breakpoint(medium) {
//   @include grid-setup("medium-");
// }
              
            
!

JS

              
                
              
            
!
999px

Console