Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
Comparing Drupal CMS with Raw PHP coding. Presentation for AISEC conference ItEvent09 - http://aiesec-if.in.ua/news/88-it-event-anounce
inspired by Drupal Camp 2009 (http://camp09.drupal.ua/)
Видео: https://www.youtube.com/watch?v=IUtbbN9aevU
Веб-приложения становятся все больше и сложнее, так что многое остается вне нашего поля зрения. Поэтому фреймворки и приложения должны предоставлять дополнительные инструменты, упрощающие разработку и понимание того, что же происходит у них там — «под капотом». В ходе доклада я расскажу о таких инструментах: какими они могут быть, какие задачи решать, что необходимо для их создания.
SPA Meetup, 28 февраля 2015, Москва, Авито
Баба-Яга против! — Роман Дворнов, Ostrovok.ruYandex
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против».
On 7-8.th of June Drupal Camp Kyiv takes plase in Kyiv. It is the biggest conference in Ukraine devoted to the CMS/CMF Drupal.
This year DEWEB Studio participates actively in this conference: we act as sponsors, reporters and help with the organization of the arrangement.
http://www.youtube.com/watch?v=amGNl5tjXbg
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против».
Конференция FrontTalks, Екатеринбург, 19 сентября
Видео: https://vimeo.com/107694664
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Comparing Drupal CMS with Raw PHP coding. Presentation for AISEC conference ItEvent09 - http://aiesec-if.in.ua/news/88-it-event-anounce
inspired by Drupal Camp 2009 (http://camp09.drupal.ua/)
Видео: https://www.youtube.com/watch?v=IUtbbN9aevU
Веб-приложения становятся все больше и сложнее, так что многое остается вне нашего поля зрения. Поэтому фреймворки и приложения должны предоставлять дополнительные инструменты, упрощающие разработку и понимание того, что же происходит у них там — «под капотом». В ходе доклада я расскажу о таких инструментах: какими они могут быть, какие задачи решать, что необходимо для их создания.
SPA Meetup, 28 февраля 2015, Москва, Авито
Баба-Яга против! — Роман Дворнов, Ostrovok.ruYandex
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против».
On 7-8.th of June Drupal Camp Kyiv takes plase in Kyiv. It is the biggest conference in Ukraine devoted to the CMS/CMF Drupal.
This year DEWEB Studio participates actively in this conference: we act as sponsors, reporters and help with the organization of the arrangement.
http://www.youtube.com/watch?v=amGNl5tjXbg
В последнее время во фронтенде появляется столько нового и внедряется настолько быстро, что не все успевают осознать последствия. Хорошо это или плохо? Рассмотрим некоторые новинки с точки зрения «за», а главное – «против».
Конференция FrontTalks, Екатеринбург, 19 сентября
Видео: https://vimeo.com/107694664
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
1. AGILE THEMING WITH KALATHEME & PANOPOLY
Created by Andrey Stadnik / quazarweb.ru
2. Twitter Bootstrap
преимущества
1. Экономия времени
2. Динамичные макеты
3. Современный дизайн
4. Простота в использовании
5. Совместимость с браузерами
6. Opensource
project
3. Twitter Bootstrap
основные инструменты
1. Система сеток
2. Оформление
3. Утилиты адаптивности
4. Формы и компоненты
5. Javascript
4. Mobile First
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
5. Примеры сетки
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
6. Twitter Bootstrap
основные инструменты
1. Система сеток
2. Оформление
3. Утилиты адаптивности
4. Формы и компоненты
5. Javascript
7. Оформление Twitter Bootstrap
1. H1 H6
2. Встроенные элементы
<mark>, <del>, <blockquote>, <small>, <strong>
3. Стилизация списков
4. Стилизация таблиц
5. Быстрые float'ы (.pullleft,
.pullright)
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
8. Twitter Bootstrap
основные инструменты
1. Система сеток
2. Оформление
3. Утилиты адаптивности
4. Формы и компоненты
5. Javascript
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
9. Адаптивность Twitter Bootstrap
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
10. Twitter Bootstrap
основные инструменты
1. Система сеток
2. Оформление
3. Утилиты адаптивности
4. Формы и компоненты
5. Javascript
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
11. Формы и компоненты Twitter Bootstrap
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
12. Формы и компоненты Twitter Bootstrap
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
13. Twitter Bootstrap
основные инструменты
1. Система сеток
2. Оформление
3. Утилиты адаптивности
4. Формы и компоненты
5. Javascript
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
14. Javascript в Twitter Bootstrap
Модальные окна modal.
js
<button type="button" data-toggle="modal" data-target="#myModal">Запустить Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
16. Javascript в Twitter Bootstrap
Табы tab.js
<li class="active"><a href="#home" data-toggle="tab">Главная</a></li>
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
17. Javascript в Twitter Bootstrap
Всплывающие подсказки tooltip.js
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
18. Javascript в Twitter Bootstrap
Информеры popover.js
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover"
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you
open the speaker notes window (hit 's' on your keyboard).
29. Философия Kalatheme
Используйте один регион и панели
Используйте как можно меньше шаблонов
Используйте panelizer и page manager
Используйте Panopoly templates
Не нашли нужный шаблон сделайте его сами
Используйте панелс
Не используйте модули block, dispaly suite, context без надобности
33. Лучшая практика создания
Простая архитектура
Начните с чего нибудь простого
Используйте бутстрап
Не изменяйте бутстрап
Don't Hack Bootstrap
Используйте плагин Стили и управленние видимостью Kalatheme