In part one, we used Basis for Apps to construct a easy RSS viewer structure. Its Flexbox strategy made arranging the structure a snap — however that’s solely a part of the story. Now we have to promote that product, and we’ll use Foundation for Sites to make it occur.
Basis for Apps addresses the rising want for app-like interfaces: panels, movement, scalability and interplay. Because the “unique” Basis, nonetheless, Basis for Websites version stands on a well-recognized grid of floats and clears. It makes use of designer-friendly jQuery as an alternative of developer-friendly Angular. Total, Basis for Websites helps designers construct extra standard web sites.
Right here’s a diagram of the single-page web site we’ll construct:
Downloading Basis for Websites
The Basis for Websites framework comes with a number of totally different configurations.
- The entire thing, together with greater than 35 elements, grid and default CSS.
- Necessities solely, which embrace the grid, typography, and type components.
- Customized obtain, wherein you decide and select what your product wants.
All of that's wonderful — however it’s plain CSS. If you wish to actually management Basis for Websites, you want the Sass version.
Within the app.scss file you management what will get compiled into your undertaking. You possibly can flip elements on and off on a whim. App.scss can also be the place you write your customized types that override Basis’s defaults — it’s a foundation, in spite of everything. A place to begin.
You additionally get a _settings.scss file with tons of variables that allow you to fully bend Foundation to your will.
Solely use what you want
You don’t should import all the things in Basis. Management what will get included or not within the app.scss file. On this case, we solely want a couple of elements, so we disable @import "basis"; which incorporates all the things and the kitchen sink. Then we uncomment the elements we would like. The streamlined app.scss file appears like this:
@import "settings"; // @import "basis"; // Or selectively embrace elements @import // "basis/elements/accordion", // "basis/elements/alert-boxes", // "basis/elements/block-grid", // "basis/elements/breadcrumbs", // "basis/elements/button-groups", // "basis/elements/buttons", // "basis/elements/clearing", // "basis/elements/dropdown", // "basis/elements/dropdown-buttons", // "basis/elements/flex-video", // "basis/elements/varieties", "basis/elements/grid", "basis/elements/inline-lists", // "basis/elements/joyride", // "basis/elements/keystrokes", // "basis/elements/labels", // "basis/elements/magellan", // "basis/elements/orbit", // "basis/elements/pagination", // "basis/elements/panels", // "basis/elements/pricing-tables", // "basis/elements/progress-bars", // "basis/elements/reveal", // "basis/elements/side-nav", // "basis/elements/split-buttons", // "basis/elements/sub-nav", // "basis/elements/switches", // "basis/elements/tables", // "basis/elements/tabs", // "basis/elements/thumbs", // "basis/elements/tooltips", "basis/elements/top-bar", "basis/elements/kind"; // "basis/elements/offcanvas", // "basis/elements/visibility";
Above: The app.scss file with Basis’s grid, typography and top-bar energetic.
Edit settings in … properly, settings.
The aptly-named _settings.scss file controls virtually each facet of Basis’s elements: Each coloration, each measurement, each bit of knowledge. It’s principally disabled by default, leaving you free to alter solely what you want.
For instance, a elements use a sequence of colours. Should you flip these on, you possibly can preserve your model colours constant.
$primary-color: #ff3700;
$secondary-color: #fc9200;
$alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
// $info-color: #a0d3e8;
Above: Basis comes with six colours used all through the undertaking. They’re stored round line 119 within the _settings.scss file.
Tailor the Grid to Your Wants
As a mobile-first framework, Basis for Websites’s grid defaults a cellular structure. It’s straightforward to override with a couple of variables in _settings, circa line 82.
$row-width: rem-calc(1000); // variety of pixels large every row is $total-columns: 12; // variety of columns per row $column-gutter: rem-calc(30); // variety of pixels between every column
By default, the grid is 12 columns and 1,000 pixels large. We’ll preserve the 12 however make the widescreen view 1,400 pixels large.
$row-width: rem-calc(1400);
Now we’ll construct the structure itself. Basis for Websites makes use of a nestable, mobile-first grid. Rows comprise columns, which optionally comprise extra rows. You possibly can nest as many as you want — however for this instance, we solely want one set.
<header>
<div class="row">
<div class="small-12 columns">
<img />
<h1>Title goes right here</h1>
</div>
</div>
</header>
<major>
<div class="row">
<div class="medium-Four columns">
<img src="#" alt="pattern icon"/>
<p>Descriptive textual content Descriptive textual content Descriptive textual content Descriptive textual content </p>
</div>
<div class="medium-Four columns">
<img src="#" alt="pattern icon"/>
<p>Descriptive textual content Descriptive textual content Descriptive textual content Descriptive textual content </p>
</div>
<div class="medium-Four columns">
<img src="#" alt="pattern icon"/>
<p>Descriptive textual content Descriptive textual content Descriptive textual content Descriptive textual content </p>
</div>
</div>
</major>
<div class="row testimonial">
<div class="medium-2 medium-push-2 columns">
<img src="#" alt="Photograph of a cheerful buyer"/>
</div>
<div class="medium-Eight columns">
<blockquote>“Testimonial testimonial testimonial
testimonial testimonial testimonial
testimonial testimonial.”</blockquote>
</div>
</div>
<div class="row">
<div class="weblog medium-6 columns">
<h2>Headline headline</h2>
<p>Weblog submit Weblog submit Weblog submit Weblog submit
Weblog submit Weblog submit Weblog submit Weblog submit.</p>
</div>
<div class="data medium-6 columns">
<ul>
<li>Info info info </li>
<li>Info info info </li>
<li>Info info info </li>
<li>Info info info </li>
<li>Info info info </li>
</ul>
</div>
</div>
<footer>
<div class="row">
<div class="medium-12 columns">
<nav>
<ul class="inline-list">
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Residence</a></li>
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Archives</a></li>
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">About</a></li>
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Contact</a></li>
</ul>
</nav>
</div>
</div>
</footer>
Discover medium-# all through the code. That controls what number of columns large every div will likely be in, say, tablet-sized screens and bigger. With out specifying small-#, Basis assumes every component will show full-width. The grid additionally has large-# lessons that solely take impact on desktop-esque shows. You possibly can edit the media question ranges in _settings.scss beginning on line 151.
Another factor: This web site will use Basis’s top bar component for its navigation. Prime bar collapses properly on cellular, so the markup is simple:
<nav class="top-bar" data-topbar function="navigation">
<ul class="title-area">
<li class="identify">
<h1><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Pattern web site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="?ref=tiennguyenvan&aff=tiennguyenvan"><span>Menu</span></a></li>
</ul>
<part class="top-bar-section">
<!-- Left Nav Part -->
<ul class="left">
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">About</a></li>
<li class="has-dropdown">
<a href="?ref=tiennguyenvan&aff=tiennguyenvan">Merchandise</a>
<ul class="dropdown">
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Product 1</a></li>
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Product 2</a></li>
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Product three</a></li>
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Product Four</a></li>
<li><a href="?ref=tiennguyenvan&aff=tiennguyenvan">Contact</a></li>
</ul>
</li>
</ul>
</part>
</nav>
Add the content material, and we’re properly on the way in which.
The result's a mobile-optimized web site that promotes the RSS viewer we constructed with Basis for Apps.
The Basis household are beginning factors for constructing two sorts of merchandise: Apps and Websites. We’ll proceed to develop each in parallel that can assist you make superior digital merchandise.
Do you know that there's a large number of Foundation Themes & Templates accessible on ThemeForest?
