99Lime HTML KickStart - че це Мікроогляд
Я дуже швидко перерахую всі можливості 99Lime:
Давайте подивимося на стилістику стандартних HTML елементів, бо вони просто все оформлені за своїм, і цей ресет дуже гарний. Параграфи, заголовки, страйки
Списки нумеровані та зі своїми іконками:
До речі, ось як пишуться списки в самому коді:
Як можете помітити, нічого зайвого взагалі писати не треба, саме це головна риса 99Lime на відміну від Bootstrap, та клас треба згадати, але в Bootstrap класи мають складніше ієрархії, до того ж до версії 2 все трохи там змінилося.
Менюшки, виглядають дуже смачно:
Навіть іконки підібрані свої, проте там використовується безкоштовний набір іконок про них трохи згодом.
Таблички теж солодкі, проте на відміну від Bootstrap, в 99Lime немає виділення кольором поточного рядка, а в twitter Bootstrap це виконано за допомогою JS, здається, це реалізується легко засобами CSS, але сперечатися не хочу.
ToolTip. Підказки в 99Lime дуже смачні:
Як видно можна вставляти медійку, але я пам'ятаю в Bootstrap це реалізовувалося через попу, і HTML текст тултіпа треба було впихати в текст атрибута, це убого. Тут же підказки реалізовані дуже правильно і дуже красиво, ось HTML код підказки:
Як видно, хлопці вдалися до IDшника.
HR - в 99Lime 3 заготівлі.
Іконки використані в проекті від IcoMoon, монохромніцілком говорять, 500 штук.
А ось у такий нехитрий спосіб ми вставляємо іконку в текст:
Це іконка Твіттера:
Далі як видно код у 99Lime:
Скромно та вкрай зрозуміло.
Кнопки 99Lime - це коронка, точніше козир, такої краси немає навіть у Bootstrap, точніше там звичайно можна так зробити, але код буде потворнішим, ось як виглядають кнопки:
Крім того що можна регулювати закручення, іконки, і колір та інші стилі, так само можна об'єднувати кнопки в кнопкові бари. Мені не терпиться подивитися код простої червоно кнопки .red:
Жахливо просто, чи не так. ВЕЛИКА ТА ЧЕРВОНА
А це код бару для кнопок:
Здається треба було чекати купи коду, а ні.. все коайне просто. список кнопок.
Як і в Twitter Bootstrap в 99Lime можна створювати панельки табів:
"Шлях в ієрархії" це майже таби, але як і в TB (Twitter Bootstrap) вони виділені своїм класом:
Так як 99Lime все-таки мабуть дорівнював звання CSS Framework, то в ньому природно зашили сітку. Куди ж без неї рідна:
Картинки - другий козир 99lime:
Давайте подивимося як оформлена галерея в HTML коді?
Та що ж це таке? вкрикните ви.. це ж базовий голий HTML, а де все? Де відступи, де бордер-відз?
Так, можна вирощувати як дівчинці, нічого не треба писати зайвого, все вже написано за вас, добрі люди зробили ресет за вас, а вам залишилося лише закачати картинки. =)
Верстка перетворюється на казку ... це правда? Справжні верстальники звичайно мені плюнуть в обличчя, але тепер я вам покажу те, що і не прийшлося вам в страшному сні, ось як робиться слайдшоу на 99lime:
Ну що .. вірщіть! ААААААя-яа-яа-яа-яа.. Як просто! Губка Боб !
Звичайно мені не передати вам тут ефект скролла, його ви можете оцінити тут
Слайдити можна будь-який HTML-код і навіть Iframe, Відео, Картинки і т.п.
Якщо ви думаєте, що забудуть хлопці Форми, то ні, форми так само виконані на відмінно:
Якщо ви думаєте що для нотисів наприклад треба все одно чогось складного придумати, десь має бути милиця, а ні, ось код, просто клас такий:
Та дещо там ще залишилося, але я залишу це вам не почитати. А тепер найважливіше, завантажуємо архів, бо як ви знаєте казок не буває, а у нас відчуття що ми в казці.
250кб. Усередині немає нічого страшного, якісь вихідники JS, CSS, які треба класти у свій проект.
Ну що, може бути каверза в Ліцензії?
ТЕ SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR PARTICULAR PURPOSE AND NONINING IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN Action OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OR IN CONNECTION WI THE SOFTWARE.
Мабуть що сам я спробую їх на одному проекті і порівняю з Twitter Bootstrap. Пишіть, хто вже стикався, і які проблеми виникали.
Дякую за наведення подкасту: зроби мені гарно.