Wouldn't it be nice if websites were created like Legos? Those little bricks and pieces are great because you can use the included patterns and make something stylish, or mix all your pieces together to create a truly custom masterpiece. All you need are lots of useful pieces to choose from and a vision. You can design something beautiful, or make a crazy and amazing contraption. Unfortunately the web doesn't quite work like that. Maybe in the future it will. Until then, we're working toward a vision with Foundation — to include the pieces you need to put together amazing creations.
With Foundation, we work hard to stay out of your way as you design. We want you to make Foundation your own, as you see fit, like we do on each client project. In our last post, we touched on ways to streamline the codebase for faster load times and make CSS more manageable. Some of this we already figured out in Foundation for Apps. One of those was building onto a very basic component to make a more complex component you need.
The Ultimate Lego Piece
Now you're wondering how — let us explain. Considering how important navigation is to most every site, we set out to create a navigation pattern that fits more needs in a progressive enhancement kind of way.
Like in Foundation for Apps, we are adding a menu-bar. At its simplest form, it's a set of links. This one component can replace the current inline-list, and by adding the vertical class, replace the side-nav. You can make the links aligned right, left, or spread evenly.
But who wants plain links? You can also add a background with our color classes, primary, secondary, success, etc. Of course you can set those color variables to match the branding of the site you're building. Need to add buttons and forms? No problem. If icons are also part of the design, they you can align them on top of the text, to the left, or without text.
To make more complex menus, you'll likely add dropdowns or drilldowns, and flyouts. This one component replaces top-bar, inline list, side-nav, and icon-bar and can be used as a main navigation or in other situations. Combining all these into one reduces CSS needed as the base menu-bar style. It only needs to account for the add-ons, as opposed to old navigation components that duplicated the entire base component and the add ons for each addition. One component can solve most any navigation need you'll have, saving time and the headache of rolling your own. Because it's all one component that can be extended upon, it's easier to learn and use in different projects with unique results. We want this to be the navigation Lego piece you need for your creation.
To take this further, we're adding a new card component to Foundation and the existing panel will be renamed "callout." A callout, a card and an alert all have the same base style — a box with padding and a background, done. OK, cool, but now what? Well, if you need more than a panel like an alert, just add the "close" plugin. (In the next version, you'll have a universal API for all the JS plugins to open/close/toggle.) This also covers making a card component as the needs a top section with no padding, and a bottom section with. So we can reduce CSS file size by creating a base style that can be extended upon as needed.
Reducing CSS
Currently, Foundation has separate components that do slightly different things. The inline-list creates a simple horizontal set of links and the side-nav makes them vertical. So you have a side-nav mixin, and all the variables for it, plus an inline-list with its mixin! Instead, by combining these like styles, you just need something like this to take the default horizontal and make it vertical:
&.vertical {
> li {
width: 100%;
float: none;
}
}
As always, we build components so you can use the mixin with your own names, or just use the built-in class names. Classes can chained together like:
<ul class="menu-bar primary icon-top">
As we continue building the next Foundation, we'll keep looking at ways to keep it lean and make the components more useful.
Benefits of Combining Components
Combining components is a way to give the codebase a smaller footprint. Some base styles can be used to build up to more complex components. This makes components more useful because one component can be used in different ways just by adding on as needed. This gets you faster load times and makes CSS more manageable. Not to mention that there are fewer components and classes to memorize. Ultimately we're focusing on solutions to get you from prototype to production is faster.
Legos are great for making some amazingly beautiful creations as well as complex and useful things. While building websites is not quite like building with Legos, developing professional sites requires components in our framework that can be used in many different configurations and styled your way. We're looking to make the components in Foundation more useful. Because as we have learned from our own Studios work, having great building blocks is it certainly faster than rolling your own. Combining base styles will not only simplify the codebase but also make the components more useful in more projects and simplify learning. Foundation gets us to answers faster with tried and true patterns. We envision people using Foundation to rapidly prototype, then take their concepts right into production. Having a box of better Legos will help you get there.
