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

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

Як і всі інші речі у світі дизайну та розробки, 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 може допомогти в цьому розділі. Веб-сайт містить ряд прикладів макетів, які відповідають веб-сайтам з різними цілями, як-от маркетинг, цільова сторінка тощо.



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



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

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

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

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

[html]

[/ html]

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



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

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



Висновок

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