Учебник по Pure CSS - httpdoc.ru

Учебник по PureCSS

Учебное пособие по PureCSS: Pure CSS - это маленькая каскадная таблица стилей (CSS) или фреймворк разработан, YAHOO и первая предварительная версия была выпущена 14 мая 2013 года. Фреймворк - это набор предопределенных классов, которые дизайнер может использовать напрямую, не просматривая реальный CSS, стоящий за ним. Он был разработан с концепцией «сначала мобильные» и использует адаптивные элементы, которые подходят для устройств любого размера. Хотя полезно иметь базовые знания CSS, прежде чем работать над фреймворком. Фреймворк способствует быстрому развитию проекта. В этом руководстве мы изучим все фундаментальные концепции чистого CSS, как использовать его для создания более быстрого, привлекательного и адаптивного дизайна веб-сайта.

Чистый CSS помогает в создании beautiful и отзывчивый сайты быстро. Он занимает очень мало места, имея размер, сопоставимый с 4 KB (минимизированный + сжатый с помощью gzip). Это похоже на бутстрап, но с более легкой стороной, поскольку он использует только настоящий CSS, а не javascript. Вы можете догадаться об этом по тому факту, что размер bootstrap (v3.4.1) примерно 368.62 Kb равен размеру, а чистый CSS - всего 4 КБ.

Чистый CSS содержит такие модули, как формы , кнопки , столы и т. д., которые мы изучим в этом руководстве.

Наше Учебное пособие по чистому CSS также предназначено для новичков и профессионалов. Мы постарались сделать его максимально простым для вас, хотя сам по себе этот фреймворк не очень сложен и прост для понимания. В этом уроке мы рассмотрим все основные темы. Итак, начнем с возможностей чистого CSS.


Вот некоторые из его характерных особенностей:

  • Он имеет настраиваемую адаптивную сетку, позволяющую легко разделить веб-страницу на сегменты.
  • Он построен на 'Normalize.css' чтобы исправить проблемы кроссбраузерной совместимости.
  • Встроенные вертикальные и горизонтальные меню на чистом CSS, включая раскрывающиеся меню и общие стили таблиц.
  • Он создает адаптивные веб-сайты, а также не отвечает на запросы.
  • Он небольшой по размеру по сравнению с другими фреймворками CSS.
  • Различные общие стили таблиц.
  • Это бесплатно.

Некоторые базовые функции Pure описаны ниже:

Адаптивный дизайн

Как указывалось ранее, Pure имеет встроенный адаптивный дизайн, который самостоятельно изменяет дизайн веб-сайта в соответствии с размером экрана устройства, на котором отображается веб-сайт. Если говорить о сетки , Pure имеет 12 column подвижную сетку , ориентированную на мобильные устройства, которая поддерживает адаптивные классы для экранов малых, больших и средних размеров. Для каждого размера экрана существуют разные классы. Еще одна важная особенность этой структуры заключается в том, что все веб-сайты, созданные с использованием Pure CSS, полностью совместимы со всеми устройствами, такими как ПК, планшеты и мобильные устройства.

Примечание: 1em = 16 пикселей.

Ниже представлена ​​таблица с разными классами для разных размеров экрана, посмотрите.

Ключ CSS медиа-запрос Применяется Имя класса
никто никто всегда .pure-u- *
см @media экран и (минимальная ширина: 35,5 мкм) ≥ 568 пикселей .pure-u-sm- *
мкр @media screen и (min-width: 48em) ≥ 768 пикселей .pure-u-md- *
LG @media screen и (min-width: 64em) ≥ 1024 пикселей .pure-u-lg- *
xl @media screen и (min-width: 80em) ≥ 1280 пикселей .pure-u-xl- *

Не запутайтесь, если вы его не поняли, просто оставайтесь с нами, и ваши сомнения рассеются.

Поддержка чистого CSS во всех браузерах, таких как IE 8+, Firefox, Chrome, Safari, iOS 6-8 и Android 4.x.


Расширяемый

Чистый CSS легко настроить, поскольку он разработан с учетом того факта, что намного проще добавлять новые правила CSS, чем перезаписывать существующие правила CSS. Чистый CSS можно настроить для работы с существующим веб-проектом, просто добавив несколько строк кода в существующий код.

Модули Pure.CSS:

Pure содержит следующие модули:

  • База
  • Сетка
  • Формы
  • Кнопки
  • Стол
  • Меню
Важная заметка:

Перед тем, как приступить к этому руководству, вы должны ознакомиться с основными HTML , CSS , а также JavaScript потому что они используются для создания базовой структуры и дизайна любого веб-сайта. Не волнуйтесь, если вы не знаете, как работают эти языки, вы можете изучить их на нашем HTML , CSS а также JavaScript учебные пособия. Мы сделали его очень простым языком, который легко выучить и понять.

В этом руководстве по чистому CSS мы рассмотрим и изучим все фундаментальные концепции Pure, такие как формы чистого CSS, входные данные формы, выровненная форма, сложенная форма, как использовать сетку, значки, кнопки, таблицы, такие как таблица с границами, таблица с разделениями, таблица по умолчанию. , меню и раскрывающиеся меню, отзывчивые изображения, флажки, переключатели, и самая важная тема - это создание адаптивного дизайна веб-страницы. Мы уверены, что в конце этого руководства вы познакомитесь с Pure CSS и начнете создавать свой красивый и отзывчивый веб-сайт.

Мы будем изучать это один за другим в руководстве. Перейдите к следующей главе, чтобы узнать, как добавить Чистый CSS в вашем веб-проекте.