Как вы знаете, это не время рождения Интернета, и люди почти забыли о веб-сайтах, имеющих один абзац текста и несколько гиперссылок. Если вы хотите двигаться дальше с текущими веб-стандартами, вам нужно сделать свой веб-сайт приятным, а не откровенно просматриваемым. Независимо от языка программирования, такого как 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, чтобы использовать и узнать больше о простой компактной структуре. Сообщите нам свое мнение об этом фреймворке после ознакомления с примерами и использования его в своем проекте.
Ракеш Кумар
Спасибо за публикацию этого замечательного обзора чистого CSS. Поскольку я пытаюсь разработать свои собственные темы WordPress для сообщества, я думаю, что этот новый CSS от yahoo.com может мне очень помочь.
Хари
Я нахожу это действительно очень полезным. Позже мы исследуем каждую из них.
Касси
Вот это да. Это действительно интересно. Спасибо за обмен этой информацией.
Раймонд Сэм
Вы бы порекомендовали Pure вместо Bootstrap или Foundation на этом этапе? Я обнаружил, что Bootstrap немного хуже, чем оптимально задокументирован, когда вы впервые его используете.
Саджеш
Привет, Абхиджит Н. Арджунан, я должен сказать вам, что вы проделали огромную работу, и спасибо за то, что просветили мои знания и навыки.
Сантош
Отличная статья Абхиджит. Я использовал PureCSS для создания темы для новой системы управления контентом PyroCMS. Взгляните на [PyroPure]).
Было очень весело разрабатывать тему. Я думаю, что он был намного легче, чем другие фреймворки. Стиль также очень настраиваемый.
Эрвин
Вау ... Это то, чему интересно научиться, я знаю, что у меня нет талантов в программировании и дизайне, но это было интересно делать. PureCSS, наверное, то, что мне очень нужно.
Адам
Здравствуйте, я использовал чистоту (PureCss) от Yahoo в трех проектах, и это действительно потрясающий легкий фреймворк, так сказать, по сравнению с Bootstrap или фундаментом, его фокус заключается в том, чтобы его облегчить и вернуть дизайн разработчику и полагаться на комплект пользовательского интерфейса 3 КБ что вы все равно не используете 300% элементов, и если вы вынимаете части из Bootstrap, ему все равно нужна Java, она все еще находится в разделе 70kb. Не говоря уже о том, что каждый веб-сайт выглядит как Bootstrappy, поэтому я никогда не буду использовать Bootstrap для создания веб-сайта или фундамента Zurb, все они тяжелые, и вам нужно использовать их сетку из 200 столбцов, которая действительно наскучила. Я вижу сайты веб-сайтов, все они выглядят красиво и круто, но они просто выглядят такими квадратными и хорошими. Bootstrap-foundation, Yahoo PureCss - потрясающий набор пользовательского интерфейса, легкий, быстрый, простой в использовании, модифицируемый и, что самое главное, очень быстро работает с WordPress в качестве темы! Я использовал его для 12 проектов WordPress с YUI PureCss, и клиент был поражен переключением с Bootstrap, первое замечание - скорость сайта, второе - красивый дизайн FLAT по умолчанию.