Baseguide

A lightweight and robust CSS framework for prototyping and production code.

Download View on GitHub

Compatible

Tested in a wide range of browsers.

Customizable

Use Sass to make it your own.

Scalable

Everything is relative.

Base

Normalize

Baseguide uses normalize.css for optimal cross-browser rendering.


          

        

        

          

            
Content

            
Base spacing is applied to all flow content elements.

          

          

            

              
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


              

                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              


              

                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
              


              
    
                
  • Choice A
    • 
                
  • Choice B
                  
      
                    
    • Sub 1
      • 
                    
    • Sub 2
      • 
                  
    
                
    • 
              

            
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
  aliquyam erat, sed diam voluptua.</p>

<p>
  <i>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua.</i>
</p>

<p>
  <b>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
    aliquyam erat, sed diam voluptua.</b>
</p>

<ul>
  <li>Choice A</li>
  <li>Choice B
    <ul>
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ul>
  </li>
</ul>

          

        

        

          

            
Headings

            
The headings sizes are generated using modular scale.

          

          

            

              
Heading h1

              
Heading h2

              
Heading h3

              
Heading h4

              
Heading h5

              
Heading h6

            
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<h5>Heading h5</h5>
<h6>Heading h6</h6>

          

        

        

          

            
Print

            
Basic print styles from the HTML5 Boilerplate are included.

          

          

            

          

        

      


      

        
Objects

        

          

            
List

          

          

            

              
    
                
  • Unstyled Item 1
    • 
                
  • Unstyled Item 2
    • 
                
  • Unstyled Item 3
    • 
              


              
    
                
  • Inline Item 1
    • 
                
  • Inline Item 2
    • 
                
  • Inline Item 3
    • 
              


              
    
                
  • Equal Item 1
    • 
                
  • Equal Item 2
    • 
                
  • Equal Item 3
    • 
              

            
<ul class="list-unstyled">
  <li>Unstyled Item 1</li>
  <li>Unstyled Item 2</li>
  <li>Unstyled Item 3</li>
</ul>

<ul class="list-inline">
  <li>Inline Item 1</li>
  <li>Inline Item 2</li>
  <li>Inline Item 3</li>
</ul>

<ul class="list-equal">
  <li>Equal Item 1</li>
  <li>Equal Item 2</li>
  <li>Equal Item 3</li>
</ul>

          

        

        

          

            
Media

          

          

            

              

                

                  

                    
                      ...
                    
                  

                  

                    
Media top

                    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

                  

                

              


              

                

                  

                    
                      ...
                    
                  

                  

                    
Media middle

                    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

                  

                

              


              

                

                  

                    
                      ...
                    
                  

                  

                    
Media bottom

                    
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

                  

                

              

            
<div class="spacing-bottom">
  <div class="media">
    <div class="media-left">
      <a href="#">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAChklEQVR4nO3X0U7iQACFYd//CSS2VgtESUm0GARSIQQoSjvvdPZisbHsImRjssf4X/whMxczZL52AhchBJFPF//7CxAg1gFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZlmC1HV91txXrPtVa397kM1moyiKNJvNmrmqqnR3d6c0TbXZbJr5oiiUJInyPD9r7TRNlWVZay7PcyVJoqIoTu73I0FCCHp4eGiBzOdzZVmm5+fn1uGnaaqyLBXHsaqqauZfX19bn4frvI93u52ur6+1Xq/V7XZP7gfIfjyZTPT4+KiiKFoHGkWR6rrWzc2NttutQvh9zfR6PQ0Ggz8O8xCkLEuladrAnNoPkP14PB4rz3O9vLxoMBg081dXVwoh6Pb2tnW1jEYjXV5earlcfgry/mbsdjtFUXRyP0D24+l02jyxw+GwmY/jWHVdK0mS5nqq61p5nqssS43H409B3t+Qt7e31htybD9A9uPFYqH7+3s9PT1pNBo1891uV6vVqrm6Tq17CFJVleI41nK5VL/fP7kfIB8OLkkSRVHUupqm06k6nc7ZT/EhSAhBWZap0+mctd+PBTnW396Cj7+u/rVja/A/hAD5LgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBm/QJ7sycEPKoJDQAAAABJRU5ErkJggg=="
        alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media top</h4>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
  </div>
</div>

<div class="spacing-bottom">
  <div class="media">
    <div class="media-left">
      <a href="#">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAChklEQVR4nO3X0U7iQACFYd//CSS2VgtESUm0GARSIQQoSjvvdPZisbHsImRjssf4X/whMxczZL52AhchBJFPF//7CxAg1gFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZlmC1HV91txXrPtVa397kM1moyiKNJvNmrmqqnR3d6c0TbXZbJr5oiiUJInyPD9r7TRNlWVZay7PcyVJoqIoTu73I0FCCHp4eGiBzOdzZVmm5+fn1uGnaaqyLBXHsaqqauZfX19bn4frvI93u52ur6+1Xq/V7XZP7gfIfjyZTPT4+KiiKFoHGkWR6rrWzc2NttutQvh9zfR6PQ0Ggz8O8xCkLEuladrAnNoPkP14PB4rz3O9vLxoMBg081dXVwoh6Pb2tnW1jEYjXV5earlcfgry/mbsdjtFUXRyP0D24+l02jyxw+GwmY/jWHVdK0mS5nqq61p5nqssS43H409B3t+Qt7e31htybD9A9uPFYqH7+3s9PT1pNBo1891uV6vVqrm6Tq17CFJVleI41nK5VL/fP7kfIB8OLkkSRVHUupqm06k6nc7ZT/EhSAhBWZap0+mctd+PBTnW396Cj7+u/rVja/A/hAD5LgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBm/QJ7sycEPKoJDQAAAABJRU5ErkJggg=="
        alt="...">
      </a>
    </div>
    <div class="media-body media-middle">
      <h4 class="media-heading">Media middle</h4>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
  </div>
</div>

<div class="spacing-bottom">
  <div class="media">
    <div class="media-left">
      <a href="#">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAChklEQVR4nO3X0U7iQACFYd//CSS2VgtESUm0GARSIQQoSjvvdPZisbHsImRjssf4X/whMxczZL52AhchBJFPF//7CxAg1gFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZlmC1HV91txXrPtVa397kM1moyiKNJvNmrmqqnR3d6c0TbXZbJr5oiiUJInyPD9r7TRNlWVZay7PcyVJoqIoTu73I0FCCHp4eGiBzOdzZVmm5+fn1uGnaaqyLBXHsaqqauZfX19bn4frvI93u52ur6+1Xq/V7XZP7gfIfjyZTPT4+KiiKFoHGkWR6rrWzc2NttutQvh9zfR6PQ0Ggz8O8xCkLEuladrAnNoPkP14PB4rz3O9vLxoMBg081dXVwoh6Pb2tnW1jEYjXV5earlcfgry/mbsdjtFUXRyP0D24+l02jyxw+GwmY/jWHVdK0mS5nqq61p5nqssS43H409B3t+Qt7e31htybD9A9uPFYqH7+3s9PT1pNBo1891uV6vVqrm6Tq17CFJVleI41nK5VL/fP7kfIB8OLkkSRVHUupqm06k6nc7ZT/EhSAhBWZap0+mctd+PBTnW396Cj7+u/rVja/A/hAD5LgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBm/QJ7sycEPKoJDQAAAABJRU5ErkJggg=="
        alt="...">
      </a>
    </div>
    <div class="media-body media-bottom">
      <h4 class="media-heading">Media bottom</h4>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
    </div>
  </div>
</div>

          

        

        

          

            
Embed

          

          

            

              

                
              

            
<div class="embed-responsive">
  <iframe src="https://player.vimeo.com/video/23237102?color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0" width="500" height="281"
  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

          

        

        

          

            
Grid

            
All columns need the
              .col
              class. Their width can be set using a modifier class (e.g.
              .col-md-6).

          

          

            

              

                

                  
.col-xs-8

                

                

                  
.col-xs-4

                

              


              

                

                  
.col-xs-4

                

                

                  
.col-xs-8

                

              


              

                

                  
.col-xs-6

                

                

                  
.col-xs-6

                

              


              

                

                  
.col-xs-4

                

                

                  
.col-xs-4

                

                

                  
.col-xs-4

                

              


              

                

                  
.col-sm-3

                

                

                  
.col-sm-3

                

                

                  
.col-sm-3

                

                

                  
.col-sm-3

                

              

            
<div class="row">
  <div class="col col-xs-8">
    <div class="col__item">.col-xs-8</div>
  </div>
  <div class="col col-xs-4">
    <div class="col__item">.col-xs-4</div>
  </div>
</div>

<div class="row">
  <div class="col col-xs-4">
    <div class="col__item">.col-xs-4</div>
  </div>
  <div class="col col-xs-8">
    <div class="col__item">.col-xs-8</div>
  </div>
</div>

<div class="row">
  <div class="col col-xs-6">
    <div class="col__item">.col-xs-6</div>
  </div>
  <div class="col col-xs-6">
    <div class="col__item">.col-xs-6</div>
  </div>
</div>

<div class="row">
  <div class="col col-xs-4">
    <div class="col__item">.col-xs-4</div>
  </div>
  <div class="col col-xs-4">
    <div class="col__item">.col-xs-4</div>
  </div>
  <div class="col col-xs-4">
    <div class="col__item">.col-xs-4</div>
  </div>
</div>

<div class="row">
  <div class="col col-sm-3">
    <div class="col__item">.col-sm-3</div>
  </div>
  <div class="col col-sm-3">
    <div class="col__item">.col-sm-3</div>
  </div>
  <div class="col col-sm-3">
    <div class="col__item">.col-sm-3</div>
  </div>
  <div class="col col-sm-3">
    <div class="col__item">.col-sm-3</div>
  </div>
</div>

          

        

        

          

            
Grid Offset

          

          

            

              

                

                  
.col-xs-5

                

                

                  
.col-xs-5.col-xs-offset-2

                

              

            
<div class="row">
  <div class="col col-xs-5">
    <div class="col__item">.col-xs-5</div>
  </div>
  <div class="col col-xs-5 col-xs-offset-2">
    <div class="col__item">.col-xs-5.col-xs-offset-2</div>
  </div>
</div>

          

        

        

          

            
Grid Push / Pull

          

          

            

              

                

                  
.col-xs-6.col-xs-push-6

                

                

                  
.col-xs-6.col-xs-pull-6

                

              

            
<div class="row">
  <div class="col col-xs-6 col-xs-push-6">
    <div class="col__item">.col-xs-6.col-xs-push-6</div>
  </div>
  <div class="col col-xs-6 col-xs-pull-6">
    <div class="col__item">.col-xs-6.col-xs-pull-6</div>
  </div>
</div>

          

        

      


      

        
Components

        

          

            
Form

          

          

            

              

                

                  

                    
                  

                  

                    
                  

                


                

                  

                    
                  

                  

                    
                  

                


                

                  

                    
                  

                

              


              

                

                  

                    

                      
                      
                    

                  

                  

                    

                      
                      
                    

                  

                


                

                  
                  
                


                

                  
                  
                


                

                  
                  
                


                

                  

                    
                    
                  


                  

                    
                    
                  

                


                

                  

                    
                    
                  


                  

                    
                    
                  

                


                

                  
                  
                

              

            
<form>
  <div class="row form-group">
    <div class="col col-md-2">
      <label class="label-inline" for="username">Username</label>
    </div>
    <div class="col col-md-4">
      <input id="username" type="text">
    </div>
  </div>

  <div class="row form-group">
    <div class="col col-md-2">
      <label class="label-inline" for="password">Password</label>
    </div>
    <div class="col col-md-4">
      <input id="password" type="password">
    </div>
  </div>

  <div class="row form-group">
    <div class="col col-md-4 col-md-offset-2">
      <input class="btn" type="submit" value="Login">
    </div>
  </div>
</form>

<form>
  <div class="row">
    <div class="col col-md-6">
      <div class="form-group">
        <label for="firstname">First name</label>
        <input id="firstname" type="text" placeholder="Enter first name">
      </div>
    </div>
    <div class="col col-md-6">
      <div class="form-group">
        <label for="lastname">Last name</label>
        <input id="lastname" type="text" placeholder="Enter last name">
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email address</label>
    <input id="email" type="text">
  </div>

  <div class="form-group">
    <label for="comment">Comment</label>
    <textarea id="comment"></textarea>
  </div>

  <div class="form-group">
    <label for="select-1">Select</label>
    <select id="select-1">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>

  <div class="form-group">
    <div>
      <input id="checkbox-1" type="checkbox">
      <label for="checkbox-1">Checkbox 1</label>
    </div>

    <div>
      <input id="checkbox-2" type="checkbox">
      <label for="checkbox-2">Checkbox 2</label>
    </div>
  </div>

  <div class="form-group">
    <div>
      <input id="radio-1" type="radio" name="radio">
      <label for="radio-1">Radio 1</label>
    </div>

    <div>
      <input id="radio-2" type="radio" name="radio">
      <label for="radio-2">Radio 2</label>
    </div>
  </div>

  <div class="form-group">
    <label for="file">Upload File</label>
    <input id="file" type="file">
  </div>
</form>

          

        

        

          

            
Form Custom

          

          

            

              

                

                  
                

              


              

                

                  
                  
                


                

                  
                  
                

              


              

                

                  
                  
                


                

                  
                  
                

              


              

                
                
              

            
<div class="form-group">
  <div class="select">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <input id="checkbox-custom-1" type="checkbox">
    <label for="checkbox-custom-1">Checkbox 1</label>
  </div>

  <div class="checkbox">
    <input id="checkbox-custom-2" type="checkbox">
    <label for="checkbox-custom-2">Checkbox 2</label>
  </div>
</div>

<div class="form-group">
  <div class="radio">
    <input id="radio-custom-1" type="radio" name="radio">
    <label for="radio-custom-1">Radio 1</label>
  </div>

  <div class="radio">
    <input id="radio-custom-2" type="radio" name="radio">
    <label for="radio-custom-2">Radio 2</label>
  </div>
</div>

<div class="form-group">
  <label for="file-custom" class="btn">Upload File</label>
  <input type="file" id="file-custom" class="sr-only">
</div>

          

        

        

          

            
Button

          

          

            

              

                Anchor button
                
                
                
              


              

                Anchor button
                
                
                
              

            
<div class="form-group">
  <a class="btn" href="#" role="button">Anchor button</a>
  <button class="btn" type="submit">Button element</button>
  <input class="btn" type="button" value="Button input">
  <input class="btn" type="submit" value="Submit input">
</div>

<div class="form-group">
  <a class="btn disabled" href="#" role="button">Anchor button</a>
  <button class="btn" type="submit" disabled>Button element</button>
  <input class="btn" type="button" value="Button input" disabled>
  <input class="btn" type="submit" value="Submit input" disabled>
</div>

          

        

        

          

            
Table

          

          

            

              

                
                  

                    #
                    Header 1
                    Header 2
                    Header 3
                  

                
                
                  

                    1
                    Division 1
                    Division 2
                    Division 3
                  

                  

                    2
                    Division 1
                    Division 2
                    Division 3
                  

                  

                    3
                    Division 1
                    Division 2
                    Division 3
                  

                
              

            
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
  </tbody>
</table>

          

        

      


      

        
Utilities

        

          

            
Position

          

          

            

              ...
            
<img class="block-center" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAChklEQVR4nO3X0U7iQACFYd//CSS2VgtESUm0GARSIQQoSjvvdPZisbHsImRjssf4X/whMxczZL52AhchBJFPF//7CxAg1gFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZlmC1HV91txXrPtVa397kM1moyiKNJvNmrmqqnR3d6c0TbXZbJr5oiiUJInyPD9r7TRNlWVZay7PcyVJoqIoTu73I0FCCHp4eGiBzOdzZVmm5+fn1uGnaaqyLBXHsaqqauZfX19bn4frvI93u52ur6+1Xq/V7XZP7gfIfjyZTPT4+KiiKFoHGkWR6rrWzc2NttutQvh9zfR6PQ0Ggz8O8xCkLEuladrAnNoPkP14PB4rz3O9vLxoMBg081dXVwoh6Pb2tnW1jEYjXV5earlcfgry/mbsdjtFUXRyP0D24+l02jyxw+GwmY/jWHVdK0mS5nqq61p5nqssS43H409B3t+Qt7e31htybD9A9uPFYqH7+3s9PT1pNBo1891uV6vVqrm6Tq17CFJVleI41nK5VL/fP7kfIB8OLkkSRVHUupqm06k6nc7ZT/EhSAhBWZap0+mctd+PBTnW396Cj7+u/rVja/A/hAD5LgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBmAWIWIGYBYhYgZgFiFiBm/QJ7sycEPKoJDQAAAABJRU5ErkJggg=="
alt="...">

          

        

        

          

            
Float / Clearfix

          

          

            

              

                

                  Float Left
                

                

                  Float Right
                

              

            
<div class="clearfix">
  <div class="pull-left">
    Float Left
  </div>
  <div class="pull-right">
    Float Right
  </div>
</div>

          

        

        

          

            
Text

          

          

            

              
Text left

              
Text left

              
Text left

            
<p class="text-left">Text left</p>
<p class="text-center">Text left</p>
<p class="text-right">Text left</p>

          

        

        

          

            
Visibility

          

          

            

              
Visible only on the xs breakpoint

              
Visible only on the sm breakpoint

              
Visible only on the md breakpoint

              
Visible only on the lg breakpoint

              
Visible only on the xl breakpoint


              


              
Visible from the xs breakpoint

              
Visible from the sm breakpoint

              
Visible from the md breakpoint

              
Visible from the lg breakpoint

            
<div class="visible-xs">Visible only on the xs breakpoint</div>
<div class="visible-sm">Visible only on the sm breakpoint</div>
<div class="visible-md">Visible only on the md breakpoint</div>
<div class="visible-lg">Visible only on the lg breakpoint</div>
<div class="visible-xl">Visible only on the xl breakpoint</div>

<br>

<div class="visible-xs-up">Visible from the xs breakpoint</div>
<div class="visible-sm-up">Visible from the sm breakpoint</div>
<div class="visible-md-up">Visible from the md breakpoint</div>
<div class="visible-lg-up">Visible from the lg breakpoint</div>

          

        

        

          

            
Screenreader

            
The
              .sr-only
              class visually hides content. With the additional
              .sr-only-focusable
              class content becomes visible once focused (for sighted keyboard users).

          

          

            

              Skip to main content
            
<a class="sr-only sr-only-focusable" href="#main-content">Skip to main content</a>