Menggunakan KURANG dengan Bootstrap

Sesuaikan dan perluas Bootstrap dengan LESS , praprosesor CSS, untuk memanfaatkan variabel, mixin, dan lainnya yang digunakan untuk membangun CSS Bootstrap.

Mengapa KURANG?

Bootstrap dibuat dengan KURANG pada intinya, bahasa stylesheet dinamis yang dibuat oleh teman baik kami, Alexis Sellier . Itu membuat pengembangan CSS berbasis sistem lebih cepat, lebih mudah, dan lebih menyenangkan.

Apa yang disertakan?

Sebagai perpanjangan dari CSS, KURANG menyertakan variabel, mixin untuk potongan kode yang dapat digunakan kembali, operasi untuk matematika sederhana, bersarang, dan bahkan fungsi warna.

Belajarlah lagi

KURANG CSS

Kunjungi situs web resmi di http://lesscss.org/ untuk mempelajari lebih lanjut.

Variabel

Mengelola warna dan nilai piksel dalam CSS bisa sedikit merepotkan, biasanya penuh dengan salin dan tempel. Namun tidak dengan KURANG—tetapkan warna atau nilai piksel sebagai variabel dan ubah sekali.

campuran

Tiga deklarasi radius batas yang perlu Anda buat di CSS biasa? Sekarang mereka turun ke satu baris dengan bantuan mixin, potongan kode yang dapat Anda gunakan kembali di mana saja.

Operasi

Jadikan grid Anda, terdepan, dan lebih super fleksibel dengan melakukan perhitungan dengan cepat dengan operasi. Lipat gandakan, bagi, tambahkan, dan kurangi cara Anda menuju kewarasan CSS.

Perancah dan tautan

@bodyBackground @white Warna latar halaman
@textColor @grayDark Warna teks default untuk seluruh isi, judul, dan lainnya
@linkColor #08c Warna teks tautan default
@linkColorHover darken(@linkColor, 15%) Warna hover teks tautan default

Sistem jaringan

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Tipografi

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Kurir Baru", monospace
@baseFontSize 13px Harus berupa piksel
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Harus berupa piksel
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabel

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

Warna abu-abu

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #ee
@white #fff

Warna aksen

@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Komponen

Tombol

@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnDangerBackground #ee5f5b
@btnDangerBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker

Formulir

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

Status formulir dan peringatan

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

navigasi

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white
@navbarLinkColorActive @navbarLinkColorHover
@navbarLinkBackgroundHover transparent
@navbarLinkBackgroundActive @navbarBackground
@navbarSearchBackground lighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus @white
@navbarSearchBorder darken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor #ccc
@navbarBrandColor @navbarLinkColor

Dropdown

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Satuan pahlawan

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Tentang mixin

Mixin dasar

Mixin dasar pada dasarnya adalah termasuk atau sebagian untuk potongan CSS. Mereka ditulis seperti kelas CSS dan dapat dipanggil di mana saja.

  1. . elemen {
  2. . clearfix ();
  3. }

Campuran parametrik

Mixin parametrik sama seperti mixin dasar, tetapi juga menerima parameter (karena itu namanya) dengan nilai default opsional.

  1. . elemen {
  2. . perbatasan - radius ( 4px );
  3. }

Tambahkan milik Anda dengan mudah

Hampir semua mixin Bootstrap disimpan di mixins.less, file .less utilitas yang luar biasa yang memungkinkan Anda menggunakan mixin di salah satu file .less di toolkit.

Jadi, lanjutkan dan gunakan yang sudah ada atau jangan ragu untuk menambahkan milik Anda sesuai kebutuhan.

Termasuk mixin

Keperluan

campuran Parameter Penggunaan
.clearfix() tidak ada Tambahkan ke orang tua mana pun untuk membersihkan pelampung di dalam
.tab-focus() tidak ada Terapkan gaya fokus Webkit dan garis besar Firefox bulat
.center-block() tidak ada Pusatkan elemen level blok secara otomatis menggunakanmargin: auto
.ie7-inline-block() tidak ada Gunakan selain reguler display: inline-blockuntuk mendapatkan dukungan IE7
.size() @height @width Atur tinggi dan lebar dengan cepat pada satu baris
.square() @size Dibangun .size()untuk mengatur lebar dan tinggi sebagai nilai yang sama
.opacity() @opacity Tetapkan, dalam bilangan bulat, persentase opasitas (misalnya, "50" atau "75")

Formulir

campuran Parameter Penggunaan
.placeholder() @color: @placeholderText Atur placeholderwarna teks untuk input

Tipografi

campuran Parameter Penggunaan
#font > #family > .serif() tidak ada Buat elemen menggunakan tumpukan font serif
#font > #family > .sans-serif() tidak ada Buat elemen menggunakan tumpukan font sans-serif
#font > #family > .monospace() tidak ada Buat elemen menggunakan tumpukan font monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Mudah mengatur ukuran font, berat, dan terkemuka
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Atur keluarga font ke serif, dan kontrol ukuran, berat, dan terkemuka
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Atur keluarga font ke sans-serif, dan kontrol ukuran, berat, dan terkemuka
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Atur keluarga font ke monospace, dan kontrol ukuran, berat, dan terkemuka

Sistem jaringan

campuran Parameter Penggunaan
.container-fixed() tidak ada Buat wadah yang dipusatkan secara horizontal untuk menyimpan konten Anda
#grid > .core() @gridColumnWidth, @gridGutterWidth Hasilkan sistem kisi piksel (wadah, baris, dan kolom) dengan n kolom dan talang lebar x piksel
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Hasilkan sistem grid persen dengan n kolom dan x % lebar talang
#grid > .input() @gridColumnWidth, @gridGutterWidth Hasilkan sistem kisi piksel untuk inputelemen, menghitung padding dan border
.makeColumn @columns: 1, @offset: 0 Ubah sembarang divmenjadi kolom kisi tanpa .span*kelas

properti CSS3

campuran Parameter Penggunaan
.border-radius() @radius Bulatkan sudut suatu elemen. Dapat berupa nilai tunggal atau empat nilai yang dipisahkan oleh spasi
.box-shadow() @shadow Tambahkan bayangan jatuh ke elemen
.transition() @transition Tambahkan efek transisi CSS3 (mis., all .2s linear)
.rotate() @degrees Putar elemen n derajat
.scale() @ratio Skala elemen hingga n kali ukuran aslinya
.translate() @x, @y Memindahkan elemen pada bidang x dan y
.background-clip() @clip Pangkas latar belakang elemen (berguna untuk border-radius)
.background-size() @size Kontrol ukuran gambar latar belakang melalui CSS3
.box-sizing() @boxmodel Ubah model kotak untuk sebuah elemen (misalnya, border-boxuntuk full-width input)
.user-select() @select Kontrol pemilihan kursor teks pada halaman
.backface-visibility() @visibility: visible Cegah kedipan konten saat menggunakan transformasi 3D CSS
.resizable() @direction: both Buat elemen apa pun dapat diubah ukurannya di kanan dan bawah
.content-columns() @columnCount, @columnGap: @gridGutterWidth Buat konten elemen apa pun menggunakan kolom CSS3
.hyphens() @mode: auto Tanda hubung CSS3 saat Anda menginginkannya (termasuk word-wrap: break-word)

Latar belakang dan gradien

campuran Parameter Penggunaan
#translucent > .background() @color: @white, @alpha: 1 Berikan elemen warna latar belakang yang tembus pandang
#translucent > .border() @color: @white, @alpha: 1 Berikan elemen warna perbatasan yang tembus pandang
#gradient > .vertical() @startColor, @endColor Buat gradien latar belakang vertikal lintas-browser
#gradient > .horizontal() @startColor, @endColor Buat gradien latar belakang horizontal lintas-browser
#gradient > .directional() @startColor, @endColor, @deg Buat gradien latar belakang arah lintas-browser
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Buat gradien latar belakang tiga warna lintas-browser
#gradient > .radial() @innerColor, @outerColor Buat gradien latar belakang radial lintas-browser
#gradient > .striped() @color, @angle Buat gradien latar belakang bergaris lintas-browser
#gradientBar() @primaryColor, @secondaryColor Digunakan untuk tombol untuk menetapkan gradien dan batas yang sedikit lebih gelap
Catatan: Jika Anda mengirimkan permintaan tarik ke GitHub dengan CSS yang dimodifikasi, Anda harus mengkompilasi ulang CSS melalui salah satu metode ini.

Alat untuk mengkompilasi

Simpul dengan makefile

Instal kompiler baris perintah KURANG, JSHint, Recess, dan uglify-js secara global dengan npm dengan menjalankan perintah berikut:

$npm install -g less jshint reses uglify-js

Setelah terinstal, jalankan saja makedari root direktori bootstrap Anda dan Anda sudah siap.

Selain itu, jika Anda telah menginstal watchr , Anda dapat menjalankan make watchagar bootstrap dibangun kembali secara otomatis setiap kali Anda mengedit file di lib bootstrap (ini tidak diperlukan, hanya metode praktis).

Garis komando

Instal alat baris perintah KURANG melalui Node dan jalankan perintah berikut:

$ lessc ./less/bootstrap.less > bootstrap.css

Pastikan untuk menyertakan --compressperintah itu jika Anda mencoba menyimpan beberapa byte!

Javascript

Unduh Less.js terbaru dan sertakan jalurnya (dan Bootstrap) di file <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

Untuk mengkompilasi ulang file .less, simpan saja dan muat ulang halaman Anda. Less.js mengkompilasinya dan menyimpannya di penyimpanan lokal.

Aplikasi Mac tidak resmi

Aplikasi Mac tidak resmi mengawasi direktori file .less dan mengkompilasi kode ke file lokal setelah setiap penyimpanan file .less yang ditonton.

Jika mau, Anda dapat beralih preferensi di aplikasi untuk pengecilan otomatis dan direktori tempat file yang dikompilasi berakhir.

Aplikasi Mac lainnya

Kegentingan

Crunch adalah editor dan kompiler KURANG yang tampak hebat yang dibangun di atas Adobe Air.

CodeKit

Dibuat oleh orang yang sama dengan aplikasi Mac tidak resmi, CodeKit adalah aplikasi Mac yang mengkompilasi KURANG, SASS, Stylus, dan CoffeeScript.

sederhana

Aplikasi Mac, Linux, dan PC untuk kompilasi drag and drop file KURANG. Plus, kode sumbernya ada di GitHub .