Comments 42
Как бы не ругали Bootstrap, я не собираюсь от него отказываться. Позволяет быстро решать задачи бизнеса.
Тут нужно не отказываться, а переучиваться нужно, и даже что-то переделывать, если продакшн это позволяет. А вот с иконками — засада, можно мигрировать на Font Awesome, но иконки будут уже отличаться от старых немного…
Там же есть отсылка на Open Iconic — вполне юзабельно, классы для 4ого бутстрапа там тоже вполне рабочие. Пользуюсь 4кой начиная с альфа версии в тестовой эксплуатации, сейчас проект переезжает в продакшн уже на релизе 4ки. По сравнению с тройкой — небо и земля, верстать фронтэнд стало намного проще.
Вы переделывали уже 3ью версию с иконками под новое? Суть в том, что компания просто напросто не даст времени переделывать под какие-то новые плюшки. А вот начать с нуля новый проект — это да, это стоит попробовать.
А чем Font Awesome не угодил? Слишком тяжёлый?
Проект начинался на тройке, в тестовой эксплуатации постепенно мигрировало на 4ку, по мере её разработки (с ранних альфа релизов 4ки), по этому переход состоялся довольно плавно и с минимумом трудозатрат. Собственно это веб-приложение, и на тройке были проблемы с адаптивной версткой при скрытии динамического левого (основного) и правого (списочного) меню.
Font Awesome действительно слишком тяжелый и не имеет выраженной «строгости». Нужно было что-то более лаконичное. Часть иконок была создана вручную под проект, но постепенно должно прийти к общему знаменателю (стилю), в опытной эксплуатации сейчас небольшой разнобой из наборов иконок, многого нет в обоих наборах шрифтов, нужно переделывать, но это меньшее из зол, чем если бы пришлось выкидывать все и изобретать заново.
На 4ке поддержка мобильных устройств значительно лучше, хотя без костылей не обошлось (для отмены :hover стиля на сенсорных экранах для боковых меню).
Спасибо. Сейчас как раз и думаю, что в самом начале проекта переделать на 4ку, пока проект ещё маленький.
многого нет в обоих наборах шрифтов

делайте кастомный хоть тем же icomoon.io и все
Для построения таких просты страниц можно использовать бесплатный mobirise, dragNdrop, готовые блоки, экспорт проекта сразу в FTP сайта,
$(document).ready(function(){
$('.header').height($(window).height());
})


мне казалось, что это уже моветон, CSS3 позволяет делать так:
.header {
  height: 100vh;
}
100vh проблемная практика, особенно на некоторых мобильных браузерах с их плавающими тулбарами.
UFO landed and left these words here
Раньше и flex почти никто не поддерживал из браузеров, теперь это уже вовсю применяют.

А если и делать на скриптах установку высоты по окну браузера, то желательно подписаться на событие resize:

$(document).ready(function(){
  $('.header').height($(window).height());
  $(window).on('resize', function(){
    $('.header').height($(window).height());
  }
})
Аналогия с флексом неправильная, потому что ноги проблем с vh растут не из поддержки, а прямо из спецификации. Эти единицы изначально задуманы проблемными.
Проблема получается не в единицах измерения высоты или ширины каскадных стилей, а как раз в мобильных браузерах и настройках масштабирования viewport, можно через media задать одни параметры для пк и другие для мобильных устройств.
Эти единицы изначально задуманы проблемными.

Как что-то может быть задумано проблемным? это всего лишь значение, эквивалентное 1% ширины/высоты viewport (спецификация www.w3.org/TR/css3-values/#vw).
Так что тут как раз проблема поддержки бразуерами этой технологии, а не наоборот!

Если все же делать скриптами, в обработчике resize наверно все же стоит избегать использование методов jQuery и не создавать на каждый чих новый объект:


$(function(){
    var header = $('.header').get(0);

    function resizeHeader() {
        header.style.height = window.innerHeight + 'px';
    }

    $(window).on('resize', resizeHeader);
    resizeHeader();
});
Это уже детали…
CSS для того и развивается, чтобы не загружать страницу скриптами.
Можно и так сделать
$(document).ready(function(){
  $(window).on('resize', function(){
    $('.header').height($(window).height());
  }
  $(window).trigger('resize');
})

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


На события которые могут выполняться несколько десятков раз в секунду(например: resize, scroll, mousemove) нежелательно вешать тяжелые обработчики, такие как $('.header').height($(window).height());, во-первых, не надо каждый раз искать элемент, во-вторых, jQuery метод height даже при получении значения делает много лишних действий, получает значение стилей, добавляет падинги итд, зачем все это, когда можно просто получить размер рабочей области через window.innerHeight, с установкой значения высоты чуть сложнее, но при box-sizing: border-box; достаточно установить стиль height.

Согласен, но событие resize не так уж часто происходит. А по событиям scroll и mousemove нельзя забивать callstack тяжелыми функциями, или как минимум ставить в очередь через setTimeout. И да, jQuery хоть и всемогущ, но всё таки тяжёл для простых вещей.
Жалко что глиф-иконки убрали оттуда, очень удобно было их использовать, а теперь на стороне искать придется
В самом деле?! Интересно, с чем связано. Скорее всего что-то с лицензией…
Спасибо за информацию!

Вообще жаль, в 3 версии было очень удобно, хотя и там (судя по сайту) были не все иконки…

Придётся искать способ подключать font awesome видимо как-то.
Да, в самом деле Glyph Icons больше нет в бутстрапе, сам расстроен. Из-за этого как-то не хочется переходить с 3ьей на 4ую версию…

А Font Awesome и начинал в составе Bootstrap, да и подключается он не так сложно на самом деле)
И сколько весит результирующий сайт, без учета графики? Если можно, с разбивкой vendor js, js, css, и т.п.?
Просто у меня есть опасения, что результатом будет очередное неповоротливое нечто, что будет загибаться на печатных машинках и мобильных устройствах. А ведь тут еще простой случай, а навесь доп. логики и каких-нибудь таблиц, все станет гораздо хуже…
Есть SPA-приложение на bootstrap 3.
Минифицированные файлы весят ~100кб с включенным gzip-сжатием на сервере Nginx. А так ~320кб. Туда входит: underscore-min.js, backbone-min.js, jquery.min.js, bootstrap.min.js, bootstrap.min.css + шрифты, свои стили и код самого приложения. А новый bootstrap мне кажется не сильно много. Тут еще главное, чтобы печатные машинки поддерживали его новые фишки типа flex
Понимаю, что говорю с переводом, но я скачал репозиторий и посмотрел:
1. Почему картинки в прямоугольных карточках помяты по вертикали? В 2018 году можно уже сказать пару слов про свойство object-fit или какое-другое решение проблемы.
2. Почему анимация при наведении на лица из «Our team» дергается, а текст в ней летает? Это прямо анти-паттерны анимаций в интерфейсах. И да, у меня в хроме анимация работает не так, как на гифках. Это баг?
3. При скролле к якорю заголовок соответствующей секции прячется под навигацией, а в ней самой не подсвечивается текущая секция. Налицо анти-паттерн, теперь по части юзабилити.
4. Почему при переходе в другую секцию с помощью навигации страница сначала дергается как бешеная, а потом уже начинает медленно прогручиваться к нужной секции? Хром последней версии, это не шутка про старый IE.
5. При уменьшении размера окна (по горизонтали) появляется небольшой скролл по горизонтали, а содержимое hero-хидера вылезает на следующую секцию. Положение рыжей кривой штуки, которая странно анимируется, также прыгает.

/зануда_моде_отключен

Такие статьи часто показывают как все просто, а потом оказывается, что есть куча каких-то косяков. Это не к тому, что бутстрап плохой, просто не стоит думать, что он решает абсолютно все проблемы.
Полезная статья для новичков — все наглядно расписано и по шагам.
Только одно но: несколько тегов Н1 на странице — это не есть гуд.
UFO landed and left these words here

Такое ощущение, что я попал в 2003 год: комментаторы кивают головами «хорошая, хорошая статья, ну… разве что недостатки мелкие есть». Да вы с ума сошли все: <font color="#3AC1EF"> и сингл-пейдж на jQuery, серьёзно?


Опять вы переводите всякий мусор, не понимая, что делаете. Здесь очень много вредных советов для новичков. HTML, CSS, JS — весь код кричит «я с позавчерашнего дня во фронтенде, но вот вам статья».

Да.
Ссылка выше ведет на проект spa-приложения интернет магазина, который весит 100кб (код после gzip-сжатия) и работает без лагов на компе 2001 года с характеристиками Celeron 848Mhz, Озу 128мб и с древней Opera 9
Так же там же есть ссылка на live-demo
Скриншоты
image

image

image

image
Ангуляр громоздкий и проблемный. Не травите новичкам будущее. Уж лучше jQuery, а то и React.
Я и не рекомендую Angular, я НЕ рекомендую делать SPA на jQuery, сам имел опыт уже, это быстро разрастается и превращается в большую кашу со спагетти кодом. Уж пусть лучше начинающие смотрят в сторону React, там всё намного проще, да и рынок вакансий им полон.

Все таки не чистый jquery, у вас там еще Backbone используется:



Интересно, почему вы не пошли дальше и не заиспользовали Backbone.Model и Backbone.View. Можно было бы избавиться от части своего кастомного кода, типа этого

Все таки не чистый jquery, у вас там еще Backbone используется

Я чуть выше про это написал .

Само приложение изначально задумывалось как кастомное. А подобная архитектура позволяет легко заменять компоненты(роутер и события) на компоненты от других библиотек, путем подключения пустого модуля и реализации подобного интерфейса.

Backbone.Model и Backbone.View это все-таки уже жесткая привязка к другой архитектуре.

У Backbone, роутер и события находятся в рамках одной библиотеки, что удобно. Решил по новой не писать, а взять уже готовое :)
Я хоть уже набросал свой сайтик на bootstrap 4, но все равно для новичков, вроде меня, интересно было почитать. Например, я поначалу сразу споткнулся на удаленном размере xs, пока не покурил более детально документацию. Зато сюда добавили размер xl, для очень больших экранов. А карточки думаю стоят более детального рассмотрения, может даже отдельной статьи, так как они заменили собой большинство компонентов 3й версии. Ну а вообще было бы интересно почитать статьи по реализации различных компонентов на bootstrap 4.
Очень странно. Я сейчас наткнулся на оригинал на медиуме и почитал комментарии. Мне показалось, или на русскоязычных сайтах люди куда строже относятся ко всему?)

Безусловно, техническая грамотность, уровень качества и все такое — это очень важно, но, как мне кажется, стоит не забывать получать удовольствия от того, что ты что-то… создал)

Например, любой приют для собак или подобное не очень прибыльное учреждение будет радо, если данная статья вдохновит какого-то новичка и он потратит час-два (день-два) и напишет им такой одностраничник бесплатно как проба пера) И им не сильно важно будет, что хэдер через js или css делается))

Вот ссылка, если кому хочется самому проверить)
medium.freecodecamp.org/learn-bootstrap-4-in-30-minute-by-building-a-landing-page-website-guide-for-beginners-f64e03833f33

Может в этом и отличие технического ресурса, от медиума, что комментаторы оценивают техническую сторону статьи, а не морально-этическую?

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

Зачем и откуда font color в html-коде? В оригинале этого нет, да и не должно быть. Про h3 и h1 уже указали. Тоже в оригинале нет этой ошибки. Зачем вообще менять код при переводе.
Only those users with full accounts are able to leave comments. Log in, please.
Information
Founded

July 27, 2015

Location

Россия

Website

ruvds.com

Employees

11–30 человек

Registered

18 March 2016