Inicio>Relacionado con la programación>Otro código fuente
Descargar

El sistema de cuadrícula más pequeño del mundo

Microgrid NR es independiente , el sistema de cuadrícula más pequeño y libre de depedencias del mundo .
El tamaño de la versión GZipped es solo 184 bytes .
Por ejemplo, Gzipped bootstrap-grid.min.css (Bootstrap 4.1.3) es 3195 bytes .

Comparación de tamaño

Comparemos el tamaño de GZIPS de Microgrid NR ( 184 bytes ) con otros sistemas de cuadrícula.

  • GRD (503 bytes) ~ 173% más
  • SimpleGrid (644 bytes) ~ 250% más
  • 960GS (1105 bytes) ~ 500% más
  • FlexboxGrid (1591 bytes) ~ 1636% más
  • Sistema de cuadrícula 4.1.3 de Bootstrap (3195 bytes) ~ 812% más

Soporte de navegadores

Microgrid NR es compatible con navegadores cruzados.

Características

  • Más liviano del mundo: solo 184 bytes gzipped (<0.9% de bootstrap 3 CSS)
  • Sistema de cuadrícula de visores visuales individuales (12 columnas)
  • Contenedores de ancho completo y ancho fijo
  • Canalones de columna incorporados (predeterminado: 15px)
  • Envoltorios de fila con canaletas negativas
  • Clases Nombramientos similares a las clases de arranque bien conocidas (fila, contenedor, contenedor-fluido, col, xs-1 ... XS-12)
  • Contiene solo características esenciales y más utilizadas para acelerar su aplicación
  • Optimizado para la mejor compresión de GZIP
  • Sin JavaScript, Fallbacks o Depedencias, solo CSS puro
  • Navegadores cruzados compatibles
  • Minificado y listo para usar
  • Microgrid de migración fácil a microrred estándar (receptiva) - pronto

Documentación

Instalación

 <Evista>
	<Link href = "microgrid-nr.min.css" rel = "stylesheet">
</ablo>

También recomiendo establecer una propiedad CSS de tamaño de caja para todos los elementos HTML (lea más sobre la propiedad del tamaño de la caja).

 <Evista>
	<style>*{box-sizing: border-box} </style>
	<Link href = "microgrid-nr.min.css" rel = "stylesheet">
</ablo>

Elementos

El nombre y la estructura de los elementos son mismos o similares como en Bootstrap 3.

Contenedores

Los contenedores deben contener solo elementos row .
Solo se permite un solo container o container-fluid por página.

Contenedores de ancho fijos
 <div class = "contenedor"> </div>

Por defecto, container tiene 100% de ancho.
Puede cambiarlo al valor personalizado.

Contenedores de ancho completo
 <div class = "Container-fluid"> </div>

Hilera

Las filas deben colocarse dentro container o elemento container-fluid .
Las filas contendrán solo elementos col .

 <div class = "fila"> </div>

Columnas

Las columnas siempre deben colocarse dentro del elemento row .

 <div class = "col [vista de visión] -6"> </div>

Ejemplo:

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

Compensación

No hay clases incorporadas para las columnas compensadas en este momento.
Si necesita hacer una compensación de columna, use columnas vacías como pseudo-offsets, como en el siguiente ejemplo.

 <!-Pseudo-offset Begin->
	<div class = "col xs-6"> </div>
<!-Pseudo-offset End>
<!-columna begin->
	<div class = "col xs-6"> Esta columna tiene pseudo-offset </div>
<!- ​​End de columna>

Ejemplo completo

 <html>
<Evista>
	<style>*{box-sizing: border-box} </style>
	<Link href = "microgrid-nr.min.css" rel = "stylesheet">
</ablo>
<Body>
	<div class = "Container-fluid">
    	<div class = "fila">
    		<div class = "col xs-4"> a </div>
    		<div class = "col xs-8"> b </div>
  		</div>
    	<div class = "fila">
    		<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 = "fila">
    		<div class = "col xs-8"> f </div>
    		<div class = "col xs-4"> g </div>
  		</div>
	</div>
</body>
</html>

Ventas de ventas

Microgrid (NR) admite solo una sola vista de visión (XS).
Si desea desarrollar múltiples visitas de ventanas gráficas, puede usar/migrar a la versión estándar (totalmente receptiva) de Microgrid (pronto).

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo