Using Foundation 5 SCSS Without Git, NodeJS, or Ruby on Windows

When it comes down to it, Foundation is, at it’s essence just a set of scss files that get compiled to css files, and two javascript files….foundation.js and modernizr.js,  that you can include in your website.  If you want to use any of the javascript components (and you should), then there are some additional javascript files you should include, as well as some particular version of jquery.

Really, all you need to get started with Foundation scss is a program to compile the scss files.  Ideally your IDE would do this, but most IDE’s don’t have that capability just yet, so you will need to download a separate app for it.  I recommend Scout , because you can specify an output directory and it doesn’t hog the CPU, but I also like Koala….Koala is dead simple and made especially for designers, but it compiles the scss in the same directory, which I don’t like, because after all…who wants their scss and css files living in the same directory.  I used to like Prepros, but it’s gotten CPU intensive, and all the cool features are “paid” features now.  All three have additional features in that they will also process and minify your js and css…and Prepros even goes so far as to offer stitching, which is a really nice feature where it automatically stitches together your css and js files into a single file…something very handy for optimizing your website in production.  This can get you in trouble in js since there are usually some dependencies and not everyone has mastered closures, modules and lazy loading and often, the load order matters, but definitely give it a shot and then check to make sure everything still works.

Download Foundation

https://github.com/zurb/foundation/archive/master.zip

There’s a composer file for keeping track of dependencies, but for the most part you don’t really need it..if you are doing everything command line, and used to using composer, then feel free to use it to download any dependencies, and if you are feeling bold, run update to get the latest versions of the dependencies and see if everything still works.  Otherwise, unzip the files, and you can just copy the /scss and /js directories from the unzipped zip file.  Feel free to delete any js application files that you aren’t going to use (and their corresponding scss files…also edit the /scss/foundation.scss file to remove references to those files), and in fact I highly encourage this to keep your website optimized for speed.  The only files you absolutely need are the /scss/foundation.scss, /scss/_settings.scss, foundation.js and the modernizr.js files.  The js files should go wherever you normally put your js files, but the scss directory can go just about anywhere.  Ideally put them in your IDE’s project directory, but not in the deployment directory.  They can be deployed, but they won’t be used because these are the files that get compiled into the css.  So you’ve moved your scss files to some particular directory, and copied the js files that you want to your js directory.  Now when you fire up your SCSS (SASS) compiler and “Add New Project” and specify your project directory.   A warning if you are using PrePros….it can be VERY slow when it initially scans your project before it’s ready to go.

Now make sure you are including the normalize.css, and foundation.css files that get compiled, and some version of jquery along with the foundation.js file.  I’ve used jquery 1.10.2, but if you are going to use the javascript apps, you’ll probably want to use the latest jquery.  These are the official listed dependencies for Foundation 5.3.3… “jquery”: “>= 2.1.0″,”modernizr”: “>= 2.7.2″,…..the rest are listed as dependencies, but I don’t believe they are absolutely required.  Fastclick is used to make mobile clicks faster…jquery cookie is used by Joyride js plugin….and jquery placeholder is used for IE9 polyfills:  “fastclick”: “>=0.6.11″,”jquery.cookie”: “~1.4.0″,”jquery-placeholder”: “~2.0.7″.  If you run composer, it should grab these files for you (if you have composer installed just open up a command prompt, navigate to the foundation home directory you unzipped and run “composer install”), otherwise just download the “full” version of foundation and copy those particular js files that you want over to your js directory and link them.

For the most part these directions should work for Mac or Linux as long as you find a SASS compiler for your OS.

And there you have it, a barebones Foundation scss deployment with all the magic and wonder that SASS brings to Zurb’s Foundation, without the fluff.  My next article will be on using the Foundation _settings.scss file and customizing your SASS to accommodate your website’s particular dimensions.

 

 

 

Design and CSS….secret techniques of the CSS Masters

So I learned 2 things tonight…there’s an awesome tool to help evaluate your css and get you on the right track for when you create new css selectors, and that tool is CSS Lint and can be found at csslint.net and is pretty cool….something else I learned is that although I’ve always thought id’s in selector’s made for faster css….I was wrong. The article that changed my thinking can be found at http://oli.jp/2011/ids/ and is genius. Well thought out, and backed up by numbers.  He used this online app for analyzing the css http://stevesouders.com/efws/css-selectors/csscreate.php and creating test cases.  Something I didn’t know, was that css selectors are evaulated right to left….definitely something to think about.  And finally….I found an interesting article on web fonts and making sure they display properly without the faux bold or italics. It comes down to adding additional references to the font-face……a possible solution if your designer is looking on his Mac and it doesn’t match what shows up on your PC…I know how picky designers can be.  Article can be found here: http://alistapart.com/article/say-no-to-faux-bold

What’s new in Design

So I’m mostly been on the other side in the web development process.  Getting PSD’s from   designers and converting them into a website.  So the latest thing I’ve been exploring is called flexible design, also called fluid design, or even responsive design and by the very technicaly term progressive linearization.  Now as far as i can tell it all revolves around tags like

@media only screen and (max-width : 360px) and (orientation : portrait)

These let the designer specify certain css tags based on a particular screen width, so you can use the same front end code base to create multiple views for devices with different screen sizes.  I love the idea…it’s way better then having to create a separate mobile website and is way more reusable.  It seems like most of them are using %’s and em’s as well for variable size text and buttons, but I’m still getting a handle on that aspect.  There are also a new css  meta language called SASS that is getting very popular and a bunch of new css frameworks that support these flexible designs, like YAML.  My next new project is converting my affiliate website http://www.bestcellphonespyapp.com/ to YAML because most of the traffic there is coming from mobile phones, and the current layout is horrid for a phone sized screen.   Let me know your thoughts and experience on the subject.