• Перейти к основной навигации
  • Перейти к основному содержанию
  • Перейти в конец страницы
Логотип ТехЛила

ТехЛила

Bleeding Edge, Всегда

  • Главная
  • О нас
  • Контакты
  • Сделки и предложения
Логотип Техлила
FacebookТвитнутьLinkedInшпилька
Microsoft WebMatrix 3 Введение в функции
Следующий

Упростите свою веб-разработку с помощью Microsoft WebMatrix

Чистый CSS Framework от Yahoo!

ТехЛила Веб-дизайн и разработка

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

Аватар Абхиджит Н Арджунана Абхиджит Н Арджунан
Последнее обновление: Июль 21, 2013

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

Чистый CSS Framework от Yahoo!

Как и все остальное в мире дизайна и разработки, 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 может помочь в этом разделе. Веб-сайт содержит несколько примеров макетов, соответствующих веб-сайтам с различными целями, такими как маркетинг, целевая страница и т. Д.
  • Макеты на чистом CSS

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

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

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

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

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

    [HTML]

    [/ Html]

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

    Список ссылок на чистом CSS

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

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

    Предварительный просмотр входа и образец кода

    Заключение

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

Раскрытие информации: Контент, опубликованный на TechLila, поддерживается читателями. Мы можем получать комиссию за покупки, совершенные по нашим партнерским ссылкам, без каких-либо дополнительных затрат для вас. Читайте наши Страница отказа от ответственности чтобы узнать больше о нашем финансировании, редакционной политике и способах поддержки.

Поделиться заботой

FacebookТвитнутьLinkedInшпилька
Аватар Абхиджит Н Арджунана

Абхиджит Н Арджунан

Абхиджит Н Арджунан - увлеченный писатель и блоггер из Кералы, который находит огромное удовольствие, когда пишет о тенденциях в области технологий, компьютерных вещах и веб-разработке.

Категория

  • Веб-дизайн и разработка

Теги

CSS

Читатель взаимодействий

Что говорят люди

  1. Ракеш Кумар

    Спасибо за публикацию этого замечательного обзора чистого CSS. Поскольку я пытаюсь разработать свои собственные темы WordPress для сообщества, я думаю, что этот новый CSS от yahoo.com может мне очень помочь.

    Ответить
  2. Хари

    Я нахожу это действительно очень полезным. Позже мы исследуем каждую из них.

    Ответить
  3. Касси

    Вот это да. Это действительно интересно. Спасибо за обмен этой информацией.

    Ответить
  4. Раймонд Сэм

    Вы бы порекомендовали Pure вместо Bootstrap или Foundation на этом этапе? Я обнаружил, что Bootstrap немного хуже, чем оптимально задокументирован, когда вы впервые его используете.

    Ответить
  5. Саджеш

    Привет, Абхиджит Н. Арджунан, я должен сказать вам, что вы проделали огромную работу, и спасибо за то, что просветили мои знания и навыки.

    Ответить
  6. Сантош

    Отличная статья Абхиджит. Я использовал PureCSS для создания темы для новой системы управления контентом PyroCMS. Взгляните на [PyroPure]).

    Было очень весело разрабатывать тему. Я думаю, что он был намного легче, чем другие фреймворки. Стиль также очень настраиваемый.

    Ответить
  7. Эрвин

    Вау ... Это то, чему интересно научиться, я знаю, что у меня нет талантов в программировании и дизайне, но это было интересно делать. PureCSS, наверное, то, что мне очень нужно.

    Ответить
  8. Адам

    Здравствуйте, я использовал чистоту (PureCss) от Yahoo в трех проектах, и это действительно потрясающий легкий фреймворк, так сказать, по сравнению с Bootstrap или фундаментом, его фокус заключается в том, чтобы его облегчить и вернуть дизайн разработчику и полагаться на комплект пользовательского интерфейса 3 КБ что вы все равно не используете 300% элементов, и если вы вынимаете части из Bootstrap, ему все равно нужна Java, она все еще находится в разделе 70kb. Не говоря уже о том, что каждый веб-сайт выглядит как Bootstrappy, поэтому я никогда не буду использовать Bootstrap для создания веб-сайта или фундамента Zurb, все они тяжелые, и вам нужно использовать их сетку из 200 столбцов, которая действительно наскучила. Я вижу сайты веб-сайтов, все они выглядят красиво и круто, но они просто выглядят такими квадратными и хорошими. Bootstrap-foundation, Yahoo PureCss - потрясающий набор пользовательского интерфейса, легкий, быстрый, простой в использовании, модифицируемый и, что самое главное, очень быстро работает с WordPress в качестве темы! Я использовал его для 12 проектов WordPress с YUI PureCss, и клиент был поражен переключением с Bootstrap, первое замечание - скорость сайта, второе - красивый дизайн FLAT по умолчанию.

    Ответить

Добавьте свой комментарий Отменить ответ

Ваш электронный адрес не будет опубликован. Обязательные поля помечены * *

сноска Logo Текстовый логотип нижнего колонтитула

нижний колонтитул

О нас

Здравствуйте и добро пожаловать в TechLila, известный блог о технологиях, где вы можете найти полезные статьи для изучения основ и не только.

В TechLila наша основная цель - предоставить уникальную информацию, такую ​​как советы и рекомендации по качеству, учебные пособия, практические руководства по Windows, Macintosh, Linux, Android, iPhone, безопасности и несколько различных подтем, таких как обзоры.

Ссылки

  • О нас
  • Свяжитесь с нами
  • Отказ от ответственности
  • Персональные данные
  • Условия

Подписаться

Пользовательская тема с использованием Genesis Framework

Облачный хостинг от Cloudways

Язык

© Авторские права 2012–2023 ТехЛила, Все права защищены.

x
x