Как построить A? Адаптивная страница запуска Tesla из Bulma CSS

1656614904 kak postroit a adaptivnaya stranicza zapuska tesla iz bulma css

Содержание статьи

от ZAYDEK

1*jEoG8kpxxBob8I_6ai4WRw
1*MdW2WFa4Wi_rx_KLwcnLew
1*nJPbo3jYDSo7JORmoMZpkQ

0-60 за 1,9 с?

Чтобы ускориться появление устойчивого веб-дизайна

Прежде чем перейти к статье, я просто хочу поделиться, что я создаю продукт, и я хотел бы собрать некоторые данные о том, как лучше обслуживать веб-разработчиков. Я создал краткую анкету, чтобы проверить ее до или после прочтения этой статьи. Пожалуйста, посмотрите это – спасибо! А теперь вернемся к нашему обычному запланированному программированию.

Привет интернет! (Привет, Илон!)

Я здесь, чтобы избавить вас от убеждения, что создание веб-сайтов должно быть сложным. Кроме того, за считанные минуты мы, простые смертные, научимся создать красивую и (!) чуткую страницу запуска Tesla с помощью Bulma.

Картошка?! Bulma – это фреймворк CSS и детище @jgthms. ?

1*QQHwKzcZaWbWrew33_bV4A

Я также преподавал бесплатный полноценный курс Bulma CSS на Scrimba.com, где мы создаем эти? дизайны. Нажмите здесь, чтобы зарегистрироваться! ?

1*MkSQUnosnWEuIIvoiUxadA

Scrimba.com – это платформа нового поколения для разработчиков интерфейса, чтобы записывать и делиться своими веб-сайтами в виде интерактивных скринкастов! ?

Бульма? ¯\_(ツ)_/¯

Бульма решает много проблем – много. Независимо от того, нужен ли вам визуальный компонент или хотите понять, как компонент может быть кодифицирован, с помощью передового опыта и лучшей в своем классе документации, Bulma здесь, чтобы помочь! ?‍?

Bulma даже не является версией 1.0, и имеет широкое распространение с более чем 150 тысячами загрузок в месяц и 26 тысячами звезд на GitHub. Думайте о Bulma как о конкуренте Bootstrap, несмотря на то, что это просто CSS. ? Посмотрите, ма, нет YavaScript!

Как работает Bulma?

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

Эти семантические шаблоны можно рассматривать как соединительные строительные блоки, используемые для быстрого создания веб-сайтов! ⚡️ Эти компоненты также быстро реагируют, что означает, что мы можем больше сосредоточиться на нашем контенте, чем на коде.

Растерянный? Начать? здесь, чтобы сначала изучить основы Bulma.

Что на счет того? дизайн?

1*MdW2WFa4Wi_rx_KLwcnLew
Хотите научиться создавать эту трехмерную графику в HTML и CSS? ? Дай мне знать! ?

Этот дизайн можно лучше понять как три части:

☝️Чуткий фон
✌️ Компоненты Bulma+ модификаторы
? CСеть СС

Посмотрите поближе… видите что-то? The фона не является непрерывным! ? Это не ошибка; команда Tesla оптимизировала настольные компьютеры, планшеты и мобильные устройства. Имея это как нашу базу, мы добавим Bкомпоненты и модификаторы ulma, затем используйте CСеть СС для достижения сложного адаптивного дизайна для спецификации.

☝️ Чуткий фон

Это такие фактический фоновое изображение я ??????? с tesla.com! ?‍☠️ Оооо… как создать адаптивный фон? Использование медиа-запросов, ovs! Медиа-запросы позволяют нам при определенных обстоятельствах заменить CSS.

1*JzP04PS4J9ezcbeH0hlMqQ
1*OddPEy3sFCb-9PYQ5Y_zNQ
1*hPBa5yyxaI9K4ROCdJHNcg

И медиа-запросы мощны; мы можем заменить CSS в зависимости от воспроизведенного соотношения сторон веб-сайта, соотношения сторон устройства или простой: ширины визуализации веб-сайта. Да – давайте с этим.

Сначала мы начинаем с одного из компонентов Bulma, .heroи использовать один из его модификаторов, is-fullheightдля создания полноэкранного раздела. Затем мы назначаем разные фоны для общей ширины с помощью медиа-запросов:

1*TOI29Yr3PqCc_GBkOJnVNA
1337 hax ?‍?

Прекрасно – теперь наш веб-сайт меняет фоны на 1024px и 768px. Иногда, когда это случается, появляется вспышка белого цвета black скрывает это. И center и cover просто помогите выровнять и сфокусировать изображение.

Хочешь – верь, хочешь – нет, background является сокращением 8 свойств CSS: ?

1.️ background-clip
2. background-color
3. background-image
4. background-origin
5. background-position
6. background-repeat
7. background-size
8. background-attachment

Мы воспользовались -color, -image, -positionи -size!

✌️ Компоненты Bulma + модификаторы

Вот где Бульма становится интересной. Какая из них настоящая стартовая страница?

1*JV4-eSj3Lqbwx-NijKOBsQ
1*ctTD3MVhZA0i-ErZqbFMnA
Выбери один; красная таблетка или синяя таблетка? ?

Левая аутентичная! ٩(;ʘіʘ;)۶ Подождите… как Bulma может быть настолько универсальным? Ну – помните модификаторы? Да, имея достаточно модификаторов в нашем распоряжении, мы можем создать разнообразную эстетику, даже не редактируя источник Bulma.

Теперь, без лишних слов, я представляю стартовую страницу как ASCII! ??

1*UTyZczNl2EoU6a9JjjAQ4w
Что, если бы мы могли написать такой код…?

Пока вы можете игнорировать идентификаторы, завернутые в скобки. Кроме того, это некоторые из доступных компонентов Bulma. А представьте себе это? Компоненты Bulma также отзывчивы! Вау

Имейте в виду, что это гораздо менее кратко, чем фактическая реализация, смотрите здесь. Я обфусцирую модификаторы и посторонний HTML, чтобы показать, как работает Bulma; мы соединяем компоненты вместе как LEGO, но для создания веб-страницы!

А модификаторы – это то, как мы можем достичь эстетики, подобной Tesla, несмотря на то, что Bulma не имеет ничего общего с Tesla. На протяжении всего кода обратите внимание на широкое использование has-* и is-*; это дает нам разнообразную эстетику.

Вы можете нажать? здесь, чтобы узнать больше о компонентах Bulma.

? CSS Grid

Нужна ли нам CSS Grid? Я не уверен, (>﹏<), но я обнаружил, что программировать адаптивный дизайн для спецификаций гораздо легче, чем я ожидал, используя сетку, чем с помощью других методов. Итак, вот где в центре внимания эти идентификаторы:

1*6pNXOd66bj55SZJX34FkBg
1*fvpX6HYKnTYpuICtSixYvA

Хе-хе-хе…так что у нас есть удостоверение личности #a через #eс #a являясь некоторым маркетингом, и #e быть кнопкой «Забронировать сейчас». Желательный эффект заключается в том, что на мобильном устройстве мы подбираем кнопку «Забронировать сейчас». #b, #cи #d.

3…

2…

1… ?

1*7h9GZsbCFrA8yEQR1xrdbg
га? ? Я ожидал чего-то «тяжелого»

На первом слайде мы назначаем идентификаторы каждому из идентификаторов с помощью grid-area. Затем мы общаемся с #grid *форма* нашей сетки с помощью ASCII! ? Это сетка по умолчанию; для настольных компьютеров и планшетов.

Последнее – помните медиа-запросы? ЯС! Все, что нам нужно сделать это передать форму нашей сетки для мобильных устройств. Представьте это… мы пишем один медиа-запрос, чтобы заменить форму нашей сетки для мобильных устройств. ?⚡️

Полный интерактивный код доступен в курсе Bulma? здесь.

Или… А ПОРШЕ?!!? ?

1*GY_GtCVBE0wQ0wShYBBVHA
Хотите научиться создавать эту трехмерную графику в HTML и CSS? ? Дай мне знать! ?

Никита Руденко @rdnkta, новичок в #100DaysOfCode(!), создал это после окончания курса и поделился со мной! На здоровье! ?

Поздравляю! Спасибо, что прочли! 6(^ω^)9

Сейчас феноменальное время, как никто другой, чтобы начать разработку интерфейса. С введением спецификаций CSS, таких как Flexbox и CSS Grid и фреймворков, таких как Bulma, создание для Интернета еще никогда не было более доступным!

Нравится эта статья? Есть еще одна подобная статья! Нажмите кнопку ? здесь!

1*zQKHJaZS8s5iXvBBYP3FOg

Добавить комментарий

Ваш адрес email не будет опубликован.