JSFiddle

  • L.L.Bean bootstrap grid #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="container-fluid bean-full">
      <div class="row">
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12</div>
        </div>
        <div class="col-xs-1">
          <div>1/12 ...</div></div></div></div>
  • Validation - error zone (test)

    error zone at beginning of form, outlining issues.

     $(document).ready(function () {
         var submitted = false;
         //validation rules
         $("#example2").validate({
             //set this to false if you don't what to ...
  • Validation - error zone (test)

    error zone at beginning of form, outlining issues.

     $(document).ready(function () {
         var submitted = false;
         //validation rules
         $("#example2").validate({
             //set this to false if you don't what to ...
  • patterns - radio #2 is the latest revision

    patterns - radio

    <div class="formElements">
        <div class="row">
            <div class="input span-6 md-whole USA CANADA">
                <label for="billDaytimePhone">Daytime Phone Number</label>
                <div class="fieldWrap">
                    <input id="billDaytimePhone" class="twoPerRowInput required md-two-thirds sm-three-fourths mi-five-sixths" name="phone1" type="tel" maxlength="20"> <span class="validMark"></span>
    
                </div>
                <div class="helperText">Ex.: 555-123-4567</div>
            </div>
            <div class="input span-6 end md-whole noLabel radioGroup">
                <label class="radio inline" for="billHomePhone">
                    <input type="radio" value="H" id="billHomePhone" name="phone1_Loc" checked="checked">Home</label>
                <label class="radio inline" for="billWorkPhone">
                    <input type="radio" value="B" id="billWorkPhone" name="phone1_Loc">Work</label>
                <label class="radio inline" for="billMobilePhone">
                    <input type="radio" value="M" id="billMobilePhone" name="phone1_Loc">Mobile</label>
            </div>
        </div>
    </div>
  • patterns - checkboxes #3 is the latest revision

    patterns - checkboxes

    <h3>Multi choice checkboxes</h3>
    <p>What items have you purchased from L.L.Bean? Check all that apply. </p>
    <label for="footwear">
        <input type="checkbox" id="footwear" name="footwear">Footwear
    </label>
    <label for="outerwear">
        <input type="checkbox" id="outerwear" name="outerwear" checked>Outerwear
    </label>
    <label for="clothing">
        <input type="checkbox" id="clothing" name="clothing">Clothing
    </label>
    <label for="gear">
        <input type="checkbox" id="gear" name="gear" checked>Outdoor ...</label>
  • patterns - dropdowns

    patterns - dropdowns

    <h3>Optional vs. required dropdowns</h3>
    
    <form class="formElements" id="example2">
          <div class="form-group">
            <label for="example2-state">State</label>
            <select class="form-control" id="example2-state" name="example2-state" required>
                <option disabled selected>Select</option>
                <option>Maine</option>
                <option>Maryland</option>
                <option>Massachusetts</option>
            </select>
        </div>
       <div class="form-group">
           <label for="example2-title">Title <em>(optional)</em></label>
            <select class="form-control" id="example2-state" name="example2-state">
                <option selected>Select</option>
                <option>Mr.</option>
                <option>Ms.</option>
                <option>Mrs.</option>
                <option>Dr.</option>
            </select>
        </div>
        
    </form>
  • patterns - credit card #15 is the latest revision

    credit card masking

    $('input.cc-num').payment('formatCardNumber');
    $('input.cc-cvc').payment('formatCardCVC');
    $('input.cc-exp').payment('formatCardExpiry');
    
    var llbvisa = [ {
        type: 'llbvisa',
          pattern: /^4868/,
          format: /(\d ...
  • patterns - link

    pattern - links

    $(function () {
        $('[data-toggle="popover"]').popover()
    });
    
    // add close button to popover
        $("[data-toggle=popover]").on('click', function(e) {
            var $this = $(this);
            $(this).next ...
  • Pattern - body copy

    Pattern - body copy

    <div class="section">
        <p class="large">Large font for emphasis</p>
        <span class="subtext">arial, 15px, bold</span>
    </div>
    
    <div class="section">
        <p class="standard">Standard Body Copy</p>
        <span class="subtext">arial, 14px</span>
    </div>
    
    <div class="section">
        <p class="small">Smaller Body Copy</p>
        <span class="subtext">arial, 13px</span>
    </div>
    
    <div class="section">
        <p class="disclaimer">Disclaimer Text</p>
        <span class="subtext">arial ...</span></div>
  • pattern- headlines

    headlines

    <div class="section normal">
        <h1>H1 Headline on Pages</h1>
        <span class="subtext">ARIAL, 20px, #325035</span>
    </div>
    
    <div class="section pdp">
        <h1>H1 Headline on Product Pages</h1>
        <span class="subtext">ARIAL, 24px, BOLD, #000000</span>
    </div>
    
    <div class="section">
        <h2>H2 Section Divider</h2>
        <span class="subtext">ARIAL ...</span></div>