Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Sistem Grid Terkecil di Dunia

Microgrid NR adalah mandiri , sistem kisi -kisi bebas terkecil dan depedensi di dunia .
Ukuran versi Gzipple hanya 184 byte .
Misalnya Gzipped bootstrap-grid.min.css (Bootstrap 4.1.3) adalah 3195 byte .

Perbandingan ukuran

Mari kita bandingkan ukuran Gzipping microgrid NR ( 184 byte ) dengan sistem grid lain.

  • Grd (503 byte) ~ 173% lebih
  • SimpleGrid (644 byte) ~ 250% lebih
  • 960gs (1105 byte) ~ 500% lebih
  • FlexboxGrid (1591 byte) ~ 1636% lebih
  • Sistem Grid 4.1.3 Bootstrap (3195 byte) ~ 812% lebih

Dukungan Browser

Microgrid NR kompatibel dengan browser silang.

Fitur

  • Teringan di dunia - hanya 184 byte Gzipped (<0,9% dari Gzipped Bootstrap 3 CSS)
  • Sistem Grid Viewport tunggal (12 kolom)
  • Wadah lebar dan lebar penuh dan tetap
  • Talang kolom bawaan (default: 15px)
  • Pembungkus baris dengan selokan negatif
  • Penamaan kelas mirip dengan kelas bootstrap terkenal (baris, wadah, container-fluid, col, xs-1 ... xs-12)
  • Hanya berisi fitur penting & paling banyak digunakan untuk mempercepat aplikasi Anda
  • Dioptimalkan untuk Kompresi Gzip Terbaik
  • Tidak ada javascript, fallbacks atau depedencies - hanya css murni
  • Browser silang kompatibel
  • Minified dan Siap digunakan
  • Migrasi Mudah ke Microgrid Standar (Responsif) - Segera

Dokumentasi

Instalasi

 <head>
	<tautan href = "microgrid-nr.min.css" rel = "stylesheet">
</head>

Saya juga merekomendasikan untuk mengatur properti CSS ukuran kotak untuk semua elemen HTML (baca lebih lanjut tentang properti ukuran kotak).

 <head>
	<tyle>*{box-sizing: boord-box} </style>
	<tautan href = "microgrid-nr.min.css" rel = "stylesheet">
</head>

Elemen

Penamaan dan struktur elemen sama atau serupa seperti di Bootstrap 3.

Wadah

Kontainer hanya harus berisi elemen row .
Hanya container tunggal atau container-fluid per halaman yang diizinkan.

Wadah lebar tetap
 <Div class = "container"> </div>

Secara default, container memiliki lebar 100%.
Anda dapat mengubahnya menjadi nilai khusus.

Wadah lebar penuh
 <Div class = "container-fluid"> </div>

Baris

Baris harus ditempatkan di dalam container atau elemen container-fluid .
Baris hanya akan berisi elemen col .

 <Div class = "row"> </div>

Kolom

Kolom harus selalu ditempatkan elemen row dalam.

 <Div class = "col [viewport] -6"> </div>

Contoh:

 <Div class = "col xs-6"> </div>

Offset

Tidak ada kelas bawaan untuk kolom offset saat ini.
Jika Anda perlu membuat kolom offset, silakan gunakan kolom kosong sebagai pseudo-offset, seperti dalam contoh berikut.

 <!-Pseudo-offset Begin->
	<Div class = "col xs-6"> </div>
<!-Pseudo-offset End>
<!-Kolom mulai->
	<Div class = "col xs-6"> Kolom ini memiliki pseudo-offset </div>
<!- ​​Kolom End>

Contoh lengkap

 <Html>
<head>
	<tyle>*{box-sizing: boord-box} </style>
	<tautan href = "microgrid-nr.min.css" rel = "stylesheet">
</head>
<body>
	<Div class = "container-fluid">
    	<Div class = "row">
    		<Div class = "col xs-4"> a </div>
    		<Div class = "col xs-8"> b </div>
  		</div>
    	<Div class = "row">
    		<Div class = "col xs-12">
    			<Div class = "col xs-4"> c </div>
    			<Div class = "col xs-4"> d </div>
       			<Div class = "col xs-4"> e </div>
            </div>
  		</div>
     	<Div class = "row">
    		<Div class = "col xs-8"> f </div>
    		<Div class = "col xs-4"> g </div>
  		</div>
	</div>
</body>
</html>

Viewports

Microgrid (NR) hanya mendukung viewport tunggal (XS).
Jika Anda ingin mengembangkan beberapa aplikasi viewports, Anda dapat menggunakan/migrasi-ke-standar (sepenuhnya responsif) versi microgrid (segera).

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua