Istri

Insay di fɔs tɛm we dɛn bin de yuz twita, injinia dɛn bin de yuz ɔlmost ɛni laybri we dɛn sabi fɔ mit di tin dɛn we dɛn nid fɔ du na di frɔnt ɛnd. Bootstrap bigin as ansa to di chalenj dɛm we prɛzɛnt ɛn divɛlɔpmɛnt kwik kwik wan aksɛleret di tɛm we twita in fɔs Hackweek.

Wit di ɛp ɛn fidbak we bɔku injinia dɛn na twita dɔn gi, Bootstrap dɔn gro bad bad wan fɔ kɔba nɔto jɔs di bɛsik stayl dɛn, bɔt mɔ elegant ɛn durable frɔnt-ɛnd dizayn patɛn dɛn.

Rid mɔ na dev.twitter.com ›

Brawza sɔpɔt

Dɛn dɔn tɛst ɛn sɔpɔt Bootstrap na big big brɔuza dɛn we de naw lɛk Chrome, Safari, Intanɛt Ɛksplɔrɔ, ɛn Fayafaks.

• Latest Safari fɔ di wan dɛn we de wok
• Di laytst Google Chrome
• Fayafaks 4+
• Intanɛt Ɛksplɔrɔ 7+

Wetin de insay

Bootstrap kam kɔmplit wit kɔmpilayt CSS, nɔ kɔmpilayt, ɛn ɛgzampul tɛmplat dɛn.

• Ɔl di ɔrijinal .less fayl dɛn
• Ful kɔmpilayt ɛn minifyed CSS
• Komplit staylgayd dɔkyumentri
• Ɛgzampul pej tɛmplat (mɔ go kam jisnɔ)

Difɔlt grid we dɛn dɔn mek

Di difɔlt grid sistem we dɛn gi as pat pan Bootstrap na 940px waid 16-kɔlɔm grid. Na wan flawa fɔ di pɔpul 960 grid sistɛm, bɔt we nɔ gɛt di ɔda margin/padding na di lɛft ɛn rayt sayd.

Ɛgzampul fɔ mek di grid mak

As wi sho ya, dɛn kin mek wan besik layout wit tu "kɔlɔm dɛn," ɛni wan pan dɛn de span wan nɔmba pan di 16 fawndeshɔn kɔlɔm dɛn we wi bin dɔn difayn as pat pan wi grid sistɛm. Si di ɛgzampul dɛn we de dɔŋ fɔ si mɔ difrɛn tin dɛn.

<div klas="rɔw"> klas = "rɔw" >
  <div klas = "span6 kɔlɔm dɛn" > 
    ...
  </div> fɔ di wan dɛn we de
  <div klas = "span10 kɔlɔm dɛn" > 
    ...
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Fiks layout we dɛn dɔn mek

Wan besik 940px waid, sɛntrɛd kɔntena layout fɔ jɔs lɛk ɛni sayt ɔ pej.

<bɔdi>
  <div klas = "kɔntena" > 
    ...
  </div> fɔ di wan dɛn we de
</bɔdi>

Fluid layout fɔ mek tin dɛn

Wan fleksibul fluid ɔ likwid pej strɔkchɔ wit min- ɛn maks-wid ɛn wan lɛft-an saydbar. Gret fɔ ap dɛn.

<bɔdi>
  <div klas = "kɔntena-fluid" > 
    <div klas = "saydbar" > 
      ...
    </div> fɔ di wan dɛn we de
    <div klas = "kɔntinɛnt" > 
      ...
    </div> fɔ di wan dɛn we de
  </div> fɔ di wan dɛn we de
</bɔdi>

Di edlayn dɛn ɛn kɔpi

Wan standad taypografik hayari fɔ strɔkchɔ yu wɛb pej dɛn.

h1. Di edlayn 1

h2. Di edlayn 2

h3. Di edlayn 3

h4. Di edlayn 4

h5. Di edlayn 5

h6. Di edlayn 6

Ɛgzampul paregraf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ɛn magnis dis we de bɔn pikin, nascetur ridiculus mus. Nullam id dolor id nibh ultrisis vehikula ut id elit.

Ɛgzampul edlayn I gɛt sɔb-hɛdin...

Difrɛn difrɛn tin dɛn. di ɛlimɛnt dɛn

Yuz ɛmpɛshimɛnt, adrɛs, & abbrevieshɔn

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

Ustɛm fɔ yuz am

Dɛn fɔ yuz ɛmpɛshimɛnt tɛg dɛn ( <strong>ɛn <em>) fɔ sho ɔda impɔtant ɔ ɛmpɛshmɛnt fɔ wan wɔd ɔ frɛz we yu kɔmpia am wit di kɔpi we de rawnd am. Yuz <strong>fɔ impɔtant ɛn <em>fɔ strɛs ɛmpɛshmɛnt.

Di tin dɛn we dɛn tɔk mɔ bɔt na wan paregraf

Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimentum nibh , ut fεmεnt massa jכst sit amet risus. Maecenas faucibus mollis we de na di wɔl. Nulla vitae elit libero, we na wan pharetra augu.

Notis: I stil okay fɔ yuz <b>ɛn <i>tag dɛn na HTML5, bɔt dɛn nɔ de kam wit inhɛrɛnt stayl dɛn igen. <b>na fɔ aylayt wɔd ɔ frɛz dɛn we nɔ de gi ɔda impɔtant tin dɛn, we <i>na fɔ vɔys, tɛknikal wɔd dɛn, ɛn ɔda tin dɛn.

Adrɛs dɛn

Di <address>elemɛnt de yuz fɔ kɔntakt infɔmeshɔn fɔ in gret gret granpa we de nia am, ɔ di wan ol bɔdi fɔ wok. Na so i luk:

Notis: Ɛni layn na wan <address>fɔ dɔn wit layn-brɛk ( <br />) ɔ dɛn fɔ rap am wit blɔk-lɛvel tɛg (ɛgz., <p>) fɔ mek i ebul fɔ strɔkchɔ di tin dɛn we de insay fayn fayn wan.

Di tin dɛn we dɛn kin yuz fɔ shɔt

Fɔ shɔt ɛn akɔdin, yuz di <abbr>tɛg ( <acronym>dɛn nɔ de yuz am na HTML5 ). Put di shɔthand fɔm insay di tag ɛn sɛt wan taytul fɔ di kɔmplit nem.

Blɔkkɔt dɛn

<blockquote> <p> <small>

Aw fɔ kot

Fɔ put wan blɔkkɔt, rap <blockquote>rawnd <p>ɛn <small>tag dɛn. Yuz di <small>element fo cite yu source en yu go geht wan em dash —bifo am.

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante venenatis dapibus posuere velit alikɛt.

Dɔktɔ Juliɔs Hibɛt

Nɔ ɔda ɔda tin dɛn<ul>

• Lorem ipsum dolor sidon amet
• Konsectetur adipiscing elit we de na di bɔdi
• Integer molestie lorem na massa
• Fasilisis in prɛtiɔm nisl alikɛt
• Nulla volutpat alikɔm velit
  • Fasɛl iakulis nɛk
  • Purus sodales di wan dɛn we de bɔn
  • Vestibulum laoreet pɔtitɔr sem
  • A tristik libero volutpat na
• Faucibus porta lakɔs fringila vel
• Aenean sidon amet erat nunc
• Eget porttitor lorem we yu de du

Nɔ stayl<ul.unstyled>

• Lorem ipsum dolor sidon amet
• Konsectetur adipiscing elit we de na di bɔdi
• Integer molestie lorem na massa
• Fasilisis in prɛtiɔm nisl alikɛt
• Nulla volutpat alikɔm velit
  • Fasɛl iakulis nɛk
  • Purus sodales di wan dɛn we de bɔn
  • Vestibulum laoreet pɔtitɔr sem
  • A tristik libero volutpat na
• Faucibus porta lakɔs fringila vel
• Aenean sidon amet erat nunc
• Eget porttitor lorem we yu de du

Dɛn dɔn ɔda am<ol>

1. Lorem ipsum dolor sidon amet
2. Konsectetur adipiscing elit we de na di bɔdi
3. Integer molestie lorem na massa
4. Fasilisis in prɛtiɔm nisl alikɛt
5. Nulla volutpat alikɔm velit
6. Faucibus porta lakɔs fringila vel
7. Aenean sidon amet erat nunc
8. Eget porttitor lorem we yu de du

Tɔk bɔtdl

Diskripshɔn list dɛn

Wan diskripshɔn list fayn fɔ difayn wɔd dɛn.

Yuismod bin de

Vestibulum id ligula porta felis yuismod semper eget lasinia odio sem nec elit.

Donec id elit non mi porta gravida na eget metus.

Malesuada we de na di wɔl

Etiam porta sem malesuada magna mollis yusmod.

Fɔ bil tebul dɛn

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

Tebul dɛn fayn—fɔ bɔku tin dɛn. Gret tebul dɛn, bɔt, nid smɔl mak-ap lɔv fɔ bi yusful, skel, ɛn rid (na di kɔd lɛvɛl). Na sɔm tin dɛn ya we go ɛp yu.

Ɔltɛm rap yu kɔlɔm hεda dɛn insay wan <thead>so dat di hayarki go bi <thead>> <tr>> <th>.

Semweso lɛk di kɔlɔm ɛda dɛn, ɔl di tin dɛn we de insay yu tebul fɔ rap insay wan <tbody>so yu hayari na <tbody>> <tr>> <td>.

Example: Difɔlt tebul stayl dɛn

Ɔl di tebul dɛn go ɔtomɛtik stayl wit di impɔtant bɔda dɛn nɔmɔ fɔ mek shɔ se dɛn ebul fɔ rid ɛn mek dɛn kɔntinyu fɔ gɛt di strɔkchɔ. Nɔ nid fɔ ad ɛkstra klas ɔ atribyut dɛn.

<tebul klas="kɔmɔn-tebul"> klas = "kɔmɔn-tebul" >
  ...
</tebul>

Fɔ ɛgzampul: Zɛbra-strip

Gɛt smɔl fansi wit yu tebul dɛn bay we yu ad zibra-strip—jɔs ad di .zebra-stripedklas.

Notis: Zebra-striping na wan prɔgrɛsiv ɛnhansmɛnt we nɔ de fɔ ol brawza dɛn lɛk IE8 ɛn dɔŋ ya.

<tebul klas = "kɔmɔn-tebul zibra-strip" > 
...
</tebul>

Example: Zɛbra-strip w/ TableSorter.js

We wi tek di ɛgzampul we wi bin dɔn tɔk bɔt, wi de mek wi tebul dɛn yusful bay we wi de gi sɔt funkshɔnaliti tru jQuery ɛn di Tablesorter plɔgin. Klik ɛni kɔlɔm in hεda fɔ chenj di sɔt.

<skript src = "js/jkwɛri/jkwɛri.tebulsɔrta.min.js" ></skript> 
<skript > 
  $ ( fɛnshɔn () { . 
    $ ( "tebul#sɔtTebulƐgzampul" ). tebulsɔrta ({ sɔrtList : [[ 1 , 0 ]] });  
  });
</skript> we de sho aw fɔ du dat
<tebul klas = "kɔmɔn-tebul zibra-strip" > 
  ...
</tebul>

Difɔlt stayl dɛn

Dɛn gi ɔl di fɔm dɛn difɔlt stayl dɛn fɔ prisent dɛn di we we pɔsin kin rid ɛn we pɔsin kin skel. Dɛn dɔn gi stayl dɛn fɔ put tɛks, list dɛn we dɛn dɔn pik, say dɛn fɔ tɛks, redio bɔtin dɛn ɛn chɛkbɔks dɛn, ɛn bɔtin dɛn.

Fɔm dɛn we dɛn dɔn stak

Ad .form-stackedto yu fɔm in HTML ɛn yu go gɛt lɛbl dɛn ɔp dɛn fil dɛn instead fɔ de na dɛn lɛft. Dis kin wok fayn if yu fɔm dɛn shɔt ɔ yu gɛt tu kɔlɔm dɛn fɔ input fɔ fɔm dɛn we ebi.

Bɔtin dɛn

As kɔnvɛnshɔn, dɛn kin yuz bɔtin fɔ akshɔn dɛn we dɛn kin yuz link fɔ tin dɛn. Fɔ ɛgzampul, "Dɔnlod" kin bi bɔtin ɛn "aktiviti we dɛn jɔs du" kin bi link.

Ɔl di bɔtin dɛn de fɔlt to layt grey stayl, bɔt blu .primaryklas de. Plus, rol yu own stail dem na easy peasy.

Ɛgzampul bɔtin dɛn

Bɔtin stayl dɛn kin aplay to ɛnitin wit di .btnaplay. Tipikli yu go want fɔ yuz dɛn tin ya fɔ jɔs <a>, <button>, ɛn pik <input>ɛlimɛnt dɛn. Na so i luk:

Alternate saiz dɛn fɔ yuz

Fans big ɔ smɔl bɔtin dɛn? Yu fɔ gɛt am!

Disabled stet

Fɔ di bɔtin dɛn we nɔ de wok ɔ we di ap dɔn disable fɔ wan rizin ɔ ɔda rizin, yuz di stet we nɔ de wok. Dat na .disabledfɔ link ɛn :disabledfɔ <button>ɛlimɛnt dɛn.

Links dɛn

Bɔtin dɛn

Wetin na am

Wi tɔpba na wan fiks ba we gɛt wɛbsayt in logo ɔ nem, di men say fɔ go, ɛn di fɔm fɔ fɛn di wɛbsayt.

Yu kin kɔstɔmayt am

Ɔl di ɛlimɛnt dɛn we de insay, ɛn di wan ol tɔpbar bak, na opshɔnal. Yu kin pik fɔ put logo/nem, nav, sɔch, ɛn sɛkɔndari nav—ɔ ɛni kɔmbaynshɔn fɔ dat.

Drɔpdɔwn dɛn inklud

As pat pan di men nevigishɔn, wi dɔn put di abiliti fɔ yu fɔ ad drɔpdɔwn dɛn to yu nav. Chek di sekond nav oba (rayt alayned) fo si aw dem du am.

Tab ɛn pils dɛn

Krio simpul sɛkɔndari nevigishɔn wit wan <ul>. Swap bitwin tab ɔ pils bay we yu ad di klas we fit.

Gret fɔ sab-sekshɔn dɛn fɔ kɔntinyu lɛk wi akɔn sɛtin pej dɛn ɛn yuz tɛmlayn fɔ chenj bitwin pej dɛn we gɛt lɛk kɔntinyu. I de insay tab ɔ pil stayl dɛn.

• Os
• Profayl
• Mɛsej dɛn
• Di sɛtin dɛn
• Kɔl

<ul klas = "tab dɛn" > 
  <li klas = "aktiv" ><a href = "#" > Os </a></li>  
  <li><a href = "#" > Di prɔfayl </a></li> 
  <li><a href = "#" > Mɛsej dɛn </a></li> 
  <li><a href = "#" > Sɛtin dɛn </a></li> 
  <li><a href = "#" > Kɔntakt </a></li> 
</ul> fɔ di wan dɛn we de

• Os
• Profayl
• Mɛsej dɛn
• Di sɛtin dɛn
• Kɔl

<ul klas = "pils" > 
  <li klas = "aktiv" ><a href = "#" > Os </a></li>  
  <li><a href = "#" > Di prɔfayl </a></li> 
  <li><a href = "#" > Mɛsej dɛn </a></li> 
  <li><a href = "#" > Sɛtin dɛn </a></li> 
  <li><a href = "#" > Kɔntakt </a></li> 
</ul> fɔ di wan dɛn we de

Pej dɛn we dɛn rayt

Ultra simplistik ɛn minimal stayl pejineshɔn we dɛn inspɛkt bay Rdio. Di big blɔk at fɔ mis, i izi fɔ skel, ɛn i de gi big say dɛn fɔ klik.

<div klas = "pejineshɔn" > 
  <ul> fɔ di wan dɛn we de
    <li klas = "fɔ disabled" ><a href = "#" > ← Di wan dɛn we bin dɔn de bifo </a></li>  
    <li klas = "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 klas = "nɛks" ><a href = "#" > Nɛks → </a></li> fɔ di wan dɛn we de  
  </ul> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Di bɛsis alɛt dɛn

Wan layn mɛsej fɔ sho di fayl, pɔsibul fɔlt, ɔ sakses fɔ wan akshɔn. I yus mɔ fɔ fɔm dɛn.

Blɔk mɛsej dɛn

Fɔ mɛsej dɛn we nid fɔ ɛksplen smɔl, wi gɛt paregraf stayl alɛt dɛn. Dɛn tin ya fayn fɔ bɔbul fɔ lɔng mistek mɛsej dɛn, fɔ wɔn pɔsin we de yuz am fɔ du sɔntin we nɔ de apin, ɔ fɔ jɔs prizent infɔmeshɔn fɔ mek dɛn tɔk mɔ bɔt di pej.

Modal dɛn we dɛn kin yuz

Modal—daylɔg ɔ laytbɔks—na fayn fɔ kɔntɛkstual akshɔn dɛn na sityueshɔn dɛn usay i impɔtant fɔ mek dɛn kip di bakgrɔn kɔntɛks.

Tips fɔ Tul dɛn

Twipsies na supa yusful fɔ ɛp wan kɔnfyus yuza ɛn pɔynt dɛn na di rayt dairekshɔn.

Popovers dɛn

Yuz popovers fɔ gi sɔbtɛks infɔmeshɔn to wan pej we nɔ afɛkt layout.

Bootstrap bin bil wit Preboot , wan opin-sɔs pak fɔ miksin ɛn vɛriɔbul dɛn we dɛn go yuz togɛda wit Less , wan CSS prɛprosɛsɔ fɔ mek wɛb divɛlɔpmɛnt fast ɛn izi.

Chek aw wi bin yuz Preboot na Bootstrap ɛn aw yu kin mek yus to am if yu pik fɔ rɔn Less pan yu nɛks prɔjek.

Aw fɔ yuz am

Yuz dis opshɔn fɔ mek ful yus to Bootstrap in Less vɛriɔbul dɛn, miksin dɛn, ɛn nɛst insay CSS tru javaskript na yu brɔwza.

<link rel = "staylshit/lɛs" href = "lɛs/bɔtstrap.lɛs" midia = "ɔl" />    
<skript src = "js/lɛs-1.0.41.min.js" ></skript> 

Yu nɔ de fil di .js sɔlvishɔn? Tray di Less Mac ap ɔ yuz Node.js fɔ kɔmpilayt we yu de diploy yu kɔd.

Wetin de insay

Na sɔm pan di aylayt dɛm fɔ wetin de insay Twitter Bootstrap as pat pan Bootstrap. Hed ova to di Bootstrap wɛbsayt ɔ Github projɛkt pej fɔ dawnlod ɛn lan mɔ.

Di tin dɛn we de chenj di kɔlɔ

Variables in Less na perfekt fɔ mentenɛt ɛn ɔpdet yu CSS ed-ak fri. We yu want fɔ chenj wan kɔlɔ valyu ɔ wan valyu we yu kin yuz bɔku tɛm, ɔpdet am na wan ples ɛn yu dɔn sɛt.

// Links dɛn
@linkKɔlɔ : #8b59c2 ɛn di wan dɛn we de wok;         
@linkKɔlɔHɔva :     dak ( @linkKɔlɔ , 10 ); 
 
// Greys dɛn
@blak : #000 fɔ di wan dɛn;             
@grayDark :           layt ( @blak , 25 %); 
@grey :               layt ( @blak , 50 %); 
@greyLight :          layt ( @blak , 70 %); 
@greyLighter :        layt ( @blak , 90 %); 
@wayt : #fff ɛn di wan dɛn we de;             
 
// Aksɛn Kɔlɔ dɛn
@blu : #08b5fb na wan wan wan wan;              
@grin : #46a546 fɔ di wan dɛn we de;             
@rɛd : # 9d261d;               
@yɔlɔ : #ffc40d;            
@ɔrɛnj : #f89406;            
@pink : #c3325f ɛn di wan dɛn we de;              
@papul : #7a43b6;            
 
// Beslayn fɔ di Baybul
@bayslayn : 20px ;          

Fɔ kɔmɛnt

Less de gi ɔda stayl bak fɔ kɔmɛnt apat frɔm di nɔmal /* ... */sɛntaks we CSS gɛt.

// Dis na kɔmɛnt
/* Dis na kɔmɛnt bak */

Mixins up di wazoo

Mixins na besik inklud ɔ pat fɔ CSS, we de alaw yu fɔ jɔyn wan blɔk fɔ kɔd insay wan. Dɛn fayn fɔ vendor prɛfiks prɔpati dɛn lɛk box-shadow, krɔs-brawza grɛdiɛnt, font stak, ɛn mɔ. Dis dɔŋ ya na wan ɛgzampul fɔ di miksin dɛn we de insay wit Bootstrap.

Font stak dɛn

#font na di font {
  . shɔthand ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {     
    font - sayz : @sayz ; 
    font - weit : @weit ; 
    layn - ayt : @laynAyt ; 
  } .
  . sans - serif ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {     
    font - famili : "Hɛlvɛtika Nyu" , Ɛlvɛtika , Arial , sans - sɛrif ;   
    font - sayz : @sayz ; 
    font - weit : @weit ; 
    layn - ayt : @laynAyt ; 
  } .
  . serif ( @weit : nɔmal , @sayz : 14px , @laynAyt : 20px ) {     
    font - famili : "Jɔjia" , Tayms Nyu Roman , Tayms , sans - serif ;     
    font - sayz : @sayz ; 
    font - weit : @weit ; 
    layn - ayt : @laynAyt ; 
  } .
  . monospace ( @weit : nɔmal , @sayz : 12px , @laynAyt : 20px ) {     
    font - famili : "Monako" , Kɔriɔ Nyu , wan spɛs ;   
    font - sayz : @sayz ; 
    font - weit : @weit ; 
    layn - ayt : @laynAyt ; 
  } .
} .

Grɛdiɛnt dɛn

#grɛdiɛnt { .
  . horizontal ( @startKɔlɔ : #555, @ɛndKɔlɔ: #333) { 
    bakgrɔn - kɔlɔ : @ɛndKɔlɔ ; 
    bakgrɔn - ripit : ripit - x ;
    bakgrɔn - imej : - khtml - gradient ( linya , lɛft ɔp , rayt ɔp , frɔm ( @startKɔlɔ ), to ( @ɛndKɔlɔ )); // Di pɔsin we de kɔndɔkt   
    bakgrɔn - imej : -moz - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // FF 3.6+ fɔ di wan dɛn we de    
    bakgrɔn - imej : -ms - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // IE10 fɔ di wan dɛn we de    
    bakgrɔn - imej : - wɛbkit - grɛdiɛnt ( linya , lɛft ɔp , rayt ɔp , kɔlɔ - stɔp ( 0 %, @startKɔlɔ ), kɔlɔ - stɔp ( 100 %, @ɛndKɔlɔ )); // Safari 4+, Krom 2+    
    bakgrɔn - imej : -wɛbkit - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // Safari 5.1+, Krom 10+    
    bakgrɔn - imej : -o - linya - gradient ( lɛft , @startKɔlɔ , @ ɛndKɔlɔ ); // Ɔpa 11.10    
    - ms - filta : %( "progid:DXImageTransform.Microsoft.gradient(startKɔlɔrstr='%d', ɛndKɔlɔrstr='%d', GrɛdiɛntTayp=1)" , @startKɔlɔ , @ɛndKɔlɔ ); // IE8+ fɔ di wan dɛn we de  
    filta : e (%( "progid:DXImageTransform.Microsoft.gradient(startKɔlɔrstr='%d', ɛndKɔlɔrstr='%d', GrɛdiɛntTayp=1)" , @startKɔlɔ , @ɛndKɔlɔ )); // IE6 ɛn IE7 
    bakgrɔn - imej : linya - gradient ( lɛft , @startKɔlɔ , @ɛndKɔlɔ ); // Le standad   
  } .
  . vertikal ( @startKɔlɔ : #555, @ɛndKɔlɔ: #333) { 
    bakgrɔn - kɔlɔ : @ɛndKɔlɔ ; 
    bakgrɔn - ripit : ripit - x ;
    bakgrɔn - imej : - khtml - gradient ( linya , lɛft ɔp , lɛft dɔŋ , frɔm ( @startKɔlɔ ), to ( @ɛndKɔlɔ )); // Di pɔsin we de kɔndɔkt   
    bakgrɔn - imej : -moz - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // FF 3.6+ fɔ di wan dɛn we de   
    bakgrɔn - imej : -ms - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // IE10 fɔ di wan dɛn we de   
    bakgrɔn - imej : - wɛbkit - grɛdiɛnt ( linya , lɛft ɔp , lɛft bɔt , kɔlɔ - stɔp ( 0 %, @startKɔlɔ ), kɔlɔ - stɔp ( 100 %, @ɛndKɔlɔ )); // Safari 4+, Krom 2+    
    bakgrɔn - imej : -wɛbkit - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // Safari 5.1+, Krom 10+   
    bakgrɔn - imej : -o - linya - gradient ( @startKɔlɔ , @ ɛndKɔlɔ ); // Ɔpa 11.10   
    - ms - filta : %( "progid:DXImageTransform.Microsoft.gradient(startKɔlɔrstr='%d', ɛndKɔlɔrstr='%d', GrɛdiɛntTayp=0)" , @startKɔlɔ , @ɛndKɔlɔ ); // IE8+ fɔ di wan dɛn we de  
    filta : e (%( "progid:DXImageTransform.Microsoft.gradient(startKɔlɔrstr='%d', ɛndKɔlɔrstr='%d', GrɛdiɛntTayp=0)" , @startKɔlɔ , @ɛndKɔlɔ )); // IE6 ɛn IE7 
    bakgrɔn - imej : linya - gradient ( @startKɔlɔ , @ɛndKɔlɔ ); // Di standad  
  } .
  . dairekshɔn ( @startKɔlɔ : #555, @ɛndKɔlɔ: #333, @deg: 45deg) { 
    ...
  } .
  . vertikal - tri - kɔlɔ dɛn ( @startKɔlɔ : #00b3ee, @midKɔlɔ: #7a43b6, @kɔlɔStɔp: 0.5, @ɛndKɔlɔ: #c3325f) { 
    ...
  } .
} .

Opareshɔn ɛn grid sistem

Gɛt fansi ɛn du sɔm mats fɔ jenarayz fleksibul ɛn pawaful miksin dɛn lɛk di wan we de dɔŋ ya.

// Griditude fɔ di wan dɛn we de
@gridKɔlɔm dɛn : 16 ;       
@gridKɔlɔmWid : 40px ;   
@gridGɔtaWid : 20px ;   
 
// Sistem fɔ Grid
. kɔntena { .
  wit : @saytWidth ; 
  margin : 0 ɔto ;  
  . kliafiks ();
} .
. kɔlɔm dɛn ( @kolomSpan : 1 ) {  
  displei : inlayn ; 
  flot : na di lɛft ;
  width : ( @gridKɔlɔmWid * @kɔlɔmSpan ) + ( @gridGɔtaWid * ( @kɔlɔmSpan - 1 ));         
  margin - lɛf : @gridGɔtaWid ; 
  &: fɔs - pikin { .
    margin - lɛf : 0 ; 
  } .
} .
. ofset ( @kolomOfset : 1 ) {  
  margin - left : ( @gridKɔlɔmWid * @kɔlɔmƆfset ) + ( @gridGɔtaWid * ( @kɔlɔmƆfset - 1 )) ! impɔtant ;          
} .