Как быстро создать прототип приложений с помощью CSS Grid и CSS переменных

1656588975 kak bystro sozdat prototip prilozhenij s pomoshhyu css grid i
1*mrEbsfQRmq0l32skF3kPOw
1*r7YvAzkhlZ2E8Yjfdh-SBw

CSS Grid и CSS Variables представляют собой огромные выигрыши для разработчиков интерфейса. Первый делает очень простым создание макетов веб-сайтов, а второй придает силу переменным в таблице стилей.

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

Пример, который мы будем использовать, взят непосредственно из моего бесплатного курса о том, как создать приложение для чата с помощью React.js и API Chatkit:

Нажмите на изображение, чтобы попасть на курс
Нажмите здесь чтобы попасть на курс.

Так что если вы предпочитаете просмотр интерактивных скринкастов, а не чтение, посмотрите лекции № 15 и 16 моего курса здесь. В нем вы также получите доступ к коду, чтобы вы могли экспериментировать сами. Не стесняйтесь делать это, соблюдая это руководство.

Установка сеточного контейнера

Наша программа была создана с помощью CSS Grid, модуля, позволяющего легко создавать макеты и перемешивать их. Это особенно полезно, если вы пользуетесь преимуществами grid-template-areas свойство, которое я покажу вам, как мы используем далее.

Давайте сначала посмотрим, как выглядит наша начальная программа чата:

1*mrEbsfQRmq0l32skF3kPOw

Если мы откроем инструменты разработчика Chrome, мы сможем проверить, как была построена базовая сетка. Как видите, он имеет шесть строк и шесть столбцов:

1*_eNLVoRwxgaOftKEfv5i_w

Код для создания такой сетки такой:

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
}

Сначала мы устанавливаем контейнер как сетку. Тогда мы говорим, что нам нужно шесть столбцов, и каждый из них должен быть единицей дроби (1fr)широк. Одна дробная единица означает одна часть имеющейся площади. Итак, мы делим ширину на шесть одинаковых по ширине дробей и даем каждому столбцу по одну дробь.

Что касается строк, то мы не делим их все на одинаковую высоту, поскольку последний ряд не так высок, как другие. Мы прямо сказали, что так будет 60px высокий вместо 1fr высокий:

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

Теперь, когда мы изложили структуру нашей сетки, мы можем перейти в следующую часть: позиционирование.

Размещение элементов сетки

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

1*p_s6nyIhS8XqWoSaLEkBow

Для того чтобы предметы располагались на указанных выше позициях, нам нужно будет использовать grid-template-areas свойство и постройте визуальное представление сетки в нашем styleeheet:

.app {  
  display:                grid;  
  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  
  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";
}

Каждая из строк представляет строку, а каждый из символов — ячейку в сетке. Символы имеют семантическое отношение к представляемым им элементам (список комнат, список сообщений, новая форма комнаты и отправить форму сообщения).

Теперь для того, чтобы разместить наши элементы в соответствии с нашими grid-template-areas нам нужно будет использовать символы как их grid-area значение. Нравится это:

.new-room-form {  
  grid-area: n;  
}

.rooms-list {  
  grid-area: r;  
}

.message-list {  
  grid-area: m;  
}

.send-message-form {  
  grid-area: s;  
}

Эти классы, конечно, также были использованы для наших элементов сетки в нашем HTML. Однако я не буду вдаваться в подробности, поскольку я предполагаю, что вы знаете, как добавлять классы в теги HTML.

После этого мы готовы начать экспериментировать с макетом. Просто поменяв местами несколько символов в grid-template-areas значение, мы можем полностью изменить макет.

1*ufM_xVxd2GJ79JeOGd2v1w

На изображении выше я пробую четыре разных макета, меняя положение список комнат предмет и новая форма комнаты пункт. Единственное, что я изменю, это grid-template-areas собственность.

Ниже приведены четыре вариации. Попробуйте и посмотрите, можете ли вы отобразить каждый из них в соответствующий макет:

grid-template-areas:  
    "n m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r s s s s s";

grid-template-areas:  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "r m m m m m"  
    "n s s s s s";

grid-template-areas:  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s n";

grid-template-areas:  
    "m m m m m n"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "m m m m m r"  
    "s s s s s r";

Если вы пройдете мой курс программы для чата React.js, вы получите собственную копию кода, чтобы вы могли изменить макет именно так, как вам нравится.

Изменение цветов с помощью сменных CSS

Теперь мы собираемся изменить цвета программы с помощью сменных CSS. Если вы ранее не сталкивались с переменными CSS, быстро посмотрите на изображение ниже, поскольку они суммируют суть:

1*03NPOHNBLqOn5r22HrvlyQ
1*de4-CIacmaMo9PO6PlTkyQ

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

Давайте посмотрим, как мы оформили нашу программу с помощью переменных CSS, начиная с объявления переменных:

:root {  
  --main-color:            #5ea3d0;  
  --secondary-color:       white;  
  --main-text-color:       #3e5869;  
  --secondary-text-color:  #b0c7d6;  
  --new-room-form:         #d9e1e8;  
  --send-message-form:     #F5F5F5;  
}

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

1*1W0jteJO2F9bdBqw_IC1aQ

Вот как это воспроизводится в коде:

.rooms-list {  
  background: var(--main-color);}

.message-text {  
  background: var(--main-color);  
}

Прелесть переменных заключается в том, что теперь мы можем изменить объявление, а затем это изменение повлияет на всю программу. Давайте, например, сделаем:

:root {  
  --main-color: red;  
}

… что приводит к следующему:

1*zsR6ihPeq1AcaOWdglTL-Q

Теперь мы можем просто изменить все объявления переменных в файле :rootи таким образом изменить весь внешний вид нашей программы.

Давайте, например, найдем хорошую палитру в Интернете и просто используем ее в нашем приложении:

1*0qHtPYV_gzrQr-5F7-lJqA

Мы заменим некоторые цвета в нашем :root с теми из палитры выше:

:root {  
  --main-color: #5ea3d0;  
  --secondary-color: white;  
  --main-text-color: #3e5869;  
  --secondary-text-color: #b0c7d6;  
  --new-room-form: #d9e1e8;  
  --send-message-form: #F5F5F5;  
}

Это приводит к совершенно другому типу чата:

1*NB4_DfXxI_ZnqDSPI4QEiA

Сочетание сетки и переменных

Если мы объединим это с изменением макета с помощью CSS Grid, мы получим две уникальные чат-приложения, которые почти не похожи друг на друга. Давайте сделаем это:

1*PrcUX5S8Eip5NmZ72L62eQ
1*r7YvAzkhlZ2E8Yjfdh-SBw

Вот как выглядит наша начальная точка по сравнению с нашим последним примером.

:root {  
  --main-color:           #ff66ff;  
  --secondary-color:      #fbd8fb; 
  --main-text-color:      #3e5869;  
  --secondary-text-color: #d8b2ff;  
  --new-room-form:        #ffb2ff;  
  --send-message-form:    #d8b2ff; 
}

.app {  
  display: grid;  
  grid-template-columns: repeat(6, 1fr);  
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;  
  grid-template-areas:  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m r r"  
    "m m m m n n"  
    "f f f f f f"; 
}

Достаточно круто, а?

Теперь я советую вам пройти весь мой курс. В нем я расскажу вам о создании этой программы с помощью React.js и API Chatkit. Я, конечно, поделюсь с вами полным кодом, чтобы вы могли самостоятельно поэкспериментировать с этим дизайном.

1*zcRbKlNUmWNxStHWrQJEOw

Спасибо, что прочли! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *