• Перейти до основної навігації
  • Перейти до основного матеріалу
  • Перейти до основної врізки
  • Перейти в кінець сторінки

TechLila

Bleeding Edge, завжди

  • Головна
  • Про нас
  • Контакти
  • Акції та пропозиції
Логотип Techlila
Поділитись
чірікать
Поділитись
Pin
3 акції
Вступні функції Microsoft WebMatrix 3
Вгору Далі

Спростіть свою веб-розробку за допомогою Microsoft WebMatrix

Чистий CSS Framework від Yahoo!

TechLila Веб-дизайн і розробка

Pure CSS: найчистіший фреймворк CSS від Yahoo!

Аватар Абхіджит Н Арджунан Абхіджіт Н Арджунан
Останнє оновлення: Липень 21, 2013

Як ви знаєте, зараз не час народження Інтернету, і люди майже забули веб-сайти, які мають один абзац і деякі гіперпосилання. Якщо ви хочете продовжити роботу з поточними веб-стандартами, ви повинні зробити свій веб-сайт приємним, а не відверто доступним для перегляду. Незалежно від мови кодування, наприклад HTML or PHP використовується для побудови інтерфейсу користувача, CSS стане вашим інструментом для того, щоб веб-сторінка виглядала стильно. Коли ми порівнюємо веб-сторінку з людським тілом, HTML працює як ваші кістки, тоді як CSS — це щось близьке до шкіри та м’язів, створене для надання форми та структури.

Чистий CSS Framework від Yahoo!

Як і всі інші речі у світі дизайну та розробки, CSS також отримав незначні та великі оновлення, завдяки чому він підходить для досягнення CSS3, який є найкращою парою, коли HTML5 супроводжує подорож. Однак зіркою гри є тенденція або шаблон CSS, який ви вирішите використовувати! Як ви знаєте, для вас доступні різні фреймворки CSS з різним виглядом і функціями, наприклад Bootstrap, Зурб і т. д. Те, що ми сьогодні представляємо вам Чистий CSS, CSS Framework на основі coolgrid від Yahoo!, провідного інтернет-гіганта. На щастя, ви можете використовувати цю структуру, не заплативши жодної копійки.

Чистий CSS

Можливо, ви використовували інші фреймворки, як-от Zurb Foundation, для створення привабливих веб-сторінок та веб-сайтів. Використання фреймворку CSS дуже корисно, оскільки ви можете отримати шаблони для різних елементів сторінки, таких як розділи, форми, меню тощо. Це та ж сама функція Чистий CSS від Yahoo! Замість того, щоб завантажувати та додавати файли до папки «CSS», Pure CSS може працювати як Google шрифти, де ви повинні додати один рядок коду для інтеграції фреймворку в HTML. Оскільки фреймворк є найновішим, він повністю адаптивний. Крім усього, Pure CSS є одним із найпростіших фреймворків, які ви можете знайти в Інтернеті. Ви можете використовувати фреймворк для забезпечення живлення свого веб-сайту або завантажити окремі модулі для стилізації розділів, як-от форми, меню тощо. Є шість окремих модулів, доступних безкоштовно. Модулі Pure CSS є такими, які здаються невеликими (менше 2 Кб) при вилученні.

  • Підстава: Базові елементи веб-сторінки, такі як заголовки, абзац, типографіка
  • Кнопки: Різні кнопки з такими ефектами, як активні, при наведенні курсора тощо.
  • Таблиці: Базові столи доступні з бордюром тощо.
  • Меню: Горизонтальний, вертикальний, спадний список.
  • Сітки: Чуйні сітки.
  • Форми: Згрупований вхід, кількома колонками тощо.

ДИВИСЬ ТАКОЖ: Букмарклет тонких шаблонів: попередній перегляд фонових візерунків на вашому веб-сайті.

Навіщо використовувати Pure CSS

  • Менше невикористаного коду: Дуже часто ви можете побачити велику кількість невикористаного коду при використанні інших фреймворків css. З іншого боку, у випадку Pure CSS ви ніколи не зіткнетеся з цією проблемою, тому що ви можете використовувати конкретну версію фреймворку та використовувати її для стилізації певних розділів веб-сторінки. Звичайно, менше коду здається навіть чудовою!
  • Все всередині: Принаймні в деяких інших фреймворках вони використовують сторонні плагіни та коди JavaScript для покращення візуального впливу. Однак у Pure CSS не використовуються будь-які плагіни JS, за винятком того, що використовується у спадному меню. Менше стороннього коду може забезпечити швидше завантаження сторінки та охайність коду.
  • Шаблони: Якщо ви не експерт з розробки власного макета для свого веб-сайту, Pure CSS може допомогти в цьому розділі. Веб-сайт містить ряд прикладів макетів, які відповідають веб-сайтам з різними цілями, як-от маркетинг, цільова сторінка тощо.
  • Чисті макети CSS

  • Конструктор шкіри: Якщо шаблони та стилі можуть задовольнити креативного дизайнера у вас, ви можете скористатися конструктором скінів Pure CSS для створення власної шкіри. Як ви можете здогадатися, розробник скінів не враховує ваш рівень досвіду програмування.
  • Використання CSS Skin Builder

    ДИВИСЬ ТАКОЖ: Іконні шрифти: плюси і мінуси Font Awesome Generator.

    Використання чистого CSS

    Як було зазначено раніше, Pure CSS має багато переваг у порівнянні з іншими фреймворками. Згадуючи те, що ми говорили раніше, ви можете використовувати Pure CSS за допомогою того ж методу Google Fonts. Ви повинні додати один рядок посилання на зовнішній файл, щоб додати стиль до вашої веб-сторінки. Ця функція дуже корисна, коли вам потрібно створювати веб-сторінки з одним файлом і коли у вас не вистачає місця для розміщення всіх файлів css (вважаю, що цього ніколи не станеться). Як Yahoo! крутить колесо проекту проекту, ви не хочете напружуватися через помилки завантаження або технічні збої.

    Якщо ви хочете використовувати повні шаблони CSS Pure CSS, ви можете додати наступний код на головну веб-сторінку. Ви також можете натиснути посилання на файл CSS і завантажити файл CSS, щоб його використовувати.

    [html]

    [/ html]

    У випадку, якщо ви просто хочете використовувати певні версії CSS, такі як меню, форми тощо, є спеціальні коди, доступні разом із виділеними файлами CSS. Список URL-адрес виглядає так:

    Чистий список посилань CSS

    Використання конструктора скінів Pure CSS також є легшим завданням, оскільки ви можете керувати властивостями елементів за допомогою інтуїтивно зрозумілих кнопок керування на сторінці конструктора скінів. Однак ми радимо вам завантажити файли CSS, щоб зрозуміти назви елементів. Як ми вже говорили, розміщення цих файлів розміром менше 2 Кб не буде займати місце на диску.

    Веб-сайт Pure CSS налаштований таким чином, що навіть новачок може вставити елементи на основі Pure CSS у свої веб-сайти. Ви можете побачити просту бічну панель ліворуч із переліком таких розділів, як форми, кнопки тощо. На кожній сторінці доступний попередній перегляд разом із HTML-кодом, щоб додати цей ефект на ваш веб-сайт. Таким чином, дуже легко вставити такі елементи на вашу веб-сторінку. Нижче показано попередній перегляд і код форми входу з одним типом входу.

    Попередній перегляд входу та зразок коду

    Висновок

    Аналізуючи всі функції Pure CSS, це один з оптимальних внесків Yahoo! для дизайну світу. Yahoo! Інтерфейс користувача, широко відомий як YUI, підтримує всі рядки, додані до Pure CSS, що робить фреймворк найкращим, коли є порівняння. Крім використання попередньо встановлених елементів, ви також можете налаштувати Pure CSS. Ви повинні привести себе на веб-сайт Pure CSS, щоб використовувати та дізнатися більше про просто компактний фреймворк. Повідомте нам свою думку щодо цього фреймворку, переглянувши приклади та використавши його у своєму проекті.

Поділитись
чірікать
Поділитись
Pin
3 акції

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

Спільний доступ - це турбота

Поділитись
чірікать
Поділитись
Pin
3 акції
Аватар Абхіджит Н Арджунан

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

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

Категорія

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

Теги

CSS

читач взаємодій

Що люди говорять

  1. Аватар ракеша кумараракеш кумар

    Дякуємо за публікацію цього чудового огляду чистого css. Оскільки я намагаюся розробити власні теми WordPress для спільноти, я думаю, що цей новий css від yahoo.com може мені дуже допомогти.

    відповісти
  2. Аватар ХаріДень

    Я вважаю це дійсно дуже корисним. Досліджу кожну з них пізніше.

    відповісти
  3. Аватар КессіКассі

    Ого. Це дійсно цікаво. Дякуємо, що поділилися цією інформацією.

    відповісти
  4. Аватар Реймонда СемаРеймонд Сем

    Чи б ви рекомендували Pure замість Bootstrap або Foundation на даний момент? Я виявив, що Bootstrap трохи менше, ніж оптимально задокументовано як перший користувач.

    відповісти
  5. Аватар СаджешаСаджеш

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

    відповісти
  6. Аватар СантошаSantosh

    Чудова стаття Abhijit. Я використав PureCSS, щоб створити тему для нової системи керування вмістом під назвою PyroCMS. Подивіться на [PyroPure]).

    Було дуже весело розвивати тему. Я думаю, що це було набагато легше, ніж інші фреймворки. Стиль також дуже адаптований.

    відповісти
  7. Аватар ЕрвінаЕрвін

    Вау .. Це те, чому цікаво вчитися, я знаю, що я не талановитий у програмуванні та дизайні, але це було цікаво робити. PureCSS, мабуть, те, що мені дуже потрібно.

    відповісти
  8. Аватар АдамаАдам

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

    відповісти

Додайте свій коментар Скасувати відповідь

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

Первинна бічна панель

популярний

Як збільшити швидкість широкосмугового доступу в Windows

10 найкращих програм для запуску Android 2021 року

Що робити після встановлення Windows 10 – поради та підказки щодо Windows 10

10 найкращих пошукових систем, які можна використовувати для приватного пошуку в Інтернеті

55 цікавих фактів про комп'ютер, які вразять вас

На що звернути увагу при покупці ноутбука – посібник із покупки ноутбука

Fusion Drive проти SSD – те, що вам ніхто не розповідає про Fusion проти SSD

Корисні інструменти

• Граматично – Безкоштовна перевірка граматики
• SemRush – Найкращий інструмент SEO, якому довіряють експерти
• Setapp – Єдина підписка для Mac і iOS

Модні теми

  • Android
  • інтернет
  • iPhone
  • Linux
  • Макінтош
  • безпеки
  • Соціальні мережі
  • Технологія
  • Windows

Варто перевірити

10 найкращих звукових еквалайзерів для Windows 10 (2022 Edition!)

14 найкращих скінів VLC, які настійно рекомендуються та безкоштовні

Логотип колонтитулів Текстовий логотип нижнього колонтитула

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

Про нас

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

У TechLila наша головна мета — надати унікальну інформацію, таку як поради та підказки щодо якості, навчальні посібники, інструкції для Windows, Macintosh, Linux, Android, iPhone, безпека та кілька різних підтем, таких як огляди.

зв'язку

  • Про нас
  • Контакти
  • відмова
  • Політика Конфіденційності
  • терміни

слідувати

Спеціальна тема з використанням Genesis Framework

Хмарний хостинг від Cloudways

Language

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Copyright 2012–2023 TechLila. Всі права захищені.