Sajarah

Dina dinten-dinten awal Twitter, insinyur ngagunakeun ampir perpustakaan anu aranjeunna wawuh pikeun nyumponan syarat-syarat hareup. Bootstrap dimimitian salaku jawaban kana tangtangan anu ditepikeun sareng pamekaran gancang gancang nalika Hackweek munggaran Twitter.

Kalayan bantosan sareng eupan balik ti seueur insinyur di Twitter, Bootstrap parantos ningkat sacara signifikan pikeun nyertakeun henteu ngan ukur gaya dasar, tapi ogé pola desain hareup anu langkung elegan sareng awét.

Maca deui dina dev.twitter.com ›

Rojongan browser

Bootstrap diuji sareng dirojong dina browser modern utama sapertos Chrome, Safari, Internet Explorer, sareng Firefox.

• Safari panganyarna
• Panganyarna Google Chrome
• Firefox 4+
• Internet Explorer 7+

Naon kaasup

Bootstrap kumplit sareng kompilasi CSS, uncompiled, sareng conto template.

• Sadaya file .less asli
• Pinuh disusun jeung minified CSS
• Dokuméntasi styleguide lengkep
• Conto template halaman (langkung seueur anu bakal datang)

Grid standar

Sistem grid standar anu disayogikeun salaku bagian tina Bootstrap nyaéta grid 16-kolom lega 940px. Éta rasa tina sistem grid 960 populér, tapi tanpa margin tambahan / padding di sisi kénca sareng katuhu.

Contona grid markup

Sapertos anu dipidangkeun di dieu, tata perenah dasar tiasa didamel ku dua "kolom," masing-masing ngalangkungan sajumlah 16 kolom dasar anu kami definisikeun salaku bagian tina sistem grid kami. Tempo conto di handap pikeun leuwih variasi.

<div class="baris"> kelas = "baris" >
  <div class = "span6 kolom" > 
    ...
  </div>
  <div class = "span10 kolom" > 
    ...
  </div>
</div>

perenah maneuh

A dasar 940px lega, perenah wadahna dipuseurkeun pikeun ngan ngeunaan sagala situs atawa kaca.

<awak>
  <div class = "wadah" > 
    ...
  </div>
</awak>

Susunan cairan

Struktur halaman cairan atanapi cair anu fleksibel kalayan lebar min- sareng maksimal sareng sidebar kénca. Gede pikeun aplikasi.

<awak>
  <div class = "wadah-cairan" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "eusi" > 
      ...
    </div>
  </div>
</awak>

Judul sareng salinan

Hierarki tipografi standar pikeun nyusun halaman wéb anjeun.

h1. Judul 1

h2. Judul 2

h3. Judul 3

h4. Judul 4

h5. Judul 5

h6. Judul 6

Conto paragraf

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

Conto judul Mibanda subjudul…

Misc. elemen

Ngagunakeun tekenan, alamat, & singketan

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

Nalika ngagunakeun

Tag emphasis ( <strong>jeung <em>) kudu dipaké pikeun nunjukkeun pentingna tambahan atawa tekenan hiji kecap atawa frasa relatif ka salinan sabudeureun na. Anggo <strong>pikeun pentingna sareng <em>pikeun tekenan setrés .

Tekenan dina hiji 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, a pharetra augue.

Catetan: Ieu masih oke ngagunakeun <b>sarta <i>tag dina HTML5, tapi maranéhna teu datang jeung gaya alamiah deui. <b>dimaksudkeun pikeun nyorot kecap atawa frasa tanpa nepikeun pentingna tambahan, sedengkeun <i>lolobana pikeun sora, istilah teknis, jsb.

Alamat

Unsur <address>dipaké pikeun informasi kontak pikeun karuhun pangcaketna, atawa sakabéh awak gawé. Ieu kumaha katingalina:

Twitter, Nyarita
795 Folsom Ave, Suite 600
San Fransisco, CA 94107
P: (123) 456-7890

Catetan: Unggal garis dina hiji <address>kudu ditungtungan ku garis-break ( <br />) atawa dibungkus dina tag blok-tingkat (misalna, <p>) mun leres struktur eusi.

Singgetan

Pikeun singketan sareng akronim, paké <abbr>tag ( <acronym>dileungitkeun dina HTML5 ). Nempatkeun formulir shorthand dina tag tur nyetel judul pikeun ngaran lengkep.

Blockquotes

<blockquote> <p> <small>

Kumaha ngadugikeun

Pikeun ngalebetkeun kutipan blok , bungkus <blockquote>sareng tag. Anggo elemen pikeun nyebatkeun sumber anjeun sareng anjeun bakal nampi dash sateuacanna.<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

Teu diurut<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem jeung massa
• Facilisis di 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
• Aenean diuk amet erat nunc
• Eget porttitor lorem

Teu gaya<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem jeung massa
• Facilisis di 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
• Aenean diuk amet erat nunc
• Eget porttitor lorem

Dititah<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem jeung massa
4. Facilisis di pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean diuk amet erat nunc
8. Eget porttitor lorem

Katerangandl

Daptar pedaran

Daptar pedaran sampurna pikeun nangtukeun istilah.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ngawangun méja

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

Méja anu saé-pikeun seueur hal. Méja hébat, kumaha oge, peryogi sakedik markup cinta janten mangpaat, scalable, sareng tiasa dibaca (dina tingkat kode). Ieu sababaraha tip pikeun ngabantosan.

Salawasna bungkus header kolom anjeun dina <thead>hirarki sapertos anu <thead>> <tr>> <th>.

Sarupa jeung lulugu kolom, sakabeh eusi awak tabel anjeun kudu dibungkus dina <tbody>jadi hirarki anjeun <tbody>> <tr>> <td>.

Conto: Gaya tabel standar

Sadaya tabel bakal ditata sacara otomatis kalayan ngan ukur wates anu penting pikeun mastikeun kabaca sareng ngajaga struktur. Henteu kedah nambihan kelas atanapi atribut tambahan.

#	Nami payun	Nami pengker	Basa
1	Sababaraha	Hiji	Inggris
2	Joe	Sixpack	Inggris
3	Stu	Lentong	Kodeu

<table class="common-table"> class = "méja umum" >
  ...
</tabel>

Contona: belang zebra

Kéngingkeun sakedik méja anjeun ku nambihan zebra-striping-ngan tambahkeun .zebra-stripedkelasna.

#	Nami payun	Nami pengker	Basa
1	Sababaraha	Hiji	Inggris
2	Joe	Sixpack	Inggris
3	Stu	Lentong	Kodeu

Catetan: Zebra-striping mangrupikeun paningkatan progresif anu henteu sayogi pikeun browser anu langkung lami sapertos IE8 sareng di handap.

<table class="common-table zebra-striped"> class = "umum-méja zebra-belang" >
...
</tabel>

Conto: Zebra-belang w/ TableSorter.js

Nyandak conto samemehna, urang ningkatkeun mangpaat tabel kami ku nyadiakeun fungsionalitas asihan via jQuery jeung plugin Tablesorter . Klik lulugu kolom mana wae pikeun ngarobah nurun.

#	Nami payun	Nami pengker	Basa
1	Anjeun	Hiji	Inggris
2	Joe	Sixpack	Inggris
3	Stu	Lentong	Kodeu

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( fungsi () { 
    $ ( "tabél#sortTableConto" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "umum-méja zebra-belang" > 
  ...
</tabel>

Gaya standar

Sadaya bentuk dipasihan gaya standar pikeun nampilkeunana dina cara anu tiasa dibaca sareng tiasa skala. Gaya disayogikeun pikeun input téks, pilih daptar, daérah téks, tombol radio sareng kotak centang, sareng tombol.

Conto wangun legenda

X-Input badag

Pilih

1 2 3 4 5

Pilih

1 2 3 4 5

Input Uneditable

Sababaraha Nilai Ieuh

Input ditumpurkeun

X-Input badag

snippet leutik téks pitulung

Conto wangun legenda

Téks anu Dipasang

@

Kotak centang anu dianteurkeun

Kotak centang ditambahkeun

Input File

Conto wangun legenda

Daptar Pilihan

• Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
• Pilihan dua ogé tiasa dipariksa sareng kalebet dina hasil formulir
• Pilihan tilu tiasa-enya, anjeun ditebak-ogé dipariksa sareng kalebet dina hasil formulir
• Pilihan opat teu tiasa dipariksa sabab ditumpurkeun.

Catetan: Labél ngurilingan sadaya pilihan pikeun daérah klik anu langkung ageung sareng bentuk anu langkung tiasa dianggo.

Rentang Tanggal

ka Sadaya waktos ditampilkeun salaku Waktos Standar Pasifik (GMT -08:00).

Textarea

Blok téks pitulung pikeun ngajelaskeun widang di luhur upami diperyogikeun.

Daptar Pilihan

• Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
• Pilihan dua ogé tiasa dipariksa sareng kalebet dina hasil formulir

Simpen Parobahan  Ngabolaykeun

Bentuk tumpuk

Tambahkeun .form-stackedka HTML formulir anjeun sarta anjeun bakal boga labél dina luhureun widang maranéhanana tinimbang ka kénca maranéhanana. Ieu tiasa dianggo saé upami formulir anjeun pondok atanapi anjeun gaduh dua kolom input pikeun bentuk anu langkung beurat.

Conto wangun legenda

X-Input badag

Pilih

1 2 3 4 5

Conto wangun legenda

X-Input badag

snippet leutik téks pitulung

Daptar Pilihan

• Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
• Pilihan dua ogé tiasa dipariksa sareng kalebet dina hasil formulir

Catetan: Labél ngurilingan sadaya pilihan pikeun daérah klik anu langkung ageung sareng bentuk anu langkung tiasa dianggo.

Simpen Parobahan  Ngabolaykeun

Kancing

Salaku konvénsi a, tombol dipaké pikeun lampah bari Tumbu dipaké pikeun objék. Salaku conto, "Unduh" tiasa janten tombol sareng "aktivitas panganyarna" tiasa janten tautan.

Sadaya tombol standar kana gaya kulawu lampu, tapi aya .primarykelas biru. Tambih Deui, rolling gaya Anjeun sorangan gampang peasy.

Conto tombol

Gaya tombol tiasa diterapkeun kana naon waé anu .btnditerapkeun. Biasana anjeun badé nerapkeun ieu ngan ukur <a>, <button>, sareng pilih <input>elemen. Ieu kumaha katingalina:

Ukuran alternatip

Fancy tombol gedé atawa leutik? Kudu di dinya!

kaayaan ditumpurkeun

Pikeun tombol nu teu aktip atawa ditumpurkeun ku aplikasi pikeun hiji alesan atawa sejen, make kaayaan ditumpurkeun. Éta .disabledpikeun tautan sareng :disabledpikeun <button>elemen.

Tumbu

Kancing

Anu mana

Topbar kami mangrupikeun bar tetep anu ngagaduhan logo atanapi nami halaman wéb, navigasi primér, sareng bentuk milarian.

Bisa disaluyukeun

Kabéh elemen dina, sarta sakabéh topbar ogé, mangrupa pilihan. Anjeun tiasa milih ngalebetkeun logo/nami, nav, milarian, sareng nav sekundér-atanapi kombinasi naon waé.

Dropdowns kaasup

Salaku bagian tina navigasi utama, kami geus kaasup kamampuhan pikeun anjeun pikeun nambahkeun dropdowns mun nav Anjeun. Pariksa nav sekundér luhur (Blok katuhu) pikeun katingal kumaha eta tos rengse.

Tab jeung pil

Jieun navigasi sekundér basajan kalawan <ul>. Swap antara tab atawa pil ku nambahkeun kelas luyu.

Saé pikeun sub-bagian eusi sapertos halaman setélan akun kami sareng garis waktos pangguna pikeun togling antara halaman eusi anu sami. Sadia dina gaya tabbed atanapi pil.

• Imah
• Propil
• Talatah
• Setélan
• Kontak

<ul class="tabs"> class = "tab" >
  <li class = "aktif" ><a href = "#" > Imah </a></li>  
  <li><a href = "#" > Propil </a></li> 
  <li><a href = "#" > Talatah </a></li> 
  <li><a href = "#" > Setélan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

• Imah
• Propil
• Talatah
• Setélan
• Kontak

<ul class="pil"> kelas = "pil" >
  <li class = "aktif" ><a href = "#" > Imah </a></li>  
  <li><a href = "#" > Propil </a></li> 
  <li><a href = "#" > Talatah </a></li> 
  <li><a href = "#" > Setélan </a></li> 
  <li><a href = "#" > Kontak </a></li> 
</ul>

Pagination

pagination ultra saderhana sareng gaya minimal anu diideuan ku Rdio. Blok badag hésé sono, gampang scalable, sarta nyadiakeun wewengkon klik badag.

<div class="pagination"> class = "pagination" >
  <ul>
    <li class = "prev ditumpurkeun" ><a href = "#"> & larr ; saméméhna </a></li>  
    <li class = "aktif" ><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 = "salajengna" ><a href = "#" > salajengna & rarr; </a></li>  
  </ul>
</div>

Panggeuing dasar

Pesen hiji-garis pikeun nyorot kagagalan, kamungkinan kagagalan, atanapi kasuksésan tindakan. Utamana mangpaat pikeun formulir.

Meungpeuk pesen

Pikeun pesen anu peryogi sakedik katerangan, kami gaduh panggeuing gaya paragraf. Ieu sampurna pikeun ngagedekeun pesen kasalahan anu langkung panjang, ngingetkeun pangguna ngeunaan tindakan anu ditangguhkeun, atanapi ngan ukur nunjukkeun inpormasi pikeun langkung tekenan kana halaman éta.

Modal

Modals—dialog atawa lightboxes—saé pisan pikeun tindakan kontekstual dina situasi anu penting pikeun ngajaga kontéks latar.

Tips Alat

Twipsies super mangpaat pikeun ngabantosan pangguna anu bingung sareng ngarahkeunana ka arah anu leres.

Popovers

Anggo popovers pikeun masihan inpormasi subtekstual ka halaman tanpa mangaruhan perenah.

Bootstrap diwangun ku Preboot , hiji pak open-source tina mixins jeung variabel pikeun dipaké babarengan jeung Kurang , a preprocessor CSS pikeun ngembangkeun web gancang sarta gampang.

Parios kumaha kami nganggo Preboot di Bootstrap sareng kumaha anjeun tiasa ngamangpaatkeunana upami anjeun milih ngajalankeun Kurang dina proyék anjeun salajengna.

Kumaha ngagunakeunana

Anggo pilihan ieu pikeun ngamangpaatkeun pinuh ku Bootstrap's Less variables, mixins, and nesting in CSS via javascript in your browser.

<link rel="stylesheet/less" href="less/bootstrap.less" media="sadayana" /> rel = "stylesheet / kirang" href = "kirang / bootstrap.less" media = "sadayana" />   
<script src = "js/less-1.0.41.min.js" ></script> 

Teu ngarasa solusi .js? Coba aplikasi Less Mac atawa pake Node.js pikeun ngumpulkeun nalika anjeun nyebarkeun kode anjeun.

Naon kaasup

Ieu sababaraha sorotan naon anu kalebet dina Twitter Bootstrap salaku bagian tina Bootstrap. Lebetkeun kana halaman wéb Bootstrap atanapi halaman proyék Github pikeun ngaunduh sareng diajar langkung seueur.

Variabel warna

Variabel dina Kurang sampurna pikeun ngajaga sareng ngapdet CSS anjeun gratis. Nalika anjeun hoyong ngarobih nilai warna atanapi nilai anu sering dianggo, perbarui dina hiji tempat sareng anjeun parantos nyetél.

// Tumbu
@linkColor : #8b59c2;         
@linkColorHover :     poekeun ( @linkColor , 10 ); 
// Grays
@hideung : #000;             
@grayDark :           lighten ( @hideung , 25 %); 
@abu :               lighten ( @hideung , 50 %); 
@grayLight :          lighten ( @hideung , 70 %); 
@grayLighter :        lighten ( @hideung , 90 %); 
@bodas : #fff;             
// Warna aksen
@biru : #08b5fb;              
@héjo : #46a546;             
@beureum : #9d261d;               
@konéng : #ffc40d;            
@jeruk : #f89406;            
@pink : #c3325f;              
@ungu : #7a43b6;            
// Dasar
@dasar : 20px ;          

Ngoméntaran

Kurang ogé nyadiakeun gaya sejen commenting salian /* ... */sintaksis normal CSS urang.

// Ieu komentar
/* Ieu ogé komentar */

Nyampurkeun wazoo

Campuran dasarna kalebet atanapi sawaréh pikeun CSS, ngamungkinkeun anjeun ngagabungkeun blok kode kana hiji. Éta saé pikeun pasipatan awalan vendor sapertos box-shadow, gradién cross-browser, tumpukan font, sareng seueur deui. Di handap ieu conto tina mixins anu kaasup kana Bootstrap.

tumpukan font

#font {
  . singgetan ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {     
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
  . sans - serif ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {     
    font - kulawarga : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
  . serif ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {     
    font - kulawarga : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
  . monospace ( @beurat : normal , @ukuran : 12px , @lineHeight : 20px ) {     
    font - kulawarga : "Monaco" , Kurir Anyar , monospace ;   
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
}

Gradién

#gradién {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    latar - warna : @endColor ; 
    tukang - ulang : ulang - x ;
    tukang - gambar : - khtml - gradién ( linier , kénca luhur , katuhu luhur , ti ( @startColor ), ka ( @endColor )); // Konqueror   
    tukang - gambar : - moz - linier - gradién ( kénca , @startColor , @endColor ); // FF 3.6+    
    tukang - gambar : - ms - linier - gradién ( kénca , @startColor , @endColor ); // IE10    
    tukang - gambar : - webkit - gradién ( linier , kénca luhur , katuhu luhur , warna - eureun ( 0 %, @startColor ), warna - eureun ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tukang - gambar : - webkit - linier - gradién ( kénca , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    tukang - gambar : - o - linier - gradién ( kénca , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d',endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    saringan : e (%( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7 
    tukang - gambar : linier - gradién ( kénca , @startColor , @endColor ); // Le standar   
  }
  . nangtung ( @startColor : #555, @endColor: #333) { 
    latar - warna : @endColor ; 
    tukang - ulang : ulang - x ;
    tukang - gambar : - khtml - gradién ( linier , kénca luhur , kénca handap , ti ( @startColor ), ka ( @endColor )); // Konqueror   
    tukang - gambar : - moz - linier - gradién ( @startColor , @endColor ); // FF 3.6+   
    tukang - gambar : - ms - linier - gradién ( @startColor , @endColor ); // IE10   
    tukang - gambar : - webkit - gradién ( linier , kénca luhur , kénca handap , warna - eureun ( 0 %, @startColor ), warna - eureun ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tukang - gambar : - webkit - linier - gradién ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    tukang - gambar : - o - linier - gradién ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d',endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor )); // IE6 & IE7 
    tukang - gambar : linier - gradién ( @startColor , @endColor ); // Standar  
  }
  . arah ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . nangtung - tilu - kelir ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operasi sareng sistem grid

Kéngingkeun sareng laksanakeun sababaraha matematika pikeun ngahasilkeun campuran anu fleksibel sareng kuat sapertos anu di handap ieu.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistim grid
. wadah {
  lebar : @siteWidth ; 
  margin : 0 otomatis ;  
  . clearfix ();
}
. kolom ( @columnSpan : 1 ) {  
  tampilan : inline ; 
  ngambang : ditinggalkeun ;
  rubak : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - kénca : @gridGutterWidth ; 
  &: kahiji - anak {
    margin - kénca : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - kénca : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! penting ;          
}