Фреймворк Foundation — Знакомство
Начинаем изучение фреймворка Foundation. Этот фреймворк входит в двойку самых популярных и распространенных CSS-фреймворков на момент написания статьи (еще один — Twitter Bootstrap).
Можно по разному относиться к фреймворкам — любить их или не любить. Однако, они есть и ими пользуются при создании сайтов. Данный факт говорит о том, что фреймворки — это все-таки не такое уж и Зло. Скорее всего, нужно выработать для себя такое отношение к фреймворкам, что это быстрый способ создать что-либо непритязательное — не слишком оригинальное по дизайну, со стандартизированными элементами и не слишком оптимизированным кодом (читай — с большой долей мусора). А вот если к шаблону предъявляются повышенные требования, вот тогда нужно писать весь код вручную.
Но, как говорилось уже выше, фреймворки — они есть, и факт их существования говорит сам за себя. А поэтому, любой профессиональный веб-разработчик обязан знать и уметь работать с ними. В этой статье будет положено начало посильного знакомства с одним из двух популярных фреймворков — ZURB Foundation.
Сайт проекта Foundation
Официальный сайт проекта находится по этому адресу — Foundation. Если внимательно присмотреться, то можно заметить, что на странице проекта и в других местах часто мелькает слово ZURB — это название дизайнерской фирмы, которая и создала фреймворк.
Если бегло пробежаться по документации, то можно увидеть множество “плюшек” у данного фреймворка:
- фирменную консольную утилитку foundation для разворачивания или обновления проекта на Foundation
- коллекцию сниппетов под Sublime Text для быстрого создания различных компонент HTML-страницы
- тесная интерграция с препроцессором Sass
Естественно, Foundation заявляется как полностью адаптивный фреймворк, нацеленный прежде всего на создание мобильных версий сайтов (Mobile First).
Способы установки Foundation
Как говориться на странице документации, существует три способа установки фреймворка на локальном компьютере:
-
— самый простой и быстрый способ установки и начала работы. Нужно просто скачать и распаковать архив с готовым фреймворком — разворачивание фреймворка c поддержкой Sass/Compass. Установка на локальный компьютер производится автоматически, с помощью уже упоминавшейся консольной утилиты foundation — это что-то связано с разработкой приложений под Foundation. В общем, для front-end это не интересно
В дальнейшей статье приступим в установке Foundation вторым способом, так как мы уже хорошо знаем и умеем пользоваться препроцессором Sass и его библиотекой Compass.
Установка Foundation c поддержкой Sass
Для установки фреймворка на локальный компьютер с поддержкой Sass/Compass потребуется предварительное начилие на нем таких программных продуктов, как:
- Git — нужен для работы Bower
- Ruby — нужен для работы Sass/Compass
- Nodejs — нужен для работы Grunt
Foundation версии 5 использует для установки своих компонентов, а также для обновления себя самого в целом менеджер пакетов Bower, поэтому его наличие также жизненно необходимо в системе. Помимо этого, фреймворк может работать совместно с менеджером задач Grunt для конкатенации файлов; но наличие Grunt не является обязательным.
Проверяю наличие трех вышеназванных пакетов в своей системе Linux Mint 17. Все три пакета были установлены мною гораздо раньше. Как выполнить установку Git, Ruby, Nodejs, Grunt и Bower под Linux Mint 17, можно почитать в этой статье — “Установка Node.js, npm и Bower под Linux Mint”:
Установка Bower и Grunt, если они еще не были инсталлированы в системе, производится простой командой:
Все готово для установки консольной утилиты . Вы спросите — что это еще за утилита такая и зачем она нужна? Все просто — это фирменная утилитка от Foundation и ее задача — автоматизированное разворачивание готового проекта на локальной машине.
Устанавливаем утилиту foundation:
Сама утилитка foundation очень проста. Вызову команду и все станет понятно без слов:
Разворачивание Foundation c поддержкой Compass
C помощью утилиты foundation можно развернуть на локальной машине фреймворк c поддержкой:
- Grunt и Libsass
- Compass
Я воспользуюсь вторым вариантом и запущу установку Foundation c поддержкой Compass. Для этого нужно выполнить команду:
В моем случае имя нового проекта было оригинальным — foundation )) Пару секунд ожидания и я получаю папку с таким содержимым:
Видим здесь файлы , , ; папки , , . Другими словами — это готовый проект!
Немного подредактирую файл и запускаю Compass на мониторинг изменений в текущем проекте:
Проект готов для работы! В следующем обзоре будет рассмотрен самый простой пример работы с данным фреймворком — я с вами научусь создавать кнопки на Foundation.
Jest — использование skip
В Karma\Jasmine есть варианы для игнорирования выборочных тестов — xit, xdescribe. В этом посте — разберусь, какие есть варианты для этог. … Continue reading
Использование CSS-фреймворка Foundation #
При разработке HTML-документов важной задачей является предоставление практичного и достаточно приятного для восприятия пользовательского интерфейса. Для решения этой задачи применяется отдельный язык CSS. Изучение данного языка не входит в рамки данного курса.
Вместо этого предлагается использовать CSS-фреймворк, который предоставляет готовые наборы «компонентов» HTML-документов, которые можно использовать для оформления. При использовании подобных решений ключевым становится не изучение деталей «низкоуровневого» языка CSS, а высокоуровневых компонентов, которые предоставляет CSS-фреймворк.
Документация #
- Alert Boxes
- Panels
- Pricing Tables
- Progress Bars
- Tables
- Thumbnails
- Flex Video
- Clearing
- Dropdown
- Joyride
- Magellan
- Orbit
- Reveal
- Section
- Tooltips
-
, сетка для позиционирования элементов на HTML-документе.
Задача #
Вам необходимо разработать набор HTML-документов, которые описывают языки программирования, которые были упомянуты в данном курсе.
Foundation: красиво на бумаге, спорно в реализации
Что, если дать игроку самому создавать здания в градостроительном симуляторе? Развязать ему руки и дать возможность комбинировать элементы, как он пожелает? Этот вопрос — пожалуй, единственное, что спасло Foundation от того, чтобы стать «просто ещё одной Banished».
Foundation — это средневековый city-builder с элементами экономического симулятора. Она была выпущена в ранний доступ в начале 2019 года. Но игр про средневековую деревню в последние годы и так немало. Поэтому создатели решили ввести в игру небольшой элемент конструктора. Некоторые здания в игре можно создавать самому из предоставленных блоков. Вы можете вращать, изменять высоту и произвольно их комбинировать.
В остальном же игра достаточно типична. Стройте домики, кормите и поите ваших людей, удовлетворяйте их потребности. Выполняйте простейшие квесты, отправляйте солдатиков на военные миссии, происходящие за пределами вашего экрана. Но это, конечно, не приговор. Даже самые банальные вещи можно хорошо реализовать, чтобы игрок получал удовольствие и не жаловался на то, что уже не раз такое видел. Давайте же посмотрим, как это удалось создателям этой игры.
Обратите внимание, что это обзор на игру в раннем доступе. Он сделан в июле 2020 года на версии 1.6.5.0611. Почти любая указанная информация может со временем потерять актуальность.
Внешний вид
Графика в игре, посредственная, выполненная в стиле лоу-поли. Но дело даже не в том, что тут мало эффектов или низкое качество текстур и анимаций. Картинка в целом выглядит разнородной, без некого единого стиля или цветовой гаммы. В результате получать эстетическое удовольствие от вида городов достаточно сложно. Можете сами оценить предоставленные скриншоты. Впрочем, не будем судить об игре по картинке. Идем дальше.
 |
| Даже на максимальных настройках картинка, на мой вкус, выглядит сомнительно |
Музыка в игре присутствует, на этом описание можно закончить. Она совершенно банальная, и вам лучше будет её выключить и на фоне слушать что-то другое. Звуковое сопровождение тоже не очень информативное.
В качестве плюса игры можно отметить оптимизацию. Соотношение качество-производительность у игры не очень, но зато она смогла не попасть в другую ловушку. Многие градостроители с симуляцией жизни сильно проседают в производительности при росте вашего населения. В результате управлять большими поселениями в таких играх становится крайней неудобно. Всего год назад таким страдала и Foundation, но с тех пор данная проблема была исправлена. Идет эта игра не идеально, но по крайней мере она будет идти одинаково на всех этапах игры.
А вот интерфейс в игре — отдельная проблема. Он загроможден и не интуитивен. Множество нужных индикаторов или недоступны вообще, или спрятаны от начинающего игрока. Когда же игрок все-таки начинает открывать информацию, она быстро загромождает весь экран. Например, здесь открытие информации по одному зданию или жителю не закрывает другие аналогичные. Результат — куча окошек на экране. К сожалению, эта игра имеет большие проблема с донесением информации.
Геймплей
Жители и их потребности
Foundation симулирует жизнь каждого вашего жителя. Если ему нужно есть, он идет на рынок и покупает еду, если нужно работать — пешком идет к рабочему месту, и так далее. Вначале это может показаться интересным, но под конец это бросает существенный вызов вашим управленческим способностям.
Каждый житель имеет ряд потребностей. Самые базовые — это жилье и вода, за ними идут еда, вера, одежда и предметы роскоши. Удовлетворяются потребности по-разному. Если для первых достаточно выделить место для домов и построить колодец, то для прочего могут понадобиться производственные цепочки. Хотите одеть горожан? Извольте сначала построить ферму с овечками, потом дом ткача, а затем и мастерскую портного.
Потребности жителей зависят от их уровня развития. Их всего четыре — новоприбывший, крепостной, обыватель и горожанин. За продвижение жителя по карьерной лестнице вам придется заплатить некоторую сумму. Также, процедура эта почему-то возможна лишь в начале месяца. Количество и качество жителей также заменяет дерево технологий. Новые жители открывают не только потребности, но и здания, монументы и элементы декора.
Строительство и производство
Строительство в игре достаточно простое. Выбираете здание, вертите его как нужно и ставите, где хотите. Если в пределах досягаемости есть палатка строителей, то они начнут приносить на стройплощадку ресурсы, а потом построят здание.
Жилые дома нельзя строить вручную. Вы просто выделяете область для заселения, и строители сами поставят там домики по своему разумению. Это выливается в хаотичность застройки, но немного облегчает работу игроку. Точно так же строители автоматически улучшат дом, когда настанет время. Базовые ресурсы — дерево, камень и ягоды — работники также собирают сами. Вам просто нужно выделить область сбора, и они будут работать. Запасы камней и ягод при этом бесконечны, а вот лес придется засаживать заново.
Как уже упоминалось, в игре есть множество цепочек производства. Это означает, что не всегда результат роботы здания может быть использован сразу. Многие ресурсы нужны лишь для того, чтобы быть переработанными. Например, уголь сам по себе никому не нужен — но он критически важен как компонент для создания железа, а, соответственно — оружия и инструментов. Доставка между зданиями автоматическая, что снимает с плеч часть логистической проблемы.
 |
| Женщина номер 335 ловит рыбу. А ведь можно было просто повторно использовать имена. |
Строительство монументов
«Монументами» в игре названы те самые комплексные здания, которые игрок может собирать сам. Их немного — рынок, церковь, таверна, монастырь, крепость и ваш особняк. Каждый из них состоит из обязательного ядра и кучи дополнительных компонентов. Компоненты могут быть самого разного масштаба — от дополнительных корпусов и башен до стягов на стенах и могил возле церкви.
И возможности эти действительно неплохие. При желании вы можете строить красивые и величественные здания. Более того, многие компоненты имеют не только декоративную функцию. Например, корпуса вашего особняка можно оборудовать в казну, что повысит максимальный возможный запас золота. А прилавки на рынке сами по себе критически важны, ведь каждый продавец продает лишь один ресурс. Хотите продавать больше ресурсов — ставьте больше прилавков.
Логистика и жители
Настоящая сложность игры кроется в том, как расширять свое поселение. За рабочий день житель должен посидеть дома, помолиться в церкви, побывать на рынке, выпить воды из колодца и не забыть все-таки попасть на работу. Если все пункты находятся далеко друг от друга, то эффективность работы жителя значительно падает. Он даже может приуныть, если не успевает, допустим, к вечерне, и покинуть город.
С одной стороны, в этом кроется весь интерес проектирования. Вы не можете в одном месте поставить бесконечные поля, а в другом все застроить домиками. Вам нужно уметь правильно все это комбинировать. Также игра в лучших традициях экономических симуляторов любит эффект домино. Стоит пропасть одному ресурсу, как ваши жители начинают грустить и уходить. Как результат — ушедшие работники не производят другие ресурсы, и вот уже половина вашего города собирает вещи.
Но здесь кроется и один из основных минусов игры — она не умеет масштабироваться. Управление городом из тысячи жителей примерно равно управлению пятью городами по двести. Вы можете расти вширь, пока позволяет карта, но не можете расти ввысь. Вам не станут доступны более вместительные дома, более эффективные способы производства пищи, более быстрые дороги. И это значительно ограничивает лейтгейм и делает его однообразным.
Задания, технологии и война
Кроме обязательных для продвижения зданий, которые открываются автоматически, есть и бонусные. Они помогут вам лучше удовлетворять потребности жителей или просто откроют новые детали для монументов. Выполнены они в виде дерева технологий, разбитого на три ветки. Очки технологий вы получаете как за квесты, так и за постройку монументов. Каждый элемент в монументе дает свой бонус. Строите большие монументы — получаете больше бонусов.
Квесты в игре простые, как угол дома. Вам нужно будет накопить в амбаре некоторое количество ресурса и нажать галочку чтобы сдать квест. Но проблема все-таки есть — накопить нужно именно в амбаре, причем в одном. У вас может быть хоть сотня условных рыбин, но пока они лежат в разных местах, сдать квест не получиться. Хоть в амбаре и есть кнопка «накопить», она вам не поможет — жители все равно будут растаскивать нужный по квесту ресурс. Это делает даже такие примитивные квесты достаточно муторными.
Есть в игре и военный миссии. Схема такая — вы строите крепость и назначаете жителей солдатами, а также раздаете мечи. Вам присылают задание, на которое вы их назначаете. Солдаты уходят за экран, там выполняют квест и возвращаются с лутом — если выживут. В особо опасных миссиях можно даже получить чертежи новых монументов или декораций. Военные миссии полезны, приносят разнообразие, но никаких реальных боев вы в игре не увидите.
Ну а как это смотрится вместе?
Первое впечатление
В самом начале игра выглядит неплохо. Свободное строительство без сеток и клеточек, развитие поселения, маленькие человечки с их потребностями. Монументы вызывают уважение — этот элемент в игре действительно реализован на уровне. В интернете и стиме можно найти кучу примеров живописных зданий.
Начальная цепочка квестов совмещается с обучением и показывает вам базис игры. Вас учат селить жителей, кормить их, отправлять на рабочие места. В целом обучение не самое лучшее, но со своей работой справляется. Вот только оно быстро заканчивается, и тогда вы остаетесь наедине с этой песочницей.
 |
| Строительство монументов открывает много возможностей. Слева — особняк в начале игры, справа — в конце. Каждое отдельное крыло, башню или куст можно было поставить в любую позицию и в любом количестве — лишь бы ресурсов хватило. |
А вот дальше.
Foundation неплохо справляется с продвижением идей Settlers и Anno, но у неё есть очень большой недостаток — недружелюбность. Нет, не сложность, а именно проблемы с донесением информации игроку.
Чем больше растет ваше селение, тем чаще вы будете сталкиваться с «эффектом домино». Вот ваших запасов хлеба хватает с головой, а через десять его уже не найти. Жители несчастны, и вы полчаса сидите на грани, расставляя везде фермы и мельницы. Почему так происходит? Потому что игра не доносит до игрока нужную информацию. Сколько производится хлеба? Сколько потребляется? Как товары идут с пекарни в амбар, а оттуда на рынок? Сколько вы покупаете хлеба? А сколько денег идет на пекарни? Все эти вопросы остаются без ответа.
Я считаю, что в игре ужасный интерфейс. Он показывает море информации, но большинство этой информации бесполезно. Например, вы можете посмотреть нужды жителя, где он живет и работает. Но когда игра сообщает, что кто-то голодает или давно не ходил в церковь, искать такого жителя вам нужно вручную — среди сотен ваших подопечных. Здесь вы можете — и должны — вручную назначать работников на каждое предприятие, но не можете посмотреть скорость производства на нем. Эта игра банально не может донести до вас, что ей от вас нужно, но заваливает ненужной рутиной.
 Захотели вы, например, проверить, во всех ли ваших хижинах рыбака назначен работник. Пощелкали по ним — все окошки остались висеть вместе, закрывать нужно вручную и каждую отдельно. А как открыть панельку справа, жизненно необходимую в такой игре, я нашел лишь спустя десяток часов игры. |
Отмечу также, что в игра достаточно сомнительна как песочница. В ней мало стимулов развиваться —условные тысячу жителей можно получить, не имея ни единого гражданина. Уже на уровне обывателей вам доступны все самые нужные и самые интересные механики. Да, со временем вам станут доступны ещё несколько монументов, декораций, статуй и даже «шедевров», но практической пользы для вашего селения немного.
Строительство монументов? Оно неплохое, да вот только все монументы стоят ресурсов. Хотите построить что-то потрясающее? Сидите ждите пока ваши шахтеры накопают камня, а строители это все построят. Вы быстро приходите к тому, что у вас будет лишь одна красивая церковь. Все остальные буду выглядеть как домик с башней — просто потому что у вас нет стимула всё строить красивым.
Итоги
На меня Foundation произвела крайне смешанные впечатления. Очень хорошая механика здесь похоронена под ворохом проблем. Неудобный интерфейс, однообразное развитие и проблемы, причину которых игра не объясняет, не дают насладиться этой игрой.
Да, игра находится в раннем доступе — уже полтора года. И за год, который прошел с моей прошлой попытки, она значительно улучшилась. Были поправлена оптимизация, добавлено много новых зданий, а некоторые механики изменены. Но сколько ещё будет пилиться эта игра? Ведь она нуждается в существенной переработке. Не новых зданиях и декорациях, а в коренной переработке интерфейса и обучения.
Стоит ли вам попробовать Foundation? Если вы фанат градостроителей вроде тех же Settlers или Banished — скорее да, чем нет. Но я бы посоветовал брать игру лишь по большей скидке. А уж для знакомства с жанром эта игра точно не подходит. Она демонстрирует худшую сторону этих игр — непонятную, перегруженную и требующую, чтобы ты сам разобрался и сам нашел себе развлечение. К сожалению, Foundation придется ещё через многое пройти, чтобы занять достойное место в своем жанре.
Using the Foundation framework
A couple of weeks ago the famous Foundation framework released its fourth version. If you have never heard of Foundation we’re going to guide you through using this responsive framework.
Since version 3 of Foundation was built from the ground up using SASS — a CSS pre-processor that helps in the writing of more efficient CSS — this new version is also mobile-friendly and provides a lot of features in its grid that you don’t get from other frameworks.
Let’s dive into Foundation and see why it’s so popular.
The grid
Foundation uses a 12 column nestable grid that will adapt to any size screen, if you have already used grids this should all be very familiar to you. All the divs in Foundation use box-sizing: border-box so that the borders and padding do not affect the element’s width and height, making the math a little bit easier for us. But the amazing thing about the Foundation grid is that you actually get 2 grids, a big grid for when the screen is bigger than 768px in width and a smaller grid that you can control just as simply. To that end Foundation uses the small-# and large-# classes, like so:
In this code we created a row in which there are 3 divs that are the exact same width when the browser is wider than 768px but when it’s smaller, as you can see by that small class in the divs, the last one will occupy half the screen while the other two will occupy 25% each, this gives you immense control of how our website will look on all screens.
Foundation also allows you to offset a column, by which I mean that you can have a row with 2 columns that are only 3 columns wide but you can offset the second one that it floats to the right and to do that we use the large-offset class or the small-offset class:
Block grid
The block grid is just a nice little extra, it is a way for you to split the content of a list within the grid, it’s useful for when you wish this particular part of your website to stay evenly spaced no matter what the size of the browser. This type of grid uses the small-block-grid and the large-block-grid classes, if you only set the first one the grid will keep the desired spacing no matter what the viewport is but if you only use the large-block-grid class when the viewport reaches the breakpoint of 768px the grid items will stack on top of each other, you can always take more control by using both of these classes, like so:
Using this, the images will be evenly spaced no matter the size. When the viewport is bigger than 768px they will only occupy one row, and when it’s smaller than that they will occupy two rows with 2 images each.
The main navigation
Now that we’ve covered the grid in Foundation and how it gives you plenty of control in all environments, we will talk about something we’ll nearly always use on our sites: a top navigation bar. And of course this navigation can also be flexible with little to no work using this framework. To create a simple responsive navigation using Foundation you use:
This bit of HTML creates a simple navigation bar that has the title of the website on the left and then on the right it has four menu items. Also note that when the viewport is smaller than 768px this menu will be replaced by a list icon making this menu responsive. If you want this grid to have its position fixed as you scroll down the page you just need to wrap it in a div with a class of fixed. To add dropdowns to your navigation you just need to add something like this to the place where you want your dropdown:
There is also the ability to add a divider to your list item adding a little grey vertical line, to do that you just need to place a list item with the class of divider between the two list items you wish to divide.
Buttons
No framework would be complete without some predefined buttons and Foundation actually has more than one style of button predefined, it has the default one that uses a blue color and then it adds the success, alert and secondary styles. By adding the class of radius you give this button a little bit of border-radius and by giving it the class of round you make the button almost entirely round. You can also add the class disabled to the button and there are 4 size classes to make the button as big as you need it.
To create a simple dropdown button you only need to add the dropdown class after the last class, like so:
Typography
The typography in Foundation uses Helvetica Neue and it also uses em’s instead of pixels to make it easier to adapt your type across all platforms and breakpoints. Using the headers is pretty self explanatory; you just need an h1 and the text you wish inside it, but there are also some other classes that can come in handy when dealing with typography in Foundation.
As you can see, when it comes to typography, Foundation provides us with some basic help and then some additional classes to meet all our needs.
Other components
If this demonstration of the Foundation framework has whet your appetite to learn more and start building with Foundation you should really take a look at the documentation because Foundation also offers additional CSS components such as:
And also some helper JavaScript such as:
As you can see, there’s a lot of Foundation to explore and I strongly advise you to look at all of its CSS and JavaScript properties.
Conclusion
We covered just enough in this article to see how Foundation can help building faster and more responsive websites, using its grid you get a lot more control over the structure of your website than when using a normal flexible grid and Foundation also gives you plenty of helpers to create your website. I hope this article has given you the push to learn and use Foundation for your next project.
Have you used Foundation for a project? What features did you find the most useful? Let us know in the comments.