foundation4

I’m Loving Foundation 4

Better than Bootstrap 2, but maybe not Bootstrap 3

I haven’t tried Bootstrap 3 yet, but Foundation lays waste to Boostrap 2. First off, Foundation has far more semantic class names than Boostrap. Bootstrap uses the class “col-sm-6” to indicate a column that takes up 6/12 of the grid on a small screen. Foundation’s class names for the identical grid is “column small-6”. I much prefer the latter, because I’m typing English. Also, by using a separate class to specify the column, I can use “small-6” all by itself without the column properties.

I’ve done some looking at Bootstrap 3, and it appears to have either borrowed from Foundation or migrated closer to it in terms of mobile-first design patterns. The whole point of using a framework like Bootstrap or Foundation is to not spend your time reinventing responsive grid systems and other common CSS constructs. There is no more excuse for building non-responsive websites or applications. Please don’t do it.

Button vs Btn

I kinda hate how Bootstrap does its button classes. First off, you have to give them all the “btn” class, even if it’s a <button> element. Second, you have to specify “btn-primary” to get your primary button colors. Foundation does not require any of this biz. You can do <input type="submit" class="button"> if you want, or you can just use a <button> element and the button class is assumed. Foundation assumes that all buttons are primary unless a “secondary” class is present. Boostrap’s secondary button class is “btn-secondary”, because you must love typing “btn-” all of the time. Sheesh.

Compass vs Less

Boostrap 3 is now transpiled from LESS to Sass, which is great. But it should be written in Sass/Compass first and transpiled to LESS, because Compass is a far better CSS preprocessor than LESS.

Bootstrap 3 has a customization tool on getbootstrap.com so that you can build Bootstrap with the parts that you need and nothing more. Awesome.

Want to know what’s better? Foundation gives you all of the SCSS files that it uses to build the core Foundation library, and you get to include what you will in the actual code. Also, Foundation’s SCSS files do not have hard-coded values. All values are assigned to variables in _settings.scss and can be overridden at any point in the compilation process, so your entire theme can be created in a single _settings.scss file. This results in a ridiculously modular and customizable experience.

Modular CSS

Here’s a master SCSS file that I’ve been using on my most recent project.

style.scss

“`

// app/css/style.scss

// Make sure the charset is set appropriately
@charset "UTF-8";

// Core.
@import
  "compass",
  "compass/reset",
  "compass/css3/box-shadow",
  "compass/css3/opacity",
  "compass/css3/transform",
  "compass/utilities/general/clearfix";

// Import Foundation functions
@import "../lib/foundation/scss/foundation/functions";

// Import local Foundation settings
@import
  "theme/color",
  "theme/font",
  "theme/backgrounds",
  "theme/spacing",
  "theme/settings";

// Behold, here are all the Foundation components.
@import
  "../lib/foundation/scss/foundation/components/grid",
  "../lib/foundation/scss/foundation/components/accordion",
  "../lib/foundation/scss/foundation/components/alert-boxes",
  "../lib/foundation/scss/foundation/components/block-grid",
  "../lib/foundation/scss/foundation/components/breadcrumbs",
  "../lib/foundation/scss/foundation/components/button-groups",
  "../lib/foundation/scss/foundation/components/buttons",
  "../lib/foundation/scss/foundation/components/clearing",
  "../lib/foundation/scss/foundation/components/dropdown",
  "../lib/foundation/scss/foundation/components/dropdown-buttons",
  "../lib/foundation/scss/foundation/components/flex-video",
  "../lib/foundation/scss/foundation/components/forms",
  "../lib/foundation/scss/foundation/components/inline-lists",
  "../lib/foundation/scss/foundation/components/joyride",
  "../lib/foundation/scss/foundation/components/keystrokes",
  "../lib/foundation/scss/foundation/components/labels",
  "../lib/foundation/scss/foundation/components/magellan",
  "../lib/foundation/scss/foundation/components/orbit",
  "../lib/foundation/scss/foundation/components/pagination",
  "../lib/foundation/scss/foundation/components/panels",
  "../lib/foundation/scss/foundation/components/pricing-tables",
  "../lib/foundation/scss/foundation/components/progress-bars",
  "../lib/foundation/scss/foundation/components/range-slider",
  "../lib/foundation/scss/foundation/components/reveal",
  "../lib/foundation/scss/foundation/components/side-nav",
  "../lib/foundation/scss/foundation/components/split-buttons",
  "../lib/foundation/scss/foundation/components/sub-nav",
  "../lib/foundation/scss/foundation/components/switch",
  "../lib/foundation/scss/foundation/components/tables",
  "../lib/foundation/scss/foundation/components/tabs",
  "../lib/foundation/scss/foundation/components/thumbs",
  "../lib/foundation/scss/foundation/components/tooltips",
  "../lib/foundation/scss/foundation/components/top-bar",
  "../lib/foundation/scss/foundation/components/type",
  "../lib/foundation/scss/foundation/components/offcanvas",
  "../lib/foundation/scss/foundation/components/visibility";

// FontAwesome
/*!
*  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/

//@import
//  "../lib/font-awesome/scss/variables",
//  "../lib/font-awesome/scss/mixins",
//  "../lib/font-awesome/scss/path",
//  "../lib/font-awesome/scss/core",
//  "../lib/font-awesome/scss/larger",
//  "../lib/font-awesome/scss/fixed-width",
//  "../lib/font-awesome/scss/list",
//  "../lib/font-awesome/scss/bordered-pulled",
//  "../lib/font-awesome/scss/spinning",
//  "../lib/font-awesome/scss/rotated-flipped",
//  "../lib/font-awesome/scss/stacked",
//  "../lib/font-awesome/scss/icons";


// Imports
@import
  "imports/retina-sprites",
  "imports/sprites",
  "imports/mixins";

// Modules
@import
  "modules/global",
  "modules/forms",
  "modules/landing-page",
  "modules/logo";

”`

style.scss is the only file that my Compass preprocessor interprets. It’s basically a import file that imports all of the components that I want to use in order. This keeps my files separate and modular.

Here’s a quick rundown of the modules that I’m importing:

  • Core: Compass ships with a bunch of useful mixins and resets, which I import right away so that I can use them throughout the rest of my files. I’m a huge fan of Compass’s css3 mixins. They handle the vendor prefixes so that I never, ever have to think about them.
  • Foundation functions: Foundation ships with some useful mixin functions, so I’ll import those as well.
  • Theme: I like to use Compass @each and @while loops to generate color, font, background and spacing classes. I hand Compass arrays of colors, fonts, background colors or spacing, and it makes the classes for me. Notice that there’s a “theme/settings” file in there as well. This is Foundation’s _settings.scss file where I can override all of the default colors and sizes before importing the rest of Foundation’s components.
  • Foundation: Once I’ve imported my favorite mixins, theme files and settings, I’m ready to import foundation’s SCSS component files. I can comment out any of these components if I choose not to use them, but I’ve included all of them for this project.
  • FontAwesome: Bootstrap uses Font Awesome, and I’ve found Font Awesome to be incrementally better than Foundation’s Icon Fonts. I had some trouble with FontAwesome’s SCSS import, so I just included font-awesome.css in my index.html file. I’m sure I could have solved the issue in a few minutes, but it wasn’t worth fussing with. My CSS gets concatenated anyway.
  • Imports: Compass ships with sprite sheet generating functions. I drop my sprites in a folder and Compass generates the sprite sheet and classes for me. I don’t need SpriteCow any longer! It saves me tons of time, especially because I use a Grunt watcher to watch for changes in my SCSS files, recompile with Compass and reload my page with LiveReload .
  • Modules: There are the occasional bits of CSS that I need to write specifically for my application. I say occasional bits, because my modules files are super thin. Most of them include just a handful of custom classes or overrides, because Foundation provides nearly everything that I need to compose a page, and I can override all of Foundation’s defaults in _settings.scss.

In Conclusion

If you’re reading this and have not yet committed to responsive design, please re-evaluate your objections and get on the train. Sites need to be designed for mobile, because that’s how a surprising number of your customers will use your product. And if you design mobile-first and keep everything responsive, your pages will look amazing at any screen resolution without resorting to crappy “m.mysite.com” tricks.

If you’re reading this and haven’t tried a CSS preprocessor, go give Compass a shot. Compass is a preprocessor for the Sass CSS language, and it is super powerful. Less Css is fine too, but it’s just not the same, and it’s no easier to use, so just use Compass/Sass and be done with it.

While I’m at it, you should probably be using Grunt and Yeoman as well. They’re both excellent workflow tools for front-end development.

Full height colum on css foundation trick

Since year ago foundation framework don’t have plan to support this feature (full height column), so I’m share this trick for you

HTML

<div class="row">
<div class="large-8 column">
    <div class="main">My Main</div>
</div>
<div class="large-4 column full-height">
    <aside class="sidebar">
        My Sidebar
    </aside>
</div>
<div>

CSS

.full-height { 
    display: table;
}

.sidebar { 
  display: table-cell; 
  background: #eeeeee;  
}

JQuery

$(".full-height").height($(".main").parent().height()); 

check my gist Thank you bro,