Ускорение разработки приложений с помощью Bootstrap

Bootstrap — один из лучших и наиболее часто используемых интерфейсных фреймворков HTML/CSS/JS. Почти любой веб-разработчик, который создал один или два веб-сайта, слышал об этом популярном фреймворке. Он предлагает так много готовых компонентов и ресурсов, что Bootstrap может значительно ускорить разработку вашего приложения.

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

Я лично работаю с этим фреймворком последние 4 года на 90% своих проектов. В этой статье я хотел бы поделиться с вами несколькими советами, которые могут помочь вам ускорить разработку вашего приложения, не упустив при этом некоторые замечательные возможности Bootstrap.

Понимание Bootstrap

Несмотря на то, что это фреймворк, с которым очень легко начать, не обманывайтесь его простотой с первого взгляда. Прежде чем спешить с проектом, потратьте время на то, чтобы поиграть с фреймворком и получить представление о ключевых элементах его инфраструктуры и интересных компонентах. Это поможет избежать 10 самых распространенных ошибок Bootstrap.

Посвятите час чтению документации на сайте Bootstrap или узнайте больше из замечательного поста в блоге Toptal «Что такое Bootstrap?». Краткое руководство о том, что, почему и как. И отличная статья Bootstrap 3: советы и рекомендации, которые вы могли не знать на scotch.io.

Если чтение документации кажется вам скучным занятием и вместо этого вы предпочитаете читать код, то лучше всего начать с веб-сайта Bootstrap. Откройте свой веб-инспектор, просмотрите исходный код сайта и проверьте каждый блок кода и его элементы. Вероятно, это один из лучших и самых быстрых способов понять основы.

Изучите структуру страницы и узнайте, как устроены макеты.

 <div class="container"> <div class="row"> ... </div> </div>

… измените размер окна браузера или используйте инструмент Chrome Viewport Resizer, чтобы узнать больше об утилитах медиа-запросов.

 /* 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) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

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

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

Взгляните на W3Schools, где вы найдете полный справочник Bootstrap по всем классам CSS, компонентам и плагинам JavaScript — все с примерами «Попробуйте сами»:

• Объяснение системы сетки Bootstrap: сетки в Bootstrap
• Базовые классы CSS: типографика, кнопки, формы и элементы форм, вспомогательные классы, изображения, таблицы.
• Отдельные компоненты: глификоны, выпадающие списки, навигация.

Изучите исходный код и постарайтесь ознакомиться с как можно большим количеством имен классов. Узнайте об их вариантах использования — как, когда и почему. Это поможет вам быстрее двигаться вперед при написании HTML и стилизации элементов пользовательского интерфейса. Узнав больше об этих компонентах, вы сможете избежать раздувания таблиц стилей большим количеством ненужного повторяющегося кода. Держите его компактным и чистым, используя и повторно используя существующие компоненты, вместо того, чтобы создавать слишком много новых, которые делают то же самое, что и те, которые уже существуют в фреймворке.

Это особенно важно при работе в команде из нескольких разработчиков. Убедитесь, что вы не пишете тонны дублированного кода, создавая слишком много стилей для одного и того же случая каждый раз снова и снова при переводе новых дизайнов в код. Поддержание последовательной и хорошо документированной разработки пользовательского интерфейса с помощью руководств по стилю пользовательского интерфейса также может добавить пару узлов к продуктивной командной работе. Кроме того, вы обнаружите, что при добавлении новых функций или страниц в ваше приложение вы будете двигаться вперед с меньшим разочарованием. Я участвовал в более чем дюжине крупных проектов, и для сравнения я видел несколько случаев, когда фреймворк был буквально взломан, и каждый раз, когда добавлялся новый код CSS, он ломал пользовательский интерфейс на других страницах. Было бы довольно утомительно просматривать весь сайт и исправлять такие ошибки. Мало того, подумайте о стоимости и всех деньгах, потраченных на дополнительное время разработчиков и помощь QA.

7 самых распространенных ошибок в укладке, которые тратят время впустую

1. При центрировании текста или элементов div

Если вам нужно центрировать div и/или контент, вы можете использовать один из этих классов:

Использовать текстовый центр

 <p class="text-center">I am centered text</p>

… или центральный блок

 <div class="center-block">I am centered text</div>

не .center или <center>

2. При изменении размера шрифта

Если вам нужны шрифты меньшего или большего размера, вы можете использовать один из этих классов:

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

Если вам нужны заголовки большего или меньшего размера, не забывайте о .h1 , .h2 , .h3 , .h4 , .h5 , .h6 , .small . Используйте это так:

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3. При очистке поплавков или принудительной очистке дочерних элементов.

Нет необходимости создавать такие классы, как .clear, вместо этого вы всегда можете использовать Bootstrap .clearfix .

 <div class="clearfix">...</div>

4. При уничтожении полей класса .row

Просто используйте .clearfix вместо того, чтобы определять свои собственные стили (или, что еще хуже, использовать встроенные стили):

 <div class="clearfix">...</div>

5. При удалении или встраивании ненумерованных списков и других элементов

Удалите стиль списка по умолчанию и левое поле для элементов списка. Это относится только к непосредственным дочерним элементам списка. Если вам нужно применить то же самое для вложенных списков, вам также нужно будет добавить имя класса в них.

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

Точно так же для флажков или переключателей у нас есть .checkbox-inline и .radio-inline .

И вы всегда можете добавить .form-inline к своим формам (который не обязательно должен быть <form> ) для элементов управления с выравниванием по левому краю и встроенными блоками.

6. При изменении размера кнопок

Хотите большие или маленькие пуговицы? Добавьте .btn-lg , .btn-sm или .btn-xs для дополнительных размеров.

7. При плавании и выравнивании элементов вправо или влево

Плавающий элемент влево или вправо с классом. !important включен, чтобы избежать проблем со специфичностью. Классы также можно использовать в качестве примесей с любым препроцессором CSS.

Используйте .pull-right , .pull-left , .text-right , .text-left вместо .right , .left , .left-float , .right-float .

 <div class="pull-left">...</div> <div class="pull-right">...</div>

Легко выравнивайте текст по компонентам с помощью классов выравнивания текста.

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

Не настраивайте файлы ядра платформы напрямую

Работая над большими проектами, я обнаружил, что лучший способ эффективно использовать фреймворк — это строить его, а не настраивать его основные файлы напрямую. Эта концепция аналогична другим платформам и библиотекам, которые вы можете использовать для проекта.

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

Однако, если вы начинаете или работаете над большим сайтом с несколькими разработчиками или более, лучше всего держать вещи разделенными и хорошо организованными. Переместите файлы фреймворка за пределы основной пользовательской папки CSS и сохраните их в нередактируемой папке без версии и удалите неиспользуемый CSS с помощью плагинов Grunt или Gulp grunt-uncss или gulp-uncss. Еще одна альтернатива раздельному хранению — обслуживать через CDN. Наличие отдельного и нетронутого кода фреймворка дает вам лучший и более быстрый вариант при обновлении до последней версии. Это также помогает свести к минимуму ряд проблем с масштабируемостью и стилем или замедление при внесении дополнений с быстрыми непрерывными изменениями пользовательского интерфейса.

Используйте инструменты формирования шаблонов, такие как Yeoman или Slush, и менеджеры пакетов, такие как Bower, pip Python, NPM Node или Ruby Gems, поскольку они делают гораздо больше, чем просто добавляют файлы в путь вашего приложения. Я действительно ценю мощь Bower — он определенно может сделать немного больше, чем просто загрузить файл или два. Использование менеджера пакетов — хорошая идея, так как, скорее всего, сложность вашего проекта будет расти, а количество сторонних плагинов и то, как вы их поддерживаете, станет безумным и трудоемким. Bower поможет вам отслеживать каждый плагин и его зависимости, включая все, что связано с Bootstrap.

Используйте доступные ресурсы Bootstrap для разработки приложений

С популярностью Bootstrap приходит множество полезных ресурсов: статьи, учебные пособия, сторонние плагины и расширения, шаблоны, конструкторы тем и так далее. Ищете ли вы вдохновение или фрагменты кода, у вас будет все необходимое для ускорения вашего прогресса.

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

Ниже вы найдете список полезных ресурсов для начала работы:

Шаблоны, темы и плагины

Официальные темы от создателей Bootstrap: themes.getbootstrap.com.

Торговые площадки с премиальными темами и шаблонами Bootstrap: wrapbootstrap.com, themeforest.net, creativemarket.com/themes/bootstrap.

Бесплатные темы и шаблоны Bootstrap: startbootstrap.com, www.bootstrapzero.com, shapebootstrap.net/free-templates.

«The Big Badass List» — список из 319 полезных ресурсов Bootstrap: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI написан на чистом AngularJS командой AngularUI.

РеактJS

React-Bootstrap — это библиотека интерфейсных компонентов многократного использования. Вы получите внешний вид Twitter Bootstrap, но с гораздо более чистым кодом, через платформу Facebook React.js.

Джанго

Интеграция Bootstrap 3 с Django: https://github.com/dyve/django-bootstrap3

Джекилл

Jekyll-Bootstrap — это полноценная платформа для блогов на основе Jekyll.

Вордпресс

Стартовая тема WordPress Sage с современным интерфейсом разработки. На основе HTML5 Boilerplate, gulp, Bower и Bootstrap.

Материальный дизайн

Material Design for Bootstrap — это тема для Bootstrap 3, которая позволяет вам использовать новый Google Material Design в вашем любимом интерфейсном фреймворке.

Заключение

Bootstrap — одна из лучших доступных платформ, которая предлагает вам множество отличных инструментов и ресурсов для ускорения и ускорения процесса разработки приложений.

Это сэкономит вам много часов/дней работы при разработке и кодировании потрясающего пользовательского интерфейса. Каждый компонент и плагин тщательно задокументированы с живыми примерами и блоками кода для упрощения использования и настройки. Он настоятельно рекомендуется многими разработчиками и очень популярен как для прототипирования, так и для производства. Это очень хороший инструмент для создания адаптивных веб-сайтов, удобных для мобильных устройств. Bootstrap дает вам отличную отправную точку для многих типов проектов, возможность передать его дизайнеру и сказать: «Сделайте это модным!» без необходимости взламывать код. Самое главное, это позволяет вам сначала разработать структуру, а уже потом обращаться к шрифтам, цветам и причудливым стилям. Потратьте время на изучение того, что он может сделать, и подумайте, как использовать его наилучшим образом, чтобы быстрее добраться туда, куда вы хотите.