Recreating Bootstrap styles for my own CSS selectors.

my-fantasy-bootstrap.less

// Core variables and mixins.
// Unless otherwise noted, all @imports are from standard Bootstrap.

@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";  // Note: this is where Bootstrap establishes those '.span[...]' styles
@import "/css/less/lesshat/lesshat.less";  // Create your own Frankengrid by importing mixins from totally different libraries!

// CSS Reset
@import "reset.less";

// Grid system and page structure
@import "scaffolding.less";

// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";

// Components: Buttons & Alerts
@import "buttons.less";

// Components: Nav
@import "navs.less";
@import "navbar.less";


// Utility classes
@import "utilities.less"; // Has to be last to override when necessary 


// replaces <div class="span8">
article {
  .makeColumn(8);
	margin-left: 0;
	.clearfix();
	header {
		margin: (@baseLineHeight / 2) 0;
		font-family: @headingsFontFamily;
		font-weight: @headingsFontWeight;
		line-height: @baseLineHeight;
		color: @headingsColor;
		text-rendering: optimizelegibility; // Fix the character spacing for headings
		line-height: @baseLineHeight * 2;
		font-size: @baseFontSize * 2.25;
	}
}

// nitpicking replacement for '<div class="container">'. Could just as well have 
// been called "Meryl," "bongo," or "propellant."

.page {
	width: @gridRowWidth;
	 .container-fixed();
}

// Creates a screen-wide row, clearing both sides.
// replaces:
// <div class="row">
//    <div class="span12">


.global {
	.makeRow();
	.makeColumn(12);
}

header.global {
	.makeColumn(8);
	padding-bottom: (@baseLineHeight / 2) - 1;
    margin: @baseLineHeight 0 (@baseLineHeight * 1.5) 0;
    border-bottom: 1px solid @grayLighter;

    h1 {
		margin: (@baseLineHeight / 2) 0;
		font-family: @headingsFontFamily;
		line-height: @baseLineHeight * 2;  
		font-size: @baseFontSize * 2.75;
		
    }
}

footer.global {
	.makeColumn(6, 6);
}

nav {
    ul {
    	 .clearfix();
    	 margin-left: 0;
		  margin-bottom: @baseLineHeight;
		  list-style: none;
    	li {
    	float: left;

// recreating the 'nav-pills' treatment.

    	    a {
    	    	.border-radius(5px);
				 float: none;
				  // Vertically center the text given @navbarHeight
				  padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
				  color: @navbarLinkColor;
				  text-decoration: none;
				  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
				 display: block;
				 padding-right: 12px;
				  padding-left: 12px;
				  margin-right: 2px;
				  line-height: 14px; // keeps the overall height an even number
				/*
				padding-top: 8px;
				padding-bottom: 8px;*/
				margin-top: 2px;
				margin-bottom: 2px;
			}
		 &.active a,
		 a:hover {
				text-shadow: 0 -1px 0 rgba(0,0,0,.2);
				color: @white;
				background-color: @linkColor;
				.box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
				 text-decoration: none;

			}
    	}
	
    }

}
@media (min-width: 1200px) {
	.global {
    *zoom: 1;
    width: @gridRowWidth1200;
  }
  .global:before,
  .global:after {
    display: table;
    content: "";
    line-height: 0;
  }
  .global:after {
    clear: both;
  }
  article, header, nav {
    min-height: 1px;
    margin-left: @gridGutterWidth1200;
  }
  article {
    margin-left: -(@gridGutterWidth1200);
}

 .page { 
 		width: @gridRowWidth1200;
 		}

 }