Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

O menor sistema de grade do mundo

A Microgrid NR é independente , menor do mundo e do sistema de grade livre de depedências .
O tamanho da versão gzipped é apenas 184 bytes .
Por exemplo, bootstrap-grid.min.css (bootstrap 4.1.3) é 3195 bytes .

Comparação de tamanho

Vamos comparar o tamanho gzipped de Microgrid NR ( 184 bytes ) com outros sistemas de grade.

  • Grd (503 bytes) ~ 173% mais
  • SimpleGrid (644 bytes) ~ 250% mais
  • 960gs (1105 bytes) ~ 500% a mais
  • FlexboxGrid (1591 bytes) ~ 1636% mais
  • Sistema de grade 4.1.3 da Bootstrap (3195 bytes) ~ 812% mais

Suporte aos navegadores

A Microgrid NR é compatível com os navegadores cruzados.

Características

  • Mais leve do mundo - apenas 184 bytes gziped (<0,9% do bootstrap gzipped 3 CSS)
  • Sistema de grade de viewport único (12 colunas)
  • Recipientes de largura total e de largura fixa
  • Calhas de coluna embutidas (Padrão: 15px)
  • Invólucros de linha com calhas negativas
  • Classes Nomeando de maneira semelhante às classes de bootstrap bem conhecidas (linha, contêiner, fluido de contêineres, col, xs-1 ... XS-12)
  • Contém apenas recursos essenciais e mais usados ​​para acelerar seu aplicativo
  • Otimizado para a melhor compressão GZIP
  • Sem javascript, fallbacks ou depedências - apenas CSS puro
  • Navegadores cruzados compatíveis
  • Minificado e pronto para usar
  • Migração fácil para Micrograde padrão (Responsiva) - Em breve

Documentação

Instalação

 <head>
	<link href = "microgrid nr.min.css" rel = "STILEET">
</head>

Eu também recomendo definir a propriedade CSS de tamanho de caixa para todos os elementos HTML (leia mais sobre a propriedade de tamanho de caixa).

 <head>
	<Style>*{box-sizing: border-box} </yled>
	<link href = "microgrid nr.min.css" rel = "STILEET">
</head>

Elementos

Nomeação e estrutura dos elementos são iguais ou semelhantes, como no bootstrap 3.

Contêineres

Os contêineres devem contém apenas elementos row .
Somente é permitido um único container ou container-fluid por página.

Recipientes de largura fixa
 <div class = "contêiner"> </div>

Por padrão, container tem 100% de largura.
Você pode alterá -lo para o valor personalizado.

Recipientes de largura total
 <div class = "contêiner-fluid"> </div>

Linhas

As linhas devem ser colocadas dentro container ou elemento container-fluid .
As linhas conterão apenas elementos col .

 <div class = "linha"> </div>

Colunas

As colunas devem ser sempre colocadas dentro do elemento row .

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

Exemplo:

 <div class = "Col XS-6"> </div>

Compensações

Não há aulas internas para o deslocamento das colunas no momento.
Se você precisar fazer o deslocamento da coluna, use colunas (s) vazias como pseudo-offsets, como no exemplo a seguir.

 <!-pseudo-deslocamento começa->
	<div class = "Col XS-6"> </div>
<!-pseudo-deslocamento final>
<!-coluna Begin->
	<div class = "Col XS-6"> Esta coluna tem pseudo-deslocamento </div>
<!- ​​End da coluna>

Exemplo completo

 <html>
<head>
	<Style>*{box-sizing: border-box} </yled>
	<link href = "microgrid nr.min.css" rel = "STILEET">
</head>
<Body>
	<div class = "contêiner-fluid">
    	<div class = "linha">
    		<div class = "Col XS-4"> a </div>
    		<div class = "Col XS-8"> b </div>
  		</div>
    	<div class = "linha">
    		<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 = "linha">
    		<div class = "Col XS-8"> f </div>
    		<div class = "Col XS-4"> g </div>
  		</div>
	</div>
</body>
</html>

Viewports

A micrograda (NR) suporta apenas a Viewport única (XS).
Se você deseja desenvolver vários aplicativos Viewports, pode usar/migrar para a versão padrão (totalmente responsiva) da microgrid (em breve).

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos