Создание мобильного приложения на Meteor.js. Часть 3/15 — Подключение materializecss к проекту.

Автор Vera Abramova
Создание мобильного приложения на Meteor.js. Часть 3/15 — Подключение materializecss к проекту.

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

Лодзь Что такое сервисы для ответа на этот вопрос. Я приведу такое метафора HTML — это кости нашего нашей странице assess — это кожа одежда то есть внешний вид с помощью SS можно задавать цвета размеры шрифтов и тому подобное стиле. Что такое Services Framework — это набор классов.

Давайте познакомимся с материалом для этого необходимо перейти на сайт материлась ss.com и здесь.

Здесь мы можем по разделам видеть, что для нас приготовили уже набор цветов. То есть — это наборы классов которые мы будем использовать чтобы окрашивать в те или иные цвета существующие элементы так же материала из предлагает сетку различные вспомогательные функции, но и конечно набор элементов которые мы всенепременно будем использовать кнопочки различного рода хлебные крошки внешний вид карточек. Ну в общем. Зайдите Познакомьтесь для того чтобы добавить материалы в проект существующий проект на. Метеоре Нам необходимо перейти на сайт ргс. com — это хостинг для метеор пакетов и в строке поиска вбить материалов и выбираем пакет с самым большим количеством скачиваний 18,6 в левой части страницы мы увидим команду для установки пакета копируем её к себе и вот команда завершилась с ошибкой мы наверное не станем в неё особо вникать. Судя по отчету мне можно скачать какую-то зависимость. Ну да и ладно нас нам дороже время и так снова в. Билайн материлась и переходим следующей пакет к примеру в этот и вот мы видим инструкция по установке выполняю отлично. Первая команда выполнялась выполняя вторую третью команду выполнить. Не надо так нет установленного матери. Лиза и так материала из установился и мы его уже можем использовать для проверки я добавлю нашу страницу хейтер переходим в раздел компоненты на сайте материалы зив ss.com и выбираем навбар раздел и просто копируем весь код к себе в Main HTML вставляем его сразу после боя сохраняем и запускаем Meteor Server наш сервер запущен. Мы открываем браузер адресу localhost 3000 3000 — это порт и так ничего не заработала мы забыли включить AIMP файла стилей материала из создадим файл Main. ЦСС и вставим строчку нажмем сохранить после чего мы видим, что у нас появился при отличной хедер и в таком формате также стиле применились и к заголовкам H1 — это не страшно мы сейчас придём в порядок, что я хочу сделать — это убрать сумки которые видны на полной страницы если сейчас закроем отладку мы видим слева вот эти ссылочки — это я и хочу сейчас убрать убираем список вместо Logo пишем. Франклин и видим результат всё здорово и так благодаря чему наши внешний вид предложения обновился внешний вид приложения преображается потому, что я подключил к проекту CSS Framework материал который позволяет использовать описанные классы сейчас я хотел бы изменить цвет нашего хедера страницу с установкой фреймворка можем закрыть с пакетом фреймворка и перейти на сайт материала ss.com i5 в раздел CSS цвет выбрать цвет который нравится я к примеру хочу сделать мой заголовок данного цвета я копирую классы телы layton Tele2. И перехожу в разметку утяганов прописываю от класс и. Вставляю скопированные классы после чего смотрю, что получилось. Отлично просто супер, а также мне сейчас, что наша форма растянутого всю страницу для этого я перейду в раздел фреймворка Creed и скопирую код. Дива с классом контейнер и вызов всех темплейтов. Перенесу внутри этого дерева сейчас мы видим, что появились отступы слева и справа и — это очень хорошо. Я хочу доработать форму добавления желаемого качества для этого переходим в раздел компоненты icons даже нет перейдём. Сначала с компоненты формы и я буду использовать вот такой макет с иконкой позже выберу японочка скопирую полностью template. Скопируй полностью html-код и перейду winform и ставлю теперь необходимо отредактировать я изменю тип 2 инфаркта на батон из-за меню класс с 6 на iOS 12 в обоях строчках у кнопки уберу иконку и лейбл он нам не пригодится после чего обновить обновлю и посмотрю, что получилось. Отлично Теперь я хочу заменить кнопку переходим в раздел кнопок и копирую код вот этой кнопки пишу её название. Давайте посмотрим, что получилось. Отлично На этом этапе. Я думаю мы можем удалить нашу старую форму сейчас я хочу заменить иконку у инпута переходим в раздел иконок и я выберу пожалуй вот эту иконку изменяем название хочу поработать над внешним видом наших благодетелей и. Первое, что я сделаю размещу её в отдельном блоке каждую в отдельном блоке для этого перейдём в раздел карт из копируем разметку затем переходим в раздел в шаблон списка благодетели и вставляем разметку туда сразу убираем стиль. Терра который задаёт цвет мы переносим данные ид-1 благодетели внутрь остальные можно удалить мы когда закончим со стилизацией 1 просто несколько раз скопировала. И также уберём стиль M5 который делает карточку экранах шириной в 5 колонок сейчас я хочу уменьшить размер шрифта на заголовки до уровня H3 заменим кнопку также перейдя в раздел и выбрав подходящую для нас перенесём просмотреть статистику на новую строчку добавив тег BR.

0 комментариев
0

Читайте также