Утилиты прототипирования Foundation

Создание макетов и интерфейса по прототипам

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

Основы прототипирования

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

От идеи до совершенства

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

Режим прототипа по умолчанию отключен!

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

Многие классы прототипов используют !important - убедитесь, что они не будут переопределены более конкретными селекторами. Этот фреймворк добросовестно избегает использования !important декларации. Пожалуйста, обратите внимание, что мы вставили !important чтобы отметить только те специфические свойства CSS, которые ни в коем случае не должны быть переопределены.


Стили компонентов

Кнопки

Эти .radius, .rounded, .bordered и .shadow можно использовать независимо или совместно для стилизации компонента, округляя его углы, придавая ему светлые границы и создавая тень соответственно. В основном используется в кнопках, картах, таблицах, изображениях и многом другом.

<button type="button" class="button radius bordered shadow primary">Primary</button>
<button type="button" class="button rounded bordered shadow secondary">Secondary</button>
<button type="button" class="button radius bordered shadow success">Success</button>
<button type="button" class="button rounded bordered shadow alert">Alert</button>
<button type="button" class="button radius bordered shadow warning">Warning</button>


Переключатели

Добавьте .rounded класс к .switch чтобы закруглить бока.

<div class="switch rounded">
  <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="exampleSwitch">
    <span class="show-for-sr">Download Kittens</span>
  </label>
</div>​


Карточка

<div class="grid-x grid-margin-x">
<div class="cell medium-4">
<div class="radius bordered shadow card"><img src="/images/article/joomla_002.jpg" alt="Утилиты карты foundation" />
<div class="card-divider">Styled Card</div>
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell medium-4">
<div class="radius bordered shadow card"><img src="/images/article/joomla_002.jpg" alt="Утилиты карты foundation" />
<div class="card-divider">Styled Card</div>
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell medium-4">
<div class="radius bordered shadow card"><img src="/images/article/joomla_002.jpg" alt="Утилиты карты foundation" />
<div class="card-divider">Styled Card</div>
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>​


Утилиты карты foundation
Styled Card

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Утилиты карты foundation
Styled Card

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Утилиты карты foundation
Styled Card

This is a card.

It has an easy to override visual style, and is appropriately subdued.


Таблицы


<table class="radius bordered shadow">
      <thead>
        <tr>
          <th width="200">Table Header</th>
          <th>Table Header</th>
          <th width="150">Table Header</th>
          <th width="150">Table Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Content Goes Here</td>
          <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
          <td>Content Goes Here</td>
          <td>Content Goes Here</td>
        </tr>
        <tr>
          <td>Content Goes Here</td>
          <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
          <td>Content Goes Here</td>
          <td>Content Goes Here</td>
        </tr>
        <tr>
          <td>Content Goes Here</td>
          <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
          <td>Content Goes Here</td>
          <td>Content Goes Here</td>
        </tr>
        <tr>
          <td>Content Goes Here</td>
          <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
          <td>Content Goes Here</td>
          <td>Content Goes Here</td>
        </tr>
      </tbody>
    </table>​


Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Стрелки


<div class="arrow-down"></div>
<div class="arrow-up"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>​

 
 
 
 

Разделитель

Это создает крошечный разделитель под заголовком элемента и обычно используется в заголовке раздела.

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


<h3 class="separator-left">Lorem</h3>
<h3 class="separator-center">Ipsum Dolor</h3>
<h3 class="separator-right">Tempor</h3>​


Lorem

Ipsum Dolor

Tempor