Buat Twitter Clone Dari Awal: Desain

Indonesian (Bahasa Indonesia) translation by Fodal Fadul (you can also view the original English article)

Artikel ini merupakan pertama dalam upaya kelompok baru oleh Nettuts + staf, yang mencakup proses merancang dan membangun sebuah aplikasi web dari awal - dalam berbagai bahasa! Kita akan menggunakan sebuah fiksi Twitter-clone, disebut Ribbit, sebagai dasar untuk seri ini.

Dalam tutorial ini, kita perlu fokus pada UI. Kita akan memanfaatkan yang populer kurang Preprocessor untuk membuat CSS kami sebagai dikelola mungkin.

Pengenalan

Pastikan untuk men-download aset untuk tutorial ini, jika bekerja sepanjang.

Tutorial ini dibagi menjadi lima bagian utama, yang menjelaskan bagaimana gaya berbagai halaman tata letak Ribbit's. Aku akan referensi elemen HTML menggunakan CSS penyeleksi untuk membuatnya lebih mudah untuk memahami. Tapi sebelum menyelam ke dalam tata letak, mari kita secara singkat membahas bersarang.

Bersarang

Dalam CSS, referensi elemen bersarang dapat mengakibatkan panjang penyeleksi. Sebagai contoh:

someId {
  /* ... */
}

someId div.someClass {
  /* ... */
}

someId div.someClass p.someOtherClass {
  /* ... */
}

someId div.someClass p.someOtherClass target {
  /* ... */
}

Dan dapat tumbuh lebih besar! Dengan kurang, Anda dapat menggabungkan salah satu elemen lain, sehingga lebih mudah untuk membaca:

1	someId {
2	/* ... */
3	div.someClass {
4	/* ... */
5	p.someOtherClass {
6	/* ... */
7	target {
8	/* ... */
9	}
10	}
11	}
12	}

Variabel dan Mixins

Buat sebuah file baru dan nama itu, style.less. Bila menggunakan gaya apapun preprocessor, itu adalah ide yang baik untuk menyimpan penting warna dan ukuran dalam variabel; Anda dengan mudah dapat menyesuaikan nilai-nilai mereka tanpa mencari file, mencari nilai properti yang Anda butuhkan untuk mengubah. Kita akan menggunakan beberapa variabel untuk warna teks, warna perbatasan, dan lebar konten:

1	@text-color: #3F3E3D;
2	@border-color: #D2D2D2;
3	@content-width: 860px;

Sekarang, mari kita membuat dua mixins. Yang pertama akan menciptakan ilusi anti-alias teks, dan kedua akan memungkinkan untuk lintas-browser gradien. Yang pertama agak sederhana:

1	.antialiased (@color) {
2	color: @color;
3	text-shadow: @color 0 0 1px;
4	}

Kuncinya adalah untuk membuat bayangan di bawah teks dengan warna yang sama dan satu-pixel spread, membuat browser menampilkan warna yang bagus di sekitar teks.

Sekarang untuk gradien; Hal ini lebih rumit daripada anti-alias teks karena setiap browser mengimplementasikan gradien berbeda. Sekali kita telah kompensasi untuk berbagai vendor awalan, di sini adalah kode:

1	.gradient4f (@p1, @c1, @p2, @c2, @p3, @c3, @p4, @c4) {
2	background: @c1;
3	background: -moz-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
4	background: -webkit-gradient(linear, left top, left bottom, color-stop(@p1, @c1), color-stop(@p2, @c2), color-stop(@p3, @c3), color-stop(@p4, @c4));
5	background: -webkit-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
6	background: -o-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
7	background: -ms-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
8	background: linear-gradient(to bottom, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
9	}

Setiap browser memiliki awalan: - moz - Firefox, - webkit-untuk Chrome, dll. Baris terakhir menggunakan W3C direkomendasikan versi untuk gradien. Jika browser yang mendukungnya, ia akan menimpa sifat sebelumnya karena Deklarasi properti latar belakang terakhir dalam aturan. Fungsi linear gradient menerima parameter delapan: empat pasang nilai persen-warna. Itu membuat gradien dengan empat langkah warna.

Gaya global

Mari kita selanjutnya gaya beberapa elemen global, seperti tombol dan link. Kami ingin semua elemen menggunakan Helvatica atau Arial font dengan warna teks didefinisikan sebelumnya:

1	* {
2	font-family: sans-serif;
3	color: @text-color;
4	}

Tubuh

Tubuh cukup mudah; kita perlu latar belakang putih dengan pola berbasis gambar. Ada tidak ada margin dan padding:

body {
    background: white url(gfx/bg.png);
    margin: 0;
    padding: 0;
}

Input

Kami juga akan menyediakan gaya default untuk semua<input>elemen di Halaman:

input {
    width: 236px;
    height: 38px;
    border: 1px solid @border-color;
    padding: 0 10px;
    outline: none;
    font-size: 17px;

    &:focus {
        background: #FFFDF2;
    }
}

Kami menetapkan ukuran default dan padding, dan kami menggunakan variabel @border-color untuk menghapus garis biru menjengkelkan ketika elemen berfokus. Anda harus melihat sedikit lain kurang gula: kita dapat menambahkan CSS pseudo-Class (dan normal kelas terlalu) menggunakan & karakter (induk referensi), seperti yang ditunjukkan di sini:

1	&:focus {
2	background: #FFFDF2;
3	}

Hal ini menyebabkan input untuk memiliki latar belakang kuning terang, ketika fokus.

Mengajukan

Kirimkan tombol akan menggunakan mixin sebelumnya didefinisikan dan border-radius membuat efek bagus:

input[type="submit"] {
    height: 36px;
    border: 1px solid #7BC574;
    border-radius: 2px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 0 20px;
    cursor: pointer;
    .gradient4f(0%, #8CD585, 23%, #82CD7A, 86%, #55AD4C, 100%, #4FA945);
}

Link

Link harus memiliki warna yang berbeda dari teks biasa. Kami juga akan menggarisbawahi mereka di hover:

a {
    text-decoration: none;
    .antialiased(#58B84E);
    &:hover {
        text-decoration: underline;
    }
}

Template dasar

Kita akan mulai dengan bagian tata letak yang tetap sama pada setiap halaman. Berikut adalah kode HTML, yang akan saya jelaskan di bawah ini:

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet/less" href="style.less">
    <script src="less.js"></script>
</head>
<body>
    <header>
        <div class="wrapper">
            <img src="gfx/logo.png">
            <span>Twitter Clone</span></p>

    </div>
  </header>
  <div id="content">
    <div class="wrapper">

    </div>
  </div>
  <footer>
    <div class="wrapper">
      Ribbit - A Twitter Clone Tutorial<img src="gfx/logo-nettuts.png">
    </div>
  </footer>
</body>
</html>

Kita mulai dengan normal doctype definisi dan dokumen kepala. Anda dapat menggunakan perpustakaan less.js dan mencakup style.less dalam tahap pengembangan (seperti yang saya lakukan dalam kode ini). Kemudian, Anda dapat mengkompilasi file kurang ke CSS, jika Anda tidak ingin menggunakan less.js. Seperti Anda mungkin telah memperhatikan sekarang, tata letak terbagi menjadi tiga bagian: header, #content, dan footer. Anda harus menyimpan HTML ini untuk melihat jika Anda adalah styling segalanya dengan benar.

Header

Mari kita mengatasi header. Ini berisi Ribbit's logo dan dua kata: 'Twitter Clone'. Itu dibungkus dalam bungkus, lebar yang dikendalikan oleh @content-width variabel. Ada beberapa pembungkus dalam tata letak, dan semua @content-width lebar dengan margin otomatis:

1	.wrapper {
2	width: @content-width;
3	margin: auto;
4	}

Header itu sendiri adalah 85px tinggi dan lebar halaman:

header {
  background: url(gfx/bg-header.png);
  height: 85px;
  width: 100%;
}

Setelah lebar, tambahkan div.wrapper's gaya dengan vertikal padding:

1	div.wrapper {
2	padding: 11px 0;
3	}

Jadi header akan terlihat seperti:

header {
    background: url(gfx/bg-header.png);
    height: 85px;
    width: 100%;

    div.wrapper {
        padding: 11px 0;
    }

Gambar dalam wrapper perlu 10px lebih rendah, untuk baik berpusat:

img {
    position: relative;
    top: 10px;
    margin: 0 15px 0 0;
}

Juga, font di <span></span> elemen harus lebih besar dari ukuran default:

1	span {
2	font-size: 18px;
3	margin: 0 42px 0 0;
4	}

Berikut adalah bagaimana desain kami harus terlihat saat ini.

Konten

Tidak ada banyak yang bisa kita lakukan dengan #content saat ini. Kami akan menambahkan beberapa margin untuk bagian bawah dan ketinggian minimum; tata letak akan terlihat funky jika tidak cukup tinggi:

1	#content {
2	margin-bottom: 15px;
3	min-height: 560px;
4	}

Di dalam, pembungkus harus memiliki beberapa margin vertikal dengan margin horisontal otomatis:

1	div.wrapper {
2	margin: 38px auto;
3	}

Footer

Seperti header, footer adalah sama untuk semua halaman. Kita akan menggunakan gambar latar belakang dan ukuran font yang lebih kecil. Kita juga harus jelas: keduanya, karena kita akan menggunakan mengapung dalam konten. Tanpa kliring, footer tidak akan menyesuaikan sesuai dengan isi:

footer {
  background: url(gfx/bg-footer.png);
  height: 251px;
  font-size: 14px;
  clear: both;
}

Mari kita sekarang menambahkan padding beberapa untuk pembungkus, dan gambar di dalamnya harus mengapung di sebelah kanan:

div.wrapper {
    padding: 15px;

    img {
        float: right;
    }
}

Berikut ini adalah footer kami:

Beranda

Halaman ini menampilkan untuk pengguna yang tidak login ke Ribbit. Oleh karena itu, itu akan perlu hadir form login di header dan formulir daftar, dengan gambar besar katak dalam konten. Mari kita mulai dengan dasar template.

Kotak masuk

Tambahkan ini form login ke div.wrapper header, setelah <span></span> elemen:

1	<form>
2	<input type="text">
3	<input type="password">
4	</form>

Input sudah ditata, tetapi kita perlu menambahkan margin dan membuat bentuk menampilkan sebagai inline. Tambahkan ini setelah rentang di div.wrapper header:

form {
    display: inline;

    input {
        margin: 0 0 0 14px;
    }
}

Formulir daftar

Berikut adalah HTML untuk formulir pendaftaran:

<img src="gfx/frog.jpg">
<div class="panel right">
    <h1>New to Ribbit?</h1>
    <form>
        <input name="email" type="text">
        <input name="password" type="text">
        <input name="password2" type="password">
        <input type="submit" value="Create Account">
    </form>
</div>

Menambahkan HTML ini dalam div.wrapper dari #content. Kami ingin gambar untuk memiliki sudut-sudut membulat dan melayang ke kiri (menambahkan ini setelah margin dalam div.wrapper #content):

1	img {
2	border-radius: 6px;
3	float: left;
4	}

Sekarang, kita dapat gaya formulir pendaftaran. Ini juga akan menjadi sebuah panel yang akan kita gunakan kemudian; itu sebabnya kami akan gaya .panel:

div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;
}

Untuk sekarang, meskipun, kita akan hanya gaya panel kanan. Hal ini sempit dan menempel sisi kanan panel. Tentu saja, masukkan berikut ke div.panel:

&.right {
    width: 303px;
    height: 313px;
    float: right;
}

Juga, kita perlu untuk mengurus header dan konten panel. Kami menggunakan<h1></h1>unsur-unsur untuk header dan<p>unsur-unsur untuk konten. Pemberitahuan yang dapat Anda gunakan * wildcard dalam elemen lain:

* {
    margin: 6px 0;
}
form {
    padding: 0 23px;
}
h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
}
p {
    padding: 0 24px;
    margin: 18px 0;
}

Berikut adalah bagaimana gaya div.panel yang akan terlihat:

div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;

    &.right {
        width: 303px;
        height: 313px;
        float: right;
    }
    
    * {
    margin: 6px 0;
  }
  h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
  }
  p {
    padding: 0 24px;
    margin: 18px 0;
  }
}

Dan di sini adalah screenshot dari bagaimana Halaman ini harus, dengan demikian jauh (klik untuk melihat ukuran penuh):

Teman-teman Halaman

Halaman teman harus ditampilkan ketika pengguna log in. Ini akan menampilkan daftar terakhir "Ribbits," bersama dengan beberapa statistik akun. Sekali lagi, mulai dengan dasar template. Halaman ini, bersama dengan halaman lain, akan menampilkan tombol logout tempat login form di header:

1	<form>
2	<input type="submit" id="btnLogOut" value="Log Out">
3	</form>

Tombol-tombol sudah telah ditata, jadi kita hanya perlu pin ke sisi kanan kontainer dan menambahkan beberapa margin:

1	#btnLogOut {
2	float: right;
3	margin: 14px 0 0 0;
4	}

Karena aturan ini pemilih elemen ID, Anda dapat menempatkannya di luar setiap elemen atau dalam header di div.wrapper. Itu adalah pilihan Anda, tapi ingat bahwa, jika Anda memilih tempat itu dalam elemen lain, CSS dikompilasi akan memiliki sebuah selector lagi (header div.wrapper #btnLogOut).

Kotak "Buat Ribbit"

Pertama, tambahkan kode panel ini untuk div.wrapper dari #content:

<div id="createRibbit" class="panel right">
    <h1>Create a Ribbit</h1>
    <p>
        <form>
            <textarea name="text" class="ribbitText"></textarea>
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

.Right kelas gaya sebelumnya, tetapi kita perlu menambahkan beberapa styling untuk <textarea></textarea> elemen. Kami akan memberikan ukuran yang tepat dan perbatasan:

textarea.ribbitText {
    width: 249px;
    height: 160px;
    border: 1px solid @border-color;
}

Tambahkan ini dalam definisi gaya panel kanan.

Informasi pengguna

Sekarang, mari kita fokus pada panel, yang berisi informasi account. Kami akan sementara menempatkannya dengan beberapa konten acak untuk melihat Style:

<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Mungkin terlihat rumit, tetapi struktur cukup sederhana, ketika Anda menghapus konten:

<div id="ribbits" class="panel left">
  <h1>Your Ribbit Profile</h1>
  <div class="ribbitWrapper">
    <img class="avatar" src="gfx/user1.png">
    <span class="name"> </span>
    <p>
       <span class="spacing"> </span><span class="spacing"> </span><br>
    </p>
  </div>
</div>

Terlepas dari itu, kami memiliki panel lainnya; Jadi kita perlu gaya itu pertama:

1	&.left {
2	width: @content-width - 327;
3	float: left;
4	}

Anda mungkin tahu di mana untuk menempatkan kode ini (perhatikan bagaimana dengan mudah Anda dapat melakukan operasi aritmetika kurang). Panel ini berisi div.ribbitWrapper. Jadi, tambahkan kode berikut:

1	div.ribbitWrapper {
2	padding: 15px 0;
3	}

Ada dua <span></span> elemen dalam elemen ini, masing-masing dengan ukuran warna dan font yang berbeda. Mereka memiliki kelas .name dan .time:

span {
    &.name {
        font-size: 18px;
        color: #58B84E;
    }

    &.time {
        font-size: 12px;
        color: #CCC;
    }
}

Kita juga harus posisi gambar avatar dekat perbatasan kiri. Tambahkan kode berikut:

1	img.avatar {
2	margin: 0 19px 0 20px;
3	float: left;
4	}

Juga, teks Ribbit's perlu anti-alias, dibenarkan dan dipindahkan ke kanan. Kode ini akan menempatkan teks di sebelah avatar, sebagai lawan untuk di bawah ini:

p {
    margin: 5px 50px 0 90px;
    padding: 0;
    text-align: justify;
    line-height: 1.5;
    .antialiased(@text-color);
}

Dalam ayat ini, ada <span></span> elemen dengan jalur vertikal, Visual memisahkan mereka. Efek ini dicapai dengan menggunakan border, padding dan margin:

span.spacing {
    padding-left: 9px;
    margin-left: 9px;
    height: 10px;
    border-left: 1px solid @border-color;
}

Ribbits teman-teman'

Panel ini berisi ribbits terbaru dari orang-orang kepada siapa pengguna mengikuti. Masukkan berikut setelah pengguna informasi panel:

<div class="panel left">
    <h1>Your Ribbit Buddies</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Ada beberapa contoh ribbits untuk melihat bagaimana tampilannya. Kami akan menambahkan beberapa perbatasan untuk visual memisahkan mereka. Tambahkan kode berikut pada div.ribbitWrapper:

1	border-bottom: 1px solid @border-color;
2	&:last-child {
3	border: none;
4	}

Gaya ini menambahkan perbatasan bawah, sementara menghapus perbatasan pada div.ribbitWrapper terakhir; perbatasan sudah ada pada panel.

Berikut adalah bagaimana Halaman ini harus sekarang:

Halaman Ribbits Umum

Halaman "Umum Ribbits" akan daftar ribbits terbaru dari profil yang tidak ditandai sebagai pribadi, sehingga pengguna dapat melihat ribbits orang-orang yang mereka belum di daftar teman mereka. Anehnya, tidak ada yang lain untuk gaya, tetapi kita perlu menambahkan sentuhan HTML. Satu-satunya perbedaan antara ini dan halaman sebelumnya adalah bahwa ini tidak memiliki panel informasi pengguna, tapi itu akan memiliki konten lain di situs akhir. Jadi merasa bebas untuk menyalin kode halaman teman-teman, tapi menghapus panel ini:

<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Juga mengubah header panel untuk "Umum Ribbits." Berikut adalah preview Halaman ini:

Halaman profil Umum

Pada Halaman ini, pengguna dapat melihat daftar profil yang tidak ditandai sebagai pribadi. Ada juga kotak pencarian untuk menemukan profil lain. Kita akan mulai dengan dasar template.

Cari profil

Kotak pencarian akan menggunakan panel .right dengan<input>elemen dalam:

<div class="panel right">
    <h1>Search for profiles</h1>
    <p>
        <form>
            <input name="query" type="text">
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

Daftar profil

Berikut adalah beberapa contoh profil untuk daftar profil, sehingga Anda dapat melihat bagaimana tampilannya dalam browser. Dalam pelajaran masa depan, kita tentu akan mengganti ini, sesuai.

<div id="ribbits" class="panel left">
    <h1>Public Profiles</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">625 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">329 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">129 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Halaman ini akan terlihat seperti:

Kompilasi CSS

Referensi elemen bersarang dapat mengakibatkan panjang penyeleksi.

Seperti yang saya catat sebelumnya, untuk produksi, Anda dapat mengkompilasi kurang Anda CSS (dan saya sarankan Anda melakukannya untuk alasan kinerja). Ada beberapa compiler online yang tersedia:

Bersama dengan beberapa compiler yang berdiri sendiri:

Krisis! (yang adalah full-blown kurang editor)
WinLess (fitur auto kompilasi ketika file kurang perubahan)
SimpLESS (termasuk CSS minification)

Jika salah satu penyusun ini tidak bekerja untuk Anda, Google untuk lebih; ada banyak! Anda juga dapat menggunakan lessc dari kurang dari situs, tapi jauh lebih mudah untuk mengkompilasi file kurang dengan kompiler lainnya. Tentu saja, tidak ada yang salah dengan menggunakan perpustakaan less.js untuk secara dinamis mengkompilasi tata letak; baru browser cache CSS dihasilkan.

Kesimpulan

Seperti yang Anda lihat, kurang adalah alat yang ampuh yang membuatnya jauh lebih mudah dan lebih cepat daripada biasa CSS untuk gaya indah layout.

Tapi ini hanya permulaan. Bersiaplah untuk menerapkan Ribbit's back-end dalam sejumlah bahasa dan platform di set berikutnya dari tutorial!