Notes on CSS Frameworks

gistfile1.md

Example Code

CSS Frameworks

The aim of frameworks in general is to provide a common structure so that developers don’t have to redo it from scratch.

CSS frameworks:

• allow for quicker and easier styling
• provide a cohesive, semi-polished look right off the bat
• are super easy to install!
• help with mobile-friendly layouts

What do frameworks provide?

• A grid system
• Nicer typography
• A basic color scheme (which you can mess with!)
• Pretty styling on things like buttons, nav bars, forms, etc.
• Helper classes for things like aligning text

Word of warning: Don't let frameworks be the only styling you do! If you're lazy, your website will look very generic!

What frameworks are there?

• Foundation (preferred)
• Bootstrap
• Pure
• Many, many others

How to use Foundation

1. First, download it here!
2. Copy css/foundation.min.css and css/normalize.css into your project's stylesheets folder
3. Link to the stylesheets from your layout.erb file in this order:

• normalize.css
• foundation.min.css
• your own stylesheets!

Bam! You're up and running!

Just by having it installed, Foundation gives you a whole new look - but don't stop there!

Some Resources:

Foundation documentation: This will become your new best friend! All the tools are explained with examples via the bar on the left - browse through to get a sense of what Foundation can do for you. Example code abounds - use it!

Foundation templates: Mostly use these as inspiration for how to use Foundation. Don't go copying an entire page of code from here - that'll just make you lazy! If you find a piece of a page you really like, use their code to learn how they use the Foundation tools to make it happen.

Inspect Element: You should be using this all. The. Time. Right click the webpage and hit "Inspect Element", or use Cmd + Opt + I. Click on an HTML element to see the styling that is applied to it!

The Foundation grid system

This allows you to use HTML classes to format the layout of your page! By adding class="blah" to your HTML element, you get all the nice formatting that Foundation provides for that class.

Foundation imagines that every element of the page is divided into rows and columns. This allows you to specify what sort of space you want your content to take up! You can add rows all you want. For columns, Foundation divides every element into 12 imaginary units of space - you use this to specify what width you want your elements.

Here are some of the classes you'll use:

• row: marking something as a row will cause it to take up the full width of its parent element. Use this to mark out a space for vertical elements to reside inside.
• column or columns: Preferably use this to wrap your actual content. This will create a column of a certain width (see below) that your content will reside inside.
• small-#: This is how you pick how wide your columns are. Remember, every parent element is divided into 12 imaginary units. small-# specifies how many of those units you want your column to take up. If I write small-3, my column will be 3 units wide, or 25% the width of the parent element. small-12 will take up the full width of my parent element.
• medium-#, large-#: the "small" part of the above class means "with small screens, do this". Here you can specify different widths for medium and large screens! This will mean your layout changes depending on screen size. (Yay mobile-friendly design!)

Check out the docs for more useful classes like offsetting your rows, centering columns, etc.

Useful basic features to check out:

• Utility classes: these give you handy all-around tools to use - like text alignment!
• Forms: they can be so beautiful!
• Buttons: make everything nicer.
• Inline lists can be pretty handy!
• Panels help visually organize content on your site.
• Typography: Foundation lets you do some cool useful things with your text!
• Tables: Foundation makes them beautifulll.
• Pretty nav bars: See the templates page for more pretty nav ideas!

Extras!

Setting up your layout file

I like to have my website content centered with some space on each side, and Foundation makes that super easy! Inside the body tag of every layout.erb file, I wrap the <%= yield %> with some divs with Foundation classes:

<div class="container">
  <div class="row">
    <div class="column">
      <%= yield %>
    </div>
  </div>
</div>

Using JS-based features

Some things, like alert boxes, you need to install Foundation's Javascript files in order to use. Here's how:

1. Create a folder in public called js
2. Copy the entire contents of the Foundation js folder into your js folder
3. In the head section of your layout.erb file, require modernizer.js:
   `<script src="/js/vendor/modernizr.js"></script>'
4. Right before the closing body tag in your layout.erb file, require jquery and foundation's main js file:
   <script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
   
5. Last of all, right beneath the above code, call Foundation's foundation function to get things running:
   <script>
$(document).foundation();
</script>
   

Some cool JS-based features:

• Tool for creating equal-height columns
• Awesome. nav. bars.
• Cool dropdown buttons
• Tabs
• Pop-up lightboxes, aka "modals"
• Cool "walkthroughs" of your page