Historia

Në ditët e mëparshme të Twitter, inxhinierët përdornin pothuajse çdo bibliotekë me të cilën njiheshin për të përmbushur kërkesat e pjesës së përparme. Bootstrap filloi si një përgjigje ndaj sfidave që u paraqitën dhe zhvillimi u përshpejtua shpejt gjatë Hackweek-ut të parë të Twitter.

Me ndihmën dhe reagimet e shumë inxhinierëve në Twitter, Bootstrap është rritur ndjeshëm për të përfshirë jo vetëm stilet bazë, por modelet më elegante dhe të qëndrueshme të dizajnit të pjesës së përparme.

Lexoni më shumë në dev.twitter.com ›

Mbështetja e shfletuesit

Bootstrap është testuar dhe mbështetur në shfletues të mëdhenj modernë si Chrome, Safari, Internet Explorer dhe Firefox.

• Safari i fundit
• Google Chrome më të fundit
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Çfarë përfshihet

Bootstrap vjen i kompletuar me modele CSS të përpiluara, të pakompiluara dhe shembuj.

• Të gjithë skedarët origjinalë .pak
• CSS e kompiluar dhe e minuar plotësisht
• Dokumentacioni i plotë i udhëzuesit të stilit
• Shembull i shabllonit të faqes (më shumë do të vijnë së shpejti)

Rrjeti i parazgjedhur

Sistemi i parazgjedhur i rrjetit i ofruar si pjesë e Bootstrap është një rrjet me 16 kolona me gjerësi 940 px. Është një shije e sistemit popullor të rrjetit 960, por pa diferencë/mbushje shtesë në anën e majtë dhe të djathtë.

Shembull i shënjimit të rrjetit

Siç tregohet këtu, një plan urbanistik bazë mund të krijohet me dy "kolona", secila që përfshin një numër prej 16 kolonave themelore që përcaktuam si pjesë e sistemit tonë të rrjetit. Shihni shembujt më poshtë për më shumë variacione.

<div class = "rresht" > 
  <div class = "span6 kolona" > 
    ...
  </div>
  <div class = "span10 kolona" > 
    ...
  </div>
</div>

Paraqitje fikse

Struktura e paracaktuar dhe e thjeshtë me gjerësi 940 px, e përqendruar për pothuajse çdo faqe interneti ose faqe të ofruar nga një e vetme <div.container>.

<trupi>
  <div class = "enë" > 
    ...
  </div>
</body>

Paraqitja e lëngshme

Një strukturë fleksibël fleksibël dhe alternative e faqeve me gjerësi minimale dhe maksimale dhe një shirit anësor në të majtë. E shkëlqyeshme për aplikacione dhe dokumente.

<trupi>
  <div class = "kontenier-lëng" > 
    <div class = "bar anësor" > 
      ...
    </div>
    <div class = "përmbajtje" > 
      ...
    </div>
  </div>
</body>

Titujt dhe kopjoni

Një hierarki tipografike standarde për strukturimin e faqeve tuaja të internetit.

I gjithë rrjeti tipografik bazohet në dy variabla Less në skedarin tonë preboot.less: @basefontdhe @baseline. E para është madhësia e fontit bazë të përdorur në të gjithë dhe e dyta është lartësia e linjës bazë.

Ne i përdorim ato variabla, dhe disa matematikë, për të krijuar kufijtë, mbushjet dhe lartësitë e rreshtave të të gjitha llojeve tona dhe më shumë.

h1. Kreu 1

h2. Kreu 2

h3. Kreu 3

h4. Kreu 4

h5. Kreu 5

h6. Kreu 6

Shembull paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Shembulli i titullit Ka nëntitull…

Të ndryshme. elementet

Përdorimi i theksit, adresave dhe shkurtesave

<strong> <em> <address> <abbr>

Kur të përdoret

Etiketat e theksit ( <strong>dhe <em>) duhet të përdoren për të treguar rëndësinë ose theksimin shtesë të një fjale ose fraze në lidhje me kopjen përreth. Përdorni <strong>për rëndësi dhe <em>për theksim të stresit .

Theksimi në një paragraf

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, një pharetra augue.

Shënim: Është ende në rregull të përdoren <b>dhe <i>etiketat në HTML5 dhe ato nuk duhet të jenë përkatësisht të stilizuara të theksuara dhe të pjerrëta (edhe pse nëse ka një element më semantik, përdorni atë). <b>ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>është kryesisht për zërin, termat teknike, etj.

Adresat

Elementi <address>përdoret për informacionin e kontaktit për paraardhësin e tij më të afërt, ose të gjithë trupin e punës. Ja si duket:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Shënim: Çdo rresht në një <address>duhet të përfundojë me një ndërprerje rreshti ( <br />) ose të mbështillet në një etiketë të nivelit të bllokut (p.sh., <p>) për të strukturuar siç duhet përmbajtjen.

Shkurtesat

Për shkurtesat dhe akronimet, përdorni <abbr>etiketën ( <acronym>është e vjetëruar në HTML5 ). Vendosni formularin e stenografisë brenda etiketës dhe vendosni një titull për emrin e plotë.

Blloqe kuotash

<blockquote> <p> <small>

Si të citojmë

Për të përfshirë një kuotë bllokimi , mbështilleni <blockquote>dhe etiketoni. Përdorni elementin për të cituar burimin tuaj dhe do të merrni një vizë em përpara tij.<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Numri i plotë posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

E pa porositur<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Lehtësimi në pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Enean sit amet erat nunc
• Eget porttitor lorem

E pa stiluar<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Lehtësimi në pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Enean sit amet erat nunc
• Eget porttitor lorem

porositur<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Lehtësimi në pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Enean sit amet erat nunc
8. Eget porttitor lorem

Përshkrimdl

Listat e përshkrimeve

Një listë përshkrimi është e përkryer për përcaktimin e termave.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ndërtimi i tavolinave

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tabelat janë të shkëlqyera - për shumë gjëra. Tabelat e shkëlqyera, megjithatë, kanë nevojë për pak dashuri për shënjimin për të qenë të dobishme, të shkallëzueshme dhe të lexueshme (në nivelin e kodit). Këtu janë disa këshilla për të ndihmuar.

Gjithmonë mbështillni kokat tuaja të kolonës në një mënyrë të <thead>tillë që hierarkia të jetë <thead>> <tr>> <th>.

Ngjashëm me titujt e kolonave, e gjithë përmbajtja e trupit të tabelës suaj duhet të mbështillet në një <tbody>mënyrë që hierarkia juaj të jetë <tbody>> <tr>> <td>.

Shembull: Stilet e parazgjedhura të tabelës

Të gjitha tabelat do të stilohen automatikisht vetëm me kufijtë thelbësorë për të siguruar lexueshmëri dhe për të ruajtur strukturën. Nuk ka nevojë të shtoni klasa ose atribute shtesë.

#	Emri	Mbiemri	Gjuhe
1	Disa	Një	anglisht
2	Joe	Sixpack	anglisht
3	Stu	Dent	Kodi

<tabela>
  ...
</tabela>

Shembull: Me vija zebra

Bëhuni pak elegant me tavolinat tuaja duke shtuar vija zebra—thjesht shtoni .zebra-stripedklasën.

#	Emri	Mbiemri	Gjuhe
1	Disa	Një	anglisht
2	Joe	Sixpack	anglisht
3	Stu	Dent	Kodi

Shënim: Zebra-striping është një përmirësim progresiv që nuk disponohet për shfletuesit më të vjetër si IE8 dhe më poshtë.

<table class = "zebra-striped" > 
...
</tabela>

Shembull: Zebra-striped w/ TableSorter.js

Duke marrë shembullin e mëparshëm, ne përmirësojmë dobinë e tabelave tona duke ofruar funksionalitet renditjeje nëpërmjet jQuery dhe shtojcës Tablesorter . Klikoni në kokën e çdo kolone për të ndryshuar renditjen.

#	Emri	Mbiemri	Gjuhe
1	E juaja	Një	anglisht
2	Joe	Sixpack	anglisht
3	Stu	Dent	Kodi

<script src = "js/jquery/jquery.tablesorter.min.js" </script> 
<skript > 
  $ ( funksioni () { 
    $ ( "table# sortTableExample" ). klasifikues tavoline ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</tabela>

Stilet e parazgjedhura

Të gjitha formave u jepen stile të paracaktuara për t'i paraqitur ato në një mënyrë të lexueshme dhe të shkallëzueshme. Stilet ofrohen për futjen e tekstit, listat e përzgjedhjes, zonat e tekstit, butonat e radios dhe kutitë e kontrollit dhe butonat.

Shembull i formës së legjendës

Hyrja X-Large

Zgjidhni

1 2 3 4 5

Zgjidhni

1 2 3 4 5

Input i paeditueshëm

Disa vlera këtu

Hyrja e çaktivizuar

Hyrja X-Large

Pjesë e vogël e tekstit të ndihmës

Shembull i formës së legjendës

Teksti i parapërgatitur

@

Kutia e zgjedhjes e paracaktuar

Kutia e zgjedhjes së shtuar

Hyrja e skedarit

Shembull i formës së legjendës

Lista e opsioneve

• Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme
• Opsioni dy gjithashtu mund të kontrollohet dhe përfshihet në rezultatet e formularit
• Opsioni tre mund - po, e keni marrë me mend - gjithashtu mund të kontrollohet dhe përfshihet në rezultatet e formularit
• Opsioni katër nuk mund të kontrollohet pasi është i çaktivizuar.

Shënim: Etiketat rrethojnë të gjitha opsionet për zona shumë më të mëdha të klikimeve dhe një formë më të përdorshme.

Gama e datave

te Të gjitha orët tregohen si Ora Standarde e Paqësorit (GMT -08:00).

Textarea

Blloku i tekstit të ndihmës për të përshkruar fushën e mësipërme nëse është e nevojshme.

Lista e opsioneve

• Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme
• Opsioni dy mund të është diçka tjetër dhe zgjedhja e tij do të anulojë opsionet 1

  Anulo

Forma të grumbulluara

Shtoni .form-stackednë HTML të formularit tuaj dhe do të keni etiketa në krye të fushave të tyre në vend që të jenë në të majtë. Kjo funksionon shkëlqyeshëm nëse format tuaja janë të shkurtra ose keni dy kolona hyrjesh për forma më të rënda.

Shembull i formës së legjendës

Hyrja X-Large

Zgjidhni

1 2 3 4 5

Shembull i formës së legjendës

Hyrja X-Large

Pjesë e vogël e tekstit të ndihmës

Lista e opsioneve

• Opsioni i parë është kjo dhe ajo - sigurohuni që të përfshini pse është e mrekullueshme
• Opsioni dy gjithashtu mund të kontrollohet dhe përfshihet në rezultatet e formularit

Shënim: Etiketat rrethojnë të gjitha opsionet për zona shumë më të mëdha të klikimeve dhe një formë më të përdorshme.

Ruaj ndryshimet  Anulo

Butonat

Si konventë, butonat përdoren për veprime ndërsa lidhjet përdoren për objektet. Për shembull, "Shkarko" mund të jetë një buton dhe "aktiviteti i fundit" mund të jetë një lidhje.

Të gjithë butonat janë të paracaktuar në një stil gri të çelur, por një numër klasash funksionale mund të aplikohen për stile të ndryshme ngjyrash. Këto klasa përfshijnë një .primaryklasë blu, një klasë blu të lehta .info, një klasë jeshile .successdhe një klasë të kuqe .danger. Plus, rrokullisja e stileve tuaja është e lehtë.

Shembull butona

Stilet e butonave mund të aplikohen për çdo gjë me atë të .btnaplikuar. Zakonisht do të dëshironi t'i zbatoni këto vetëm në elemente <a>, <button>dhe zgjidhni . <input>Ja si duket:

Madhësitë alternative

Dëshironi butona më të mëdhenj apo më të vegjël? Kanë në atë!

Gjendja me aftësi të kufizuara

Për butonat që nuk janë aktivë ose janë çaktivizuar nga aplikacioni për një arsye ose një tjetër, përdorni gjendjen e çaktivizuar. Kjo është .disabledpër lidhjet dhe :disabledpër <button>elementët.

Lidhjet

Butonat

Çfarë është ajo

Shiriti ynë i sipërm është një shirit fiks që përmban logon ose emrin e një faqe interneti, navigimin kryesor dhe formularin e kërkimit.

I personalizueshëm

Të gjithë elementët brenda, si dhe i gjithë shiriti i sipërm, janë opsionalë. Ju mund të zgjidhni të përfshini një logo/emër, navigim, kërkim dhe një navigim dytësor—ose ndonjë kombinim të tyre.

Të përfshira dropdown

Si pjesë e navigimit kryesor, ne kemi përfshirë mundësinë që ju të shtoni skedarë me zbritje në navigimin tuaj. Shikoni navigimin dytësor më sipër (drejtuar djathtas) për të parë se si është bërë.

Skedat dhe pilula

Krijoni navigim të thjeshtë dytësor me një <ul>. Ndërroni midis skedave ose pilulave duke shtuar klasën e duhur.

E shkëlqyeshme për nën-seksione të përmbajtjes si faqet e cilësimeve të llogarisë sonë dhe afatet kohore të përdoruesve për ndërrimin ndërmjet faqeve me përmbajtje të ngjashme. E disponueshme në stile me skeda ose pilula.

• Shtëpi
• Profili
• Mesazhet
• Cilësimet
• Kontaktoni
• Dropdown
  • Lidhje dytësore
  • Diçka tjetër këtu
  • Një lidhje tjetër

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Faqja kryesore </a></li>  
  <li><a href = "#" > Profili </a></li> 
  <li><a href = "#" > Mesazhet </a></li> 
  <li><a href = "#" > Cilësimet </a></li> 
  <li><a href = "#" > Kontaktoni </a></li> 
</ul>

• Shtëpi
• Profili
• Mesazhet
• Cilësimet
• Kontaktoni

<ul class = "pilula" > 
  <li class = "active" ><a href = "#" > Faqja kryesore </a></li>  
  <li><a href = "#" > Profili </a></li> 
  <li><a href = "#" > Mesazhet </a></li> 
  <li><a href = "#" > Cilësimet </a></li> 
  <li><a href = "#" > Kontaktoni </a></li> 
</ul>

Faqezim

Faqezim ultra të thjeshtuar dhe me stil minimal të frymëzuar nga Rdio. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.

<div class = "faqezim" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← E mëparshme </a></li>  
    <li class = "aktiv" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Tjetra → </a></li>  
  </ul>
</div>

Sinjalizime bazë

div.alert-message

Mesazhe me një linjë për të theksuar dështimin, dështimin e mundshëm ose suksesin e një veprimi. Veçanërisht i dobishëm për format.

Blloko mesazhet

div.alert-message.block-message

Për mesazhet që kërkojnë pak shpjegim, ne kemi sinjalizime për stilin e paragrafit. Këto janë perfekte për të krijuar mesazhe më të gjata gabimi, për të paralajmëruar një përdorues për një veprim në pritje ose thjesht për të paraqitur informacione për më shumë theksim në faqe.

Modalet

Modalet - dialogët ose kutitë e lehta - janë të shkëlqyera për veprimet kontekstuale në situata ku është e rëndësishme që të ruhet konteksti i sfondit.

Këshilla për mjetet

Twipsies janë shumë të dobishme për të ndihmuar një përdorues të hutuar dhe për t'i drejtuar ata në drejtimin e duhur.

Popovers

Përdorni popovers për të ofruar informacion nëntekstual në një faqe pa ndikuar në paraqitjen.

Bootstrap u ndërtua me Preboot , një paketë miksash dhe variablash me burim të hapur që do të përdoret në lidhje me Less , një paraprocesor CSS për zhvillim më të shpejtë dhe më të lehtë të uebit.

Shikoni se si kemi përdorur Preboot në Bootstrap dhe si mund ta përdorni nëse zgjidhni të ekzekutoni Less në projektin tuaj të ardhshëm.

Si ta përdorni

Përdoreni këtë opsion për të shfrytëzuar plotësisht variablat Less të Bootstrap, mixins dhe folenë në CSS nëpërmjet javascript në shfletuesin tuaj.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "të gjitha" />    
<script src = "js/less-1.1.3.min.js" </script> 

Nuk e ndjeni zgjidhjen .js? Provoni aplikacionin Less Mac ose përdorni Node.js për të përpiluar kur vendosni kodin tuaj.

Çfarë përfshihet

Këtu janë disa nga pikat kryesore të asaj që përfshihet në Twitter Bootstrap si pjesë e Bootstrap. Drejtohuni në faqen e internetit të Bootstrap ose faqen e projektit Github për të shkarkuar dhe mësuar më shumë.

Variablat

Variablat në Less janë perfekte për të mirëmbajtur dhe përditësuar CSS tuaj pa dhimbje koke. Kur dëshironi të ndryshoni një vlerë ngjyre ose një vlerë të përdorur shpesh, përditësoni atë në një vend dhe jeni gati.

// Lidhjet
@linkColor : #8b59c2;         
@linkColorHover :     errësohet ( @linkColor , 10 ); 
 
// Gri
@zezë : #000;             
@gryDark :           ndriçoj ( @e zezë , 25 %); 
@gri :               ndriçoj ( @e zezë , 50 %); 
@gryLight :          ndriçoj ( @e zezë , 70 %); 
@grayLighter :        ndriçoj ( @e zezë , 90 %); 
@bardhë : #fff ;             
 
// Ngjyrat e theksit
@blu : #08b5fb;              
@gjelbër : #46a546 ;             
@red : #9d261d;               
@verdhë : #ffc40d ;            
@portokalli : #f89406;            
@rozë : #c3325f ;              
@vjollcë : #7a43b6 ;            
 
// Rrjeti bazë
@basefont : 13px ;          
@baseline : 18px ;          

Duke komentuar

Less ofron gjithashtu një stil tjetër komentimi përveç /* ... */sintaksës normale të CSS.

// Ky është një koment
/* Edhe ky eshte nje koment */

Përzihet wazoo

Përzierjet në thelb janë të përfshira ose të pjesshme për CSS, duke ju lejuar të kombinoni një bllok kodi në një. Ato janë të shkëlqyera për vetitë e prefiksuara nga shitësi, si box-shadowp.sh. Më poshtë është një mostër e mikseve që përfshihen me Bootstrap.

Raftet e shkronjave

#font {
  . stenografi ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
madhësia e     shkronjave : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @pesha : normale , @madhësia : 14 px , @line Lartësia : 20 px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
madhësia e     shkronjave : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @pesha : normale , @madhësia : 14 px , @line Lartësia : 20 px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
madhësia e     shkronjave : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - familja : "Monaco" , Courier New , monospace ;   
madhësia e     shkronjave : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
}

Gradientët

#gradient {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@startColor, @endColor); // The standard
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    ...
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    ...
  }
}

Operations and grid system

Get fancy and perform some math to generate flexible and powerful mixins like the one below.

// Griditude
@gridColumns:       16;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;
@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
// Grid System
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}