Главная страница>Связанные с программированием>Другой исходный код
Скачать

Самая маленькая сетка в мире

Microgrid NR является автономной , самой маленькой в ​​мире и Depedentes Free System.
Размер версии GZIPD составляет всего 184 байта .
Например, GZIPPLAP bootstrap-grid.min.css (Bootstrap 4.1.3) составляет 3195 байтов .

Сравнение размеров

Давайте сравним размером с GZIPD NR Microgrid ( 184 байта ) с другими системами сетки.

  • GRD (503 байта) ~ 173% больше
  • SimpleGrid (644 байта) ~ 250% больше
  • 960 г (1105 байтов) ~ 500% больше
  • FlexboxGrid (1591 байт) ~ 1636% больше
  • Сетка Bootstrap 4.1.3 (3195 байтов) ~ 812% больше

Поддержка браузеров

Microgrid NR совместим с Cross Browsers.

Функции

  • Самый легкий в мире - всего 184 байта GZIPD (<0,9% GZIPPUPPUPPUTPORP 3 CSS)
  • Система сетки с одним просмотром (12 столбцов) (12 столбцов)
  • Контейнеры с полной шириной и фиксированной шириной
  • Встроенные желоба столбца (по умолчанию: 15px)
  • Ряные обертки с отрицательными желобами
  • Занятия, называемые известными классами начальной загрузки (Row, Container, Container-Fluid, Col, XS-1 ... XS-12)
  • Содержит только важные и наиболее используемые функции для ускорения вашего приложения
  • Оптимизирован для лучшего сжатия GZIP
  • Нет JavaScript, Hallacks или DepedEntes - просто чистый CSS
  • Крестные браузеры совместимы
  • Минимум и готов к использованию
  • Легкая миграция в стандартную (отзывчивую) микросетку - скоро

Документация

Установка

 <голова>
	<link href = "microgrid-nr.min.css" rel = "stylesheet">
</head>

Я также рекомендую установить свойство CSS для размера ящика для всех элементов HTML (подробнее о свойстве размера коробки).

 <голова>
	<style>*{box-size: border-box} </style>
	<link href = "microgrid-nr.min.css" rel = "stylesheet">
</head>

Элементы

Наименование и структуру элементов одинаковы или похожи, как в начальной загрузке 3.

Контейнеры

Контейнеры должны содержать только элементы row .
Допускается только один container или container-fluid на страницу.

Контейнеры с фиксированной шириной
 <div class = "container"> </div>

По умолчанию container имеет 100% ширину.
Вы можете изменить его на пользовательскую ценность.

Полная ширина контейнеров
 <div class = "контейнер-флюид"> </div>

Ряды

Ряды должны быть размещены внутри container или container-fluid элемента.
Строки будут содержать только элементы col .

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

Колонны

Столбцы всегда должны быть размещены внутри элемента row .

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

Пример:

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

Смещения

На данный момент нет встроенных классов для смещения колонн.
Если вам нужно сделать смещение столбца, используйте пустые столбцы (ы) в качестве псевдо-офсет, например, в следующем примере.

 <!-Pseudo-Offset Begin->
	<div class = "col xs-6"> </div>
<!-псевдо-офсет End>
<!-начало столбца->
	<div class = "col xs-6"> Этот столбец имеет псевдо-оффс </div>
<!- ​​Конец столбца>

Полный пример

 <html>
<голова>
	<style>*{box-size: border-box} </style>
	<link href = "microgrid-nr.min.css" rel = "stylesheet">
</head>
<тело>
	<div class = "контейнер-флюид">
    	<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) поддерживает только один вид просмотра (XS).
Если вы хотите разработать несколько приложений Viewports, вы можете использовать/мигрировать стандартную (полностью отзывчивую) версию Microgrid (скоро).

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все