Чистый CSS: чистейший CSS-фреймворк от Yahoo!

Как вы знаете, это не время рождения Интернета, и люди почти забыли о веб-сайтах, имеющих один абзац текста и несколько гиперссылок. Если вы хотите двигаться дальше с текущими веб-стандартами, вам нужно сделать свой веб-сайт приятным, а не откровенно просматриваемым. Независимо от языка программирования, такого как HTML or PHP используется для создания пользовательского интерфейса, CSS станет вашим инструментом для создания стильного внешнего вида веб-страницы. Когда мы сравниваем веб-страницу с человеческим телом, HTML работает как ваши кости, тогда как CSS - это нечто близкое к коже и мускулам, предназначенное для придания формы и структуры.

Как и все остальное в мире дизайна и разработки, CSS также получил незначительные и серьезные обновления, которые сделали его подходящим для достижения CSS3, который является лучшей парой, когда HTML5 сопровождает путешествие. Однако звездой игры является выбранный вами тренд или шаблон CSS! Как вы знаете, для вас доступны различные CSS-фреймворки с разным внешним видом и функциями, например Начальная загрузка, Zurb и т. д. Сегодня мы представляем вам Чистый CSS, простой CSS-фреймворк на основе CoolGrid от Yahoo !, ведущего интернет-гиганта. К счастью, вы можете использовать этот фреймворк, не заплатив ни копейки.

Чистый CSS

Возможно, вы использовали другие фреймворки, такие как Zurb Foundation, для создания привлекательных веб-страниц и веб-сайтов. Использование фреймворка CSS очень полезно, потому что вы можете получить шаблоны для различных элементов на странице, таких как разделы, формы, меню и т. Д. Это та же функция, что и у Чистый CSS от Yahoo! Вместо того, чтобы загружать и добавлять файлы в папку «CSS», чистый CSS может работать как Google шрифты, где вам нужно добавить одну строку кода для интеграции фреймворка в HTML. Поскольку фреймворк является новейшим, он полностью адаптивен. Помимо всего прочего, Pure CSS - одна из самых простых сред, которые вы можете найти в Интернете. Вы можете использовать фреймворк для поддержки своего веб-сайта или загрузить определенные модули для стилизации разделов, таких как формы, меню и т. Д. Есть шесть отдельных модулей, доступных бесплатно. Следующие модули на чистом CSS выглядят небольшими (менее 2 Кб) при извлечении.

• Основание: Базовые элементы веб-страницы, такие как заголовки, абзацы, типографика
• Кнопки: Различные кнопки с эффектами, такими как активный, при наведении и т. Д.
• Таблицы: Базовые таблицы доступны с рамкой и т. Д.
• меню: Горизонтальный, вертикальный, раскрывающийся.
• Сетки: Адаптивные сетки.
• Формы: Сгруппированный ввод, несколько столбцов и т. Д.

СМОТРИТЕ ТАКЖЕ: Букмарклет "Тонкие узоры": предварительный просмотр фоновых узоров на вашем веб-сайте.

Зачем использовать чистый CSS

• Меньше неиспользуемого кода: Обычно вы можете увидеть большое количество неиспользуемого кода при использовании других фреймворков css. С другой стороны, в случае чистого CSS вы никогда не столкнетесь с этой проблемой, потому что вы можете использовать конкретную версию фреймворка и использовать ее для стилизации определенных разделов веб-страницы. Конечно, меньше кода кажется даже отличным!
• Все внутри: По крайней мере, в некоторых других фреймворках они используют сторонние плагины и коды JavaScript для улучшения визуального воздействия. Однако чистый CSS не использует какие-либо плагины JS, за исключением того, который используется в раскрывающемся эффекте. Меньше стороннего кода может обеспечить более быструю загрузку страниц и аккуратность кода.
• Шаблоны: Если вы не являетесь экспертом в разработке собственного макета для своего веб-сайта, чистый CSS может помочь в этом разделе. Веб-сайт содержит несколько примеров макетов, соответствующих веб-сайтам с различными целями, такими как маркетинг, целевая страница и т. Д.



• Строитель скинов: Если шаблоны и стили могут удовлетворить творческого дизайнера в вас, вы можете использовать конструктор скинов Pure CSS для создания своего собственного скина. Как вы можете догадаться, создатель скинов не учитывает ваш уровень программирования.



СМОТРИТЕ ТАКЖЕ: Иконочные шрифты: плюсы и минусы Font Awesome Generator.

Использование чистого CSS

Как указывалось ранее, чистый CSS имеет много преимуществ по сравнению с другими фреймворками. Вспоминая сказанное ранее, вы можете использовать чистый CSS с помощью того же метода, что и Google Fonts. Вы должны добавить одну строку ссылки на внешний файл, чтобы придать стиль вашей веб-странице. Эта функция очень полезна, когда вам нужно создавать веб-страницы с одним файлом и когда у вас недостаточно места для размещения всех файлов css (думаю, этого никогда не произойдет). Как Yahoo! крутит колесо проекта проект, вы не хотите напрягаться по поводу ошибок загрузки или технических сбоев.

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

[HTML]

[/ Html]

В случае, если вы просто хотите использовать определенные версии CSS, такие как меню, формы и т. Д., Существуют специальные коды, доступные вместе с выделенными файлами CSS. Список URL-адресов следующий:



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

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



Заключение

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