Impact Studios (в состав которой входят 3 ключевых сотрудника Дэниела Хонга, Эллиота Ваксмана и Саада Миана) разработала веб-приложение, помогающее бороться с изменением климата. Наш мыслительный процесс включал в себя предоставление пользователю возможности нести ответственность за свой углеродный след, а также сигнал добродетели своим друзьям и близким последовать их примеру. Так родилось наше веб-приложение для отслеживания выбросов углекислого газа!
Во время разработки углеродного трекера мы с командой решили создать простой в использовании опрос; что позволит пользователю вводить информацию о своей повседневной жизни. Затем информация будет преобразована для передачи выбросов углекислого газа пользователем с использованием фантастического API под названием Carbon Interface. Чтобы создать простой опрос, мы решили, что использование CSS-фреймворка будет лучшим способом приступить к стилизации. Фреймворк CSS, который помог нам в разработке нашего трекера выбросов углекислого газа, называется Materialize CSS. Кроме того, во время наших групповых обсуждений мы пришли к выводу, что нам нужно сделать модальное всплывающее окно со встроенной в него формой, которая позволит пользователю использовать один простой щелчок для доступа к нему. Выбранный нами CSS-фреймворк идеально подходил для работы…
Чтобы сначала использовать Materialize, вы должны перейти на https://materializecss.com/
- Нажмите «Начать», чтобы перейти на страницу загрузки и настройки. Выберите ссылку CDN (минимизированную), чтобы скопировать и вставить ее в файл index.html.
Как только структура CSS будет связана с вашим HTML, вы можете искать документацию (расположенную справа); который будет содержать множество шаблонов для кнопок, форм, модальных окон и т. д.
В процессе поиска среди множества предоставленных шаблонов CSS вы сможете копировать и вставлять код HTML и код Javascript для личного использования. Во время нашей разработки мы могли манипулировать шаблонами в соответствии с нашими потребностями.
После того, как вы скопировали и вставили код в свои собственные файлы, он должен выглядеть примерно так, как показано выше.
Вот конечный продукт:
Некоторые сомнения или недостатки Materialize CSS Framework заключаются в следующем:
Фреймворк имеет строгую эстетику дизайна, а это означает, что вы можете легко сказать, что это побочный продукт Materialize. Фреймворк не дает полной свободы дизайна. Шаблоны, перечисленные в Materialise, начинают выглядеть повторно использованными.
В целом, использование CSS Framework было исключительным для нашего веб-приложения. Это позволило создать удобное всплывающее окно и простую в использовании форму для пользовательского ввода. Будущие цели для веб-приложения будут заключаться в дальнейшем повышении доступности для пользователей и дальнейшей интеграции большего количества шаблонов из Materialize CSS для дальнейшего улучшения красоты веб-приложения!
