Начало нового проекта всегда связано с некоторой повторяющейся работой. И это потому, что большинство наших проектов на начальном этапе используют одну и ту же минимальную кодовую базу, лучшие практики и принципы. Все мы знаем, что «заново изобретать колесо» — это не только лишняя, но и довольно скучная работа. По этой причине существуют инструменты, которые могут помочь нам в решении этой проблемы.
Boilerplate и Bootstrap являются чрезвычайно ценными инструментами, когда нам нужна стартовая основа для наших новых проектов. Но вопрос в том, какой выбрать, а какой лучше для меня и моего проекта? Кажется, что многие люди смущены и смущены, чтобы дать адекватный ответ. Вот почему в этой статье я постараюсь прояснить ситуацию и помочь вам принять правильное решение для вас.
Наиболее очевидный ответ на поставленный выше вопрос: используйте то, что лучше всего соответствует вашим потребностям. Но это довольно общий совет, и нам нужно что-то более всеобъемлющее и пояснительное. На самом деле, в нашем случае у нас есть не только две, но четыре возможности: мы можем использовать Boilerplate, мы можем использовать Bootstrap, мы можем использовать оба из них или ни одного из них. Чтобы решить, какой вариант лучше для вас, позвольте мне дать вам
более подробное объяснение.
1. Использование Boilerplate
Boilerplate — это интерфейсный шаблон кикстарта, содержащий ряд передовых методов и общих включений. Он предлагает общую структуру файлов / папок, HTML5-готовый шаблон и основные глобальные конфигурации на стороне сервера. Это как план для вашего дома, но без строительных блоков. У вас есть идея, что вы собираетесь построить, и вы сделали все подготовительные шаги, но у вас нет материалов, необходимых для реального строительства дома. Вы можете включить «отсутствующие» компоненты HTML / CSS / JavaScript из любого места, в том числе из Bootstrap.
На первый взгляд Boilerplate может показаться довольно простым шаблоном, но на самом деле он дает вам много преимуществ, которые нельзя увидеть сразу. Давайте посмотрим на некоторые из них:
- HTML5-готовый шаблон плюс базовая структура для ваших файлов и папок
- Готовые к использованию оптимизированные для печати стили печати
- Кросс-браузерная совместимость
- Оптимизация мобильного браузера
- Прогрессивное улучшение и постепенная деградация
- Лучшие практики конфигурации серверов
- Оптимальные правила кэширования и сжатия
- Оптимизированный код фрагмента Google Analytics
- и более…
Вы получаете все эти возможности по умолчанию, без необходимости написания одной строки кода. А вот содержимое загрузки по умолчанию:
- css — каталог, содержащий normalize.css и main.css со значениями по умолчанию Boilerplate, общими помощниками, медиазапросами и стилями печати.
- doc — каталог, содержащий всю документацию Boilerplate. Вы можете использовать его в качестве места для документации вашего собственного проекта.
- img — пустая папка для ваших изображений
- js — каталог, содержащий main.js для вашего пользовательского кода и plugins.js, содержащий код для всех ваших плагинов. Также есть подпапки Modernizr и jQuery, размещенные в подпапке vendor.
- .htaccess — настройки веб-сервера по умолчанию для Apache. Для других серверов есть репозиторий Server Configs .
- 404.html — очень простая ошибка страницы
- иконки Apple Touch
- crossdomain.xml — шаблон для работы с междоменными запросами .
- favicon.ico
- humans.txt — файл для включения кредитов для вас и вашего проекта.
- index.html — HTML-готовый шаблон по умолчанию, база всех страниц вашего сайта.
- robots.txt — файл для включения любых страниц, которые вы хотите скрыть от поисковых систем.
С этого момента вы можете начать создавать свой веб-сайт, просто добавив свой собственный код и компоненты, которые вы выбрали для использования в своем проекте.
2. Использование Bootstrap
Bootstrap — это интерфейсная среда и набор веб-дизайна для создания современных веб-сайтов. С Bootstrap вы можете создать целый веб-сайт с нуля. Таким образом, он дает вам не только отправную точку, но и все строительные блоки, которые могут вам понадобиться для создания вашего сайта. Загрузочный файл Bootstrap содержит только файлы для компонентов CSS и JS, а также значок шрифта. В конце концов, вы также можете загрузить базовый шаблон для начала работы. Здесь нет структуры файлов / папок или каких-либо конфигураций на стороне сервера.
Преимущества / Основные характеристики:
- Мобильный первый подход
- Совместимость браузера
- доступность
- CSS сетка
- Готовые компоненты и утилиты
- и более…
Компоненты и утилиты перечислены ниже:
- Grid — утилита для выкладки вашего дизайна
- Иконки — независимый от разрешения набор иконок
- CSS базовые классы стилей
- Компоненты CSS — стилизованные компоненты HTML
- JS виджеты — хороший набор интерактивных компонентов
- Начальные шаблоны и примеры
Как видите, Bootstrap предоставляет все компоненты, которые вы можете начать использовать прямо сейчас для создания своего веб-сайта.
3. Использование Boilerplate плюс Bootstrap
Как насчет использования обоих? Нет проблем. Это вполне возможно и легко сделать. В случае, если вам нужны оба, проект Initializr поможет вам автоматически интегрировать Boilerplate и Bootstrap. Используя Initializr, вы можете создать собственную загрузку, объединяющую все хорошее в одном пакете. Вы можете использовать эту опцию, если вы хотите получить лучшее из обоих миров.
4. Использование собственного решения Boilerplate
Некоторые люди не любят такие продукты, как Boilerplate и Bootstrap. Их аргументы в том, что такие инструменты содержат слишком много ненужных вещей внутри. Если вы думаете так же, то вы должны знать, что вы не ограничены в использовании чьей-либо работы. Вы можете легко собрать лучшие практики для себя и поместить их в свой собственный пакет кикстарта. Таким образом, вы получите только то, что вам нужно, и ничего больше.
Вердикт
Правильный выбор зависит от двух вещей. Во-первых, вы должны знать свои цели, потребности и требования проекта. И во-вторых, вы должны знать, что каждый инструмент может предложить вам, его сильные и слабые стороны. Очевидно, я не могу помочь вам с первым, но для второго я могу дать вам краткое резюме. Вот основные контрольные точки:
- Вы не можете создать сайт с Boilerplate — это только отправная точка.
- С помощью компонентов и утилит Bootstrap вы можете создать целый веб-сайт с нуля.
- Boilerplate больше ориентирован на сервер — хороший стартовый шаблон, если вы работаете с серверными технологиями, такими как PHP.
- Bootstrap — это клиентское решение — полный набор инструментов для создания клиентских веб-сайтов.
- Boilerplate — это только начальная кодовая база, и вы можете добавить любые компоненты, которые вам понадобятся позже.
- Bootstrap, напротив, имеет полный набор готовых компонентов, которые вы можете использовать прямо сейчас.
- Вы можете комбинировать Boilerplate с Bootstrap, чтобы получить все преимущества обоих.
- Вы можете создать и использовать свой собственный шаблон шаблона, включая только то, что вам нужно.
В качестве последних слов я бы сказал, что Boilerplate и Bootstrap — это замечательные инструменты, и у вас есть множество вариантов их использования.
Я надеюсь, что эта короткая статья поможет вам выбрать лучший вариант для вас.