Friday, September 20, 2013

College Fun - bootstrap framework basics

Okay guys so I'm at college now and busier than ever before.  Currently I'm working on a plugin for an image theme for a few friends on WJ.  I'm also learning to work with bootstrap as I'm getting a job developing for someone.  I can't describe any details about the job and I won't be able to post any of my work but I will be able to post everything learned about bootstrap: http://getbootstrap.com/2.3.2/getting-started.html  And I'm not going to post anything about the plugin yet, but I will as soon as it's done.  For now here's my notes/progress with the bootstrap framework:
  • Bootstrap needs HTML5 as well as jQuery
  • Bootstrap sets a basic css template to work off of that controls the global display, typography and link styles.  In specific it:
    • Found in scaffolding.less:
      • removes the body margin
      • makes the body bg color white
      • uses @baseFontFamily, @baseFontSize and @baseLineGeight attributes as our typographic base.
      • set link color with @linkColor and applies underline affect on hover
    • Found in reset.less:
  • without responsive css added, the bootstrap grid system uses a 12 col layout with a 940px wide container.
  • with responsive css, grid adapts to be 724px and 1170px depending on the viewing screen res.
    • with this the columns become fluid and stack under each other
  • Because there are 12 columns you need to make the spans add up to = 12.  For example:
<div class="row">
     <div class="span5">...</div>
     <div class="span5">...</div>
     <div calss="span2">...</div>
</div>
  • This creates a filled row.  In the old bootstrap (2.x) you used to have to enter .row-fluid but in the new version of bootstrap you just use .row* and it's fluid automatically because there's no more "fixed grid".
  • You use .offset* for shifting columns.
  • For embedding two spans it would look like this:
<div class="row">
   <div class="span10">
     <div class="row">
        <div class="span6">...</div>
        <div class="span4">...</div>
     </div>
   </div>
</div>

  • Use .container for different sections of the website.
Okay so this pretty much covers all the basics that I need to know about the bootstrap framework.