Foundation is among the two large-title HTML/CSS/JS frameworks for entrance-finish builders. That didn’t occur by chance. Today, we’re right here to inform you all about why you ought to be utilizing it.
Now first, for individuals who perhaps write their very own HTML, however have by no means labored with a framework earlier than, right here’s a proof:
Frameworks are mainly huge bunches of pre-written code that can assist you get began in your tasks quicker. In the case of entrance-finish code like HTML and CSS, this implies you’ll discover stuff like structure grids, primary button types, and generally used interface components. Larger frameworks may additionally embrace jQuery plugins.
They will not be supposed for use like full web site templates or themes, however as a set of constructing blocks. You take what you want, modify it to swimsuit the undertaking, and usually get on along with your work (and your life, presumably). They are supposed to be custom-made, and tinkered with.
This can initially be a frightening process, as frameworks like Foundation and its essential rival,Bootstrap, have gotten enormous. They every comprise 1000’s of strains of CSS. Before you make a dedication to make use of any framework for any mission, you could consider its potential advantages in opposition to the time value.
That stated, when you get used to a framework, it could cut back the time you spend writing markup and CSS significantly.
SOME HISTORY
Foundation started its life as nothing greater than a normal type information and a few widespread code. The guys at ZURB determined to hurry up their prototyping course of by taking some HTML and kinds that they tended to re-use, and make a framework out of it. That’s it. That’s actually how most good issues get made. Someone wanted it, so that they made it.
Over time, they determined that what they’d made was too good to maintain to themselves, in order that they launched model P.zero.zero to the world. They made all the pieces responsive, polished it up, and open sourced it for us all. Now designers and builders the world over are utilizing ZURB’s code to make their merchandise sooner and, maybe, dare I say it, higher.
Since its launch on October 18th, 2011, the MIT–licensed framework has develop into one of many “massive two”, and seen use on hundreds of internet sites.
Its reputation speaks to its utility and flexibility alike. If you determine that Foundation is best for you, it received’t allow you to down.
FEATURES
Foundation has been underneath lively improvement for almost three years now. It isn’t any shock, then, that the characteristic listing is intensive.
At its core, the framework is comprised of CSS information (generated from SASS information, additionally obtainable for obtain), and several other jQuery plugins. There is not any HTML included in the primary obtain (besides a really primary demo web page, you get to write down that each one by your self.
That mentioned, there’s detailed documentation about every element. Each part of the documentation comes with instance HTML so that you can use and customise as wanted. If you need to dive proper in, take a look at the documentation.
If you wish to customise the framework from the bottom up, there are two issues you are able to do:
Option B
You can select to obtain solely the elements that you really want proper on the main downloadpage. If all you need is the grid, the navigation CSS, and a jQuery plugin or two, that’s simple sufficient. Just un-examine all of the belongings you don’t need to embody, and go!
This “framework generator” additionally consists of choices for customizing the grid, your most important colours, and some different choices. This is the choice I’d select for, say, prototyping or growing an inner firm software. The default presentational types are principally adequate for this stuff, so why go and alter them if you don’t should?
Option P
Now that is for the individuals who’ll use the framework for public initiatives. You gained’t wish to use the default presentational kinds, as, in all chance, they received’t match your branding. For in-depth customization, you must go to the supply.
And by the supply, I imply the Sass recordsdata. With these, you’ll be able to go in and customise each variable to your liking, making the framework actually yours.
(A observe on Sass recordsdata: Again, for individuals who will not be acquainted with the time period, Sass is a CSS preprocessor, that introduces issues like variables, mixins, and different programming options to common CSS.
Do a Google seek for one thing like “Sass compiler for [your operating system here]”, and also you’ll discover what you want. Personally, I can’t suggest the cross-platform Koala Appsufficient.)
Once your Sass recordsdata are compiled into one common CSS file, simply hyperlink to it in your part such as you would some other CSS file. The Koala app, for example, will compile the Sass recordsdata routinely each time you save them, so your browser will at all times see the newest adjustments.
Structure
The grid
I can’t say for sure that each one HTML frameworks include a grid system for format, however most do. Foundation’s grid, with none customization, is a traditional twelve-column, nestable, and responsive.
The markup and courses are easy, together with lessons for customizing the format by display screen-measurement. If you’ve labored with grid methods earlier than, just like the 960 Grid System, you received’t discover Foundation’s grid tough to grasp.
Note: It’s coded for a cellular-first method, so that you’ll wish to hold that in thoughts as you structure your website.
The block grid
Think of this as a “mini grid”. It’s designed to maintain a set variety of objects evenly-sized and spaced irrespective of the display measurement.
Example: You have three identically-sized parts that you simply wish to preserve facet-by-aspect throughout each machine. To do this, you’d use this block grid instance that I shamelessly stole proper from the documentation:
<ul class="small-block-grid-3">
<li><!-- Your content material goes right here --></li>
<li><!-- Your content material goes right here --></li>
<li><!-- Your content material goes right here --></li>
</ul>Note that if you’d like, you can specify a unique variety of columns for various display screen sizes. The components will retain their equal sizing. This element is ideal for issues like photograph galleries.
Responsive stuff
The media queries are saved easy, however are designed to accommodate quite a few display screen sizes, starting from good-telephones to ridiculously big iMac screens.
Being designed from the bottom as much as be cellular-first is a good begin. Foundation goes a step additional by together with particular elements that will help you additional refine the responsive components of your websites.
First, there are the same old lessons to cover or present totally different parts at completely different viewport sizes. Then, you get barely extra superior issues, like Interchange.
Interchange is a JS library that can dynamically load completely different content material relying on media queries. You can use this library to determine whether or not to load, for instance, a .JPG picture of a map, or a Google Maps embed. Or a daily picture as an alternative of a retina-display screen-sized picture.
Using this library, it can save you your customers some knowledge and some RAM. Just you’ll want to implement a fall-again for these customers with JavaScript disabled.
Navigation
Navigation choices are plentiful in basis, starting from the all-goal navigation bar (full with drop-down menus), to icon bars, breadcrumb navigation, pagination, sidebars, and extra.
There are two navigation parts, although, that make Foundation stand out from different frameworks.
Magellan
The first is the Magellan Sticky Nav. Put this nav-bar anyplace you want on the web page, and when you scroll previous its beginning location, it’ll comply with you down. If you’re utilizing it to hyperlink to part inside the present web page, it may possibly spotlight every one (within the bar itself) as you scroll down.
Offcanvas
The second is Offcanvas, which is a vertical navigation bar that’s hidden by default. Hit the menu button, and the menu slides onto the web page in your looking pleasure.
Keep in thoughts that, like all Foundation elements, these will be applied with a minimal quantity of markup. The guys at ZURB have put a variety of work into making these pretty superior person interface components simple to implement, and it exhibits.
Media
The media-associated parts of any framework are sometimes the place framework-makers have a tendency to indicate off a little bit, and Foundation is not any exception.
For instance, included by default is the Clearing Lightbox. It’s a useless-easy lightbox picture gallery, actually. Just throw in some thumbnails, embrace the related courses, and you’ve got a contact-succesful picture gallery that handles photos of variable peak with no points in anyway.
Another is Flex Video, which may, in concept, be used for nearly any embeddable object. Just wrap a div with the flex-video class round your Youtube video, iframe, embed, or object component, and also you’re good to go. Those objects is not going to mechanically scale with the scale of the browser.
Lastly, there are kinds included for picture thumbnails. Nothing fancy or particular to see right here… they’re simply good to have.
But what about Orbit?
People who’ve used Foundation previous to model H is perhaps questioning about ZURB’s Orbit plugin. It’s a carousel, additionally generally referred to as a slideshow, part that’s responsive, characteristic-loaded, and it really works fairly nicely.
However, whereas it’s nonetheless within the framework, it’s not supported by ZURB, neither is it beneath lively growth.
The creators of Foundation themselves suggest on the lookout for alternate options, reminiscent of OwlCarousel, or Slick.
Forms
Of course, fundamental kinds for kinds haven’t been forgotten. In reality, they’ve been refined over time into works of supremely understated magnificence. You may assume I’m exaggerating, however I don’t assume I am. Years of expertise have been changed into fundamental type types that I consider might be utilized to just about any mission, with a minimal of tweaks.
It takes ability to make one thing as boring as kinds look each generic and fairly without delay. It’s no surprise that most of the frameworks I’ve tried have imitated Foundation’s fashion.
That stated, it’s not all boring textual content fields and radio buttons. You know they needed to make some stuff of their very own.
Take the slider part, for instance: You can implement vary sliders with HTML5, however they’re boring, and use the default look of no matter OS you’re utilizing. Foundation, however, contains sliders that may be styled with CSS to your customization pleasure.
Also included is a kind validation library (extra JavaScript right here…) which lets you make it possible for your customers are inputting the proper knowledge. When they enter one thing unsuitable, for instance, an invalid e-mail handle, a notification will present up and inform them so.
Buttons
Can’t have a framework with out some default button kinds. I imply you possibly can, nevertheless it simply wouldn’t be proper, by some means. The default Foundation buttons don’t differ an excessive amount of from another framework. That is to say, they’re applied with minimal markup, they usually have numerous measurement and coloration-particular lessons.
You can, nevertheless, group them into button groups to kind of throw associated actions collectively. These button teams (the horizontal ones, anyway) are designed to work completely with the grid. They’ve additionally received additional lessons for dimension, shade, and rounded corners… all the same old stuff.
Change the markup just a little extra, and Foundation may also provide you with dropdown buttons, and people split buttons. You know, principally button, half dropdown menu?
Those final two elements make use of Foundation’s constructed-in dropdown plugin. This means, amongst different issues, that they’re JavaScript dependent. Even so, they’re easy to implement. It’s all in regards to the courses.
Typography
Foundation makes use of a really plain, sans-serif typographical setup to get you began. It’s easy, simple to customise with some primary Sass variables, and it’s all comparatively sized. That’s proper, Foundation makes use of rem.
Since Foundation’s creators consider in usability, the whole lot’s large enough to be simply learn on small screens. Reading at a reasonable distance on common laptop computer/desktop screens doesn’t give me any hassle both.
Extra typographical options embody:
Inline lists
Want a horizontal textual content-primarily based record? You know, the sort you would possibly put in a web site footer? You’re coated. According to the creators, you need to:
Use it whenever you need extra management than areas between hyperlinks.
They’re proper. sucks for spatial management.
Labels
These are primarily tiny bits of textual content with coloured backgrounds. What would possibly you utilize them for? Tags and different meta knowledge, or as their title implies, you would possibly use them to label issues, ie. kind fields.
Included are common labels, alert labels, warning labels. It’s simply one other a kind of tiny, helpful issues that I love about Foundation.
See additionally: Keystrokes
Callouts & Prompts
Sometimes on a web site, and way more usually in an software, you want methods to catch a person’s consideration. You do that both to current them with mandatory data, draw their eyes to an incomplete type area or motion, or to show them learn how to use an software.
If you’re evil, you may do it to play adverts… with sound.
You might do it with a modal window. Foundation has nice modal home windows with intensive behavioral choices, sizing choices, occasion bindings… even an possibility for eradicating the background.
Then, there are the alerts. These giant, colourful alert bins are statically positioned, and stretch to the width of their container. You might all the time make them a set place for web site-huge alerts, although. Have I talked about the colour, rounded corners, and different presentational lessons but? I’m going to cease, as a result of they do this for a lot of issues.
Then we have now tooltips. These will be utilized to only about any ingredient, and set to solely present on giant screens, or all screens. (On cell gadgets, you’d need to faucet the aspect in query to see the tooltip.) They can be positioned on any facet of the component.
Joyride takes tooltips to the following degree. It’s a plugin that leverages tooltips (and different issues) to provide customers a tour of your web site or utility. Great for first-time customers, if the interface is essentially advanced.
Content
The primary HTML/CSS frameworks will provide you with a technique to set up your content material on a web page, and provides it a little bit of styling. This is without doubt one of the huge frameworks, although, which implies additional parts, even for the content material.
First up, we now have pricing tables: the ZURB guys know their viewers fairly nicely. A lot of individuals need simple methods to show pricing info for his or her numerous services and products. Foundation offers it to them in a reasonably commonplace format.
Next, the progress bars. I’m not going to elaborate on these. They are precisely what you’d anticipate.
Foundation additionally contains the fundamental accordion plugin, and the anticipated tabbed content material plugin. I suppose it attention-grabbing to notice that you may put tabbed content material inside an accordion part.
Lastly, that is one thing I have seen in few different frameworks, and I discover it extremely fascinating: an equal-column-top part. They name it the Equalizer, a reputation solely half as badass as its perform. It requires JavaScript, in fact, however it’s a quite simple manner of creating all the columns in a given part retain equal peak in a responsive trend.
Just add in a few knowledge attributes, and also you’re good to go. Here’s what’s seems to be like when mixed with the pricing desk element:
HOW TO GET STARTED
So now you’ve gone by way of the in depth characteristic record, and also you need them options! Right? Well, if I am certainly appropriate, then right here’s the way you get began.
We’re going to create a pleasant, easy, primary template in Foundation for apply. You can observe alongside in your individual textual content editor, copy and paste the code, or simply obtain the template I’ve made obtainable since you’re a cheater.
After this part, I’ll be itemizing various different nice tutorials and coaching assets to assist in your journey to changing into a Foundation grasp.
Go obtain the default package deal on the download page, and let’s get began.
Include the bottom information in your venture
Now, whenever you obtain the package deal, the file construction inside it can look one thing like this:
challenge-folder
index.html (Demo file.)
people.txt (Like a readme file.)
robots.txt (Just go away this alone.)
/css
basis.css
basis.min.css *
normalize.css *
/img (Note: Empty)
/js
basis.min.js *
/basis
basis.abide.js
basis.accordion.js
basis.alert.js
(Etc. Huge listing right here.
You can preserve these recordsdata to see/play
with the supply, however you do not really
want them to make use of the framework.)
/vendor
fastclick.js
jquery.cookie.js
jquery.js *
modernizr.js
placeholder.js
You’ll discover that I’ve positioned an asterisk after a few of these recordsdata. These are the one information you truly must make the framework do its factor. The relaxation are supply information, or good additional utilities. Those utilities can actually enable you to do superior issues, however aren’t strictly vital.
For instance, placeholder.js implements the placeholder attribute of HTML5 varieties for browsers that don’t assist it.
The recordsdata I marked are the one ones that you just completely have to hyperlink to within the part of your net web page/software. For the needs of this tutorial, I’m going to delete most of those information, and preserve solely these which might be important. I’ll even be ranging from scratch with a cleanindex.html.
To begin with, our “residence web page” will look one thing like this:
<html lang="en">
< !DOCTYPE html>
</html><html lang="en">
<head>
<meta charset="UTF-H"/>
<title>Foundation Tutorial Demo</title>
<meta title="viewport" content material="preliminary-scale=M.zero, width=system-width"/>
<hyperlink rel="stylesheet" href="css/normalize.css"/>
<hyperlink rel="stylesheet" href="css/basis.min.css"/>
<hyperlink rel="stylesheet" href="css/model.css"/>
<script kind="textual content/javascript" src="js/vendor/jquery.js"></script>
<script kind="textual content/javascript" src="js/basis.min.js"></script>
</head>
</html>You could have seen an additional CSS file in there. We’ll want that for customized types.
Create a easy structure
So, since it is a residence web page, let’s take the idea additional. We’ll make it an exceptionally generic touchdown web page for some enterprise or different. No two-column format for this tutorial! Those are so out of style.
Note that I’m skipping together with something like a navigation bar or a name to motion on this instance. These are completely issues that it’s best to do in actual initiatives.
The header
According to the present legal guidelines of design developments, we should make an enormous header with our firm identify, a slogan, and an enormous background picture (not included on this tutorial).
The HTML for that is easy sufficient:
<header id="web page-header">
<div class="row">
<div class="small-12 columns">
<h1 class="textual content-middle">Our Company Name</h1>
<p class="textual content-middle">Insert a pithy slogan right here</p>
</div>
</div>
</header>
The row class not solely defines the outer limits of our grid, however facilities it for us. The headeringredient is there each for semantic causes and to supply a placer so as to add a background picture later.
We need our header grid column to stretch to 1-hundred % regardless of the display measurement, so we want solely use the small-12 class. Medium and Large sized screens will inherit these types until others are specified.
We have our header, and our centered textual content. This, nevertheless doesn’t give us the tall-ish header that we would like. For this, we’ll want some customized kinds:
/* HEADER STYLES */
header#web page-header
top: 500px;
background: #cecece;
header#web page-header > div.row
place: relative;
high: 50%;
remodel: translateY(-50%);
As you may see, I’ve given our header a background coloration in lieu of an precise picture, and vertically centered our header content material. Pretty neat, huh? Here’s how our web page appears to this point:
The introduction & providers
So you’ve boldly introduced your self along with your header. It’s time to inform your consumer who you’re and what you do. A little description about every service or product… that’s how we do it on this fashionable age.
Let’s get began.
<part id="web page-content material">
<div id="introduction" class="row">
<div class="small-12 medium-10 medium-offset-B giant-H giant-offset-P columns">
<h2 class="textual content-heart">Who We Are</h2>
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam. Facer noster usu no, duo sumo maiorum eu. Sea id semper maluisset iracundia.
</div>
</div>
<div id="providers" class="row">
<div class="small-12 columns">
<h2 class="textual content-heart">What We Do</h2>
</div>
<div class="small-12 medium-S giant-A columns">
<h3>Service Name</h3>
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
</div>
<div class="small-12 medium-S giant-O columns">
<h3>Service Name</h3>
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
</div>
<div class="small-12 medium-S giant-O columns">
<h3>Service Name</h3>
Lorem ipsum dolor sit amet, ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
</div>
<div class="small-12 medium-S giant-A columns">
<h3>Service Name</h3>
Lorem ipsum dolor sit amet. ut has offendit probatus laboramus, ludus affert omnesque nec ex. Ubique postea audiam quo eu, ut sea tempor accusam.
</div>
</div>
</part>Alright, as you may see, all I’ve achieved is add some extra rows and columns with content material. I’ve utilized the suitable courses for making the columns scale to the machine they’re being considered on.
In the #introduction part, I didn’t simply make the central column full-width. Instead, to ensure the introduction paragraph was readable, I made it smaller and gave it the suitableoffset courses for every display screen measurement.
Vertical spacing of content material sections is one thing it’s important to do for your self in each framework, so once more, I wanted some customized CSS:
part#web page-content material, part#web page-content material > #providers
padding-prime: 3em;
part#web page-content material
padding-backside: 3em;
Nothing particular there. Since nearly the whole lot, together with the grid, is spaced with ems, I used them for the padding to maintain issues visually constant. Think of em-based mostly ingredient spacing as a constructed-in baseline grid that you would be able to simply benefit from.
Here’s how the entire thing seems to be now:
The footer
Let’s give ourselves a useless-easy footer, with a few navigation hyperlinks, and a copyright discover, as a result of why not?
<footer id="web page-footer">
<div class="row">
<div class="small-12 medium-S columns">
<ul class="inline-record">
<li><a href="#">Link B</a></li>
<li><a href="#">Link P</a></li>
<li><a href="#">Link O</a></li>
</ul>
</div>
<div class="small-12 medium-S columns">
<p class="textual content-proper">Copyright © Our Company, 2014</p>
</div>
</div>
</footer>Here, I’ve included an Inline List (see above) for these footer hyperlinks, and two columns that go vertical at cellphone-dimension. Here’s the CSS I used:
footer#web page-footer
padding-prime: 3em;
padding-backside: 3em;
border-high: 1px strong #cecece;
And voilà! A naked-bones touchdown web page so that you can customise to your coronary heart’s content material. Here’s what the entire thing seems to be like:
Grab the zip file if you happen to like, and play with the code that’s already there. Start from scratch, and try the supply. Or, you may simply have a look beneath on the coaching supplies that others have made…
TUTORIALS & TRAINING
Training supplies by ZURB
As you would possibly count on, the fellows at ZURB have gone past documentation by offering us with some coaching supplies of their very own. These take the type of the Foundation Course, and the Advanced Foundation Course. These coaching supplies are supposed to be downloaded and seen domestically.
ZURB additionally provides paid coaching courses which might be taken on-line. You can discover extra details about this on their website.
Screencasts by Webdesigner Depot
That’s proper! We’ve made some coaching movies of our personal, with a particular give attention to Foundation H. Check them out on Youtube: Foundation 5 Introduction, and Using Foundation’sAdvanced Features
Getting began with the ZURB Foundation H Grid
This set of screencasts by James Stone covers all of the fundamentals. Topics embody: Setting up the Project, Starting with the Desktop Grid, Nested Desktop Grids, Adding Placeholder Images, Creating the Mobile Experience, and Refining the Tablet Experience.
ZURB Foundation H framework tutorials
The guys at ieatcss.com went and wrote an entire e-e book all about Foundation H. You can discover their newbie tutorials here. If you need one thing extra superior, you may obtain their e-book for 29 USD.
Why would you pay that? Because as a substitute of simply telling you methods to use the framework, they clarify how all the pieces works. And I do imply all the pieces, together with the JavaScript plugins.
Mastering Foundation Zurb. tutorials from A to Z
This is one other set of tutorials, adopted by an optionally available book. These are offered byMonsterPost, the TemplateMonster weblog.
Foundation’s sassy types defined
If you’ve been craving a barely extra superior, in-depth tutorial, here you are! In this put up, our mates at Tuts+ describe, in nice element, methods to customise FOundation from the Sass recordsdata up.
If you’ve by no means labored with Sass information earlier than, begin right here.
How to create responsive tables in Foundation
Lastly, the good guys at Sitepoint present us how you can create responsive tables. Mind you, it is a resolution that Foundation implements by default. In this tutorial, you’ll be able to discover ways to take one particular element of Foundation, and combine it into one other mission.
(If you’re new to internet design, you’ll have heard one thing about tables being “evil”. Well, for those who use them for structure out your web site, that’s completely true. However, generally knowledge is finest represented in a tabular format, so it’s good to learn to make tables readable on cellular gadgets.)
FORKS
Gumby – a Foundation fork
One stunning factor about open supply frameworks like Foundation is that their licenses enable individuals to take them, change them, and even name them their very own. The designers and builders at Digital Surgeons did simply that.
They saved the structural elements of Foundation, after which included some fascinating new consumer interface parts and jQuery plugins of their very own. The consequence was named Gumby, and it’s a incredible framework in its personal proper.
Where Foundation is designed to be versatile, and go well with each content material-pushed web sites and internet functions, Gumby is extra specialised. It’s targeted on one factor: content material-pushed web sites, and the simple creation thereof.
Almost flat UI
The adjustments to Foundation in this fork are so delicate that I’m undecided whether or not to name it a fork or a theme. It is, in essence, Foundation H.P.P with just some, small aesthetic modifications.
What makes it attention-grabbing to me is that these modifications buck the “flat design” pattern in very small methods. The reasoning behind it appears to be that sure consumer interface parts, like buttons, ought to retain a delicate reference to the third dimension.
It’s barely skeuomorphic design, and I suppose it may really improves usability. Well, for some customers, anyway.
MISCELLANEOUS RESOURCES & TOOLS
Here are some fascinating Foundation associated instruments and issues that didn’t fairly slot in another class:
Building Blocks by ZURB
The Building Blocks are snippets of code constructed with and/or for Foundation. These embrace new UI elements, reusable content material layouts, and extra.
Sublime Text snippets
Sublime Text is a incredible textual content editor utilized by programmers world-large. These snippets(chunks of code meant for straightforward insertion into any file) are mainly meant to make constructing layouts with Foundation go that a lot quicker. They’re appropriate with each Sublime Text P & A.
Experimental grid generator
Is the default twelve-column grid to not your liking, or not proper to your challenge? Then make a brand new one! Just head over to this grid generator, enter your values, and seize your CSS.
Mind you, the CSS appears to be primarily based on an older model of Foundation, so it’s possible you’ll have to adapt it to the newer class names and responsive courses. Still, it does all of the exhausting calculations for you.
Bookmarklets
Bookmarklets are little instruments, often constructed with JavaScript, that may be positioned in your bookmarks bar. Once you set off them, they will share the present web page, show helpful data in an overlay, and plenty of different helpful little issues.
The Grid Displayer Bookmarklet by Antoine Lefeuvre can be utilized to overlay a visible grid on prime of no matter web page you’re engaged on in the meanwhile. The grid is customizable, however you’ll be able to set it to the Foundation defaults simply.
The Vertical Rhythm Grid Bookmarklet by Kevin Altman does a lot the identical factor because the Grid Displayer. The distinction is that as an alternative of vertical traces, you get a bunch of horizontal strains that will help you handle the vertical area between parts.
The [Responsive Design Bookmarklet] by Victor Coulon will reload the present web page you’re on inside a device that lets you shortly preview your designs at totally different resolutions.
A LOOK AT WHAT’R COMING
You’d higher imagine that ZURB isn’t sitting nonetheless. Along with the entire different stuff they do, they’re arduous at work. They’ve obtained some cool stuff coming, like:
Foundation for Apps
ZURB is making a model new model of Foundation which is not going to exchange Foundation H, however work alongside-aspect it. It will embody options particularly for designing, prototyping, and constructing net functions.
Features will embody a brand new grid, integration with Angular.js, new options designed particularly for prototyping and extra. To learn extra about what they’re doing, see what they need to say for your self: The Next Foundation.
Motion UI
Technically, Motion UI might be part of this new, app-centric model of Foundation, however I think about will probably be accessible as a separate element to be used anyplace. (That’s an informed guess, nothing extra…) What is it? It’s an animation library.
Modern apps make heavy use of animation, not simply to impress the customers, however to enhance usability. Motion UI is designed to make that simpler for these of us constructing complicated interfaces.
According to the ZURB guys themselves:
ZURB has cherished flat for sixteen years. We’ve flattened every part from Foundation, to our apps to our stomachs (we want — we had been engaged on it). But the flattening of the online has had its drawbacks. Minimizing most gradients, shadows and skeuomorphic parts has left a void within the design world for content material differentiation. Motion helps us convey that again.
And whereas I assume that the deliberate, full elimination of skeuomorphism could have been a slight over-response within the first place (see what I stated earlier about “Almost Flat UI”), I’m glad that we’re arising with alternate options. We want new methods to inform our customers the best way to get probably the most out of our merchandise, and animation is a good way to handle that.
CONCLUSION
Foundation is simply what its title implies. It’s a place to begin, and it’s an important one at that. It’s not the one nice framework on the market, nevertheless it’s a strong alternative for anybody who desires to construct stunning merchandise quicker.
Is it best for you and your tasks? Take a glance inside and discover out.
Leave a Comment