Exploring Frameworks

Today, Erik Fadiman walked us through some of the lastest frameworks for responsive web design.

Exploring Frameworks– speed and efficiency: Less Framework 4. Desktop first. Gives a lot of padding to ensure visibility on all devices. Snaps to sizes. Uses pixel dimensions (not percentages–things break if you do). Reliable. Orient yourself with the styles’ media query sections because you can get lost in the css because all of the styles live on one page. Simple package: index.html and style.css

less framework column guide
less framework column guide

Bootstrap. Popular Framework right now. Steep learning curve, but “you’re going to see it when you get out of school.” Customizable. Navigation bar at top collapses in mobile. (That’s becoming the standard in the industry.) This is practically a permanent fixture. Fluid grid. Customizable before downloading– read template building. Uses fluid layout (percentages, not pixels). 12-column grid. You need command+F to find things in the CSS. Complex package:  css and javascript for all of the bells and whistles. You must hook up your index.html yourself. File size adds up quickly.

Screen Shot from Bootstrap website
Screen Shot from Bootstrap website

Toast | A simple CSS framework. Very simple to 1140px (The 1140px CSS Grid System · Fluid down to mobile) that I have been working with. Two break points. Simple package: style.css, rest.css, grid.css, toast.css

Amazium – The responsive web framework..!. Includes typography. Fluid grid (percentages). Medium package: 3 css files and 4 js.

HTML

  • index.html: The base html page with all the includes setup for you as well as some examples for you to use quickly like Tables & Forms.

CSS

  • base.css: All the generic styling you would expect I .e. h1, h2, h3, h4, h5, h6, blockquote’s, Links, Bulleted list’s etc. and your standard generic CSS reset.
  • amazium.css: The backbone for controlling the 960 grid, depending on what device you are looking on and you shouldn’t need to change any of this.
  • layout.css: A blank place to add all the CSS that makes your site look awesome.

Images

  • favicon.ico: Standard 16px x 16px favicon
  • apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.”
Screen Shot of amazium
Screen Shot of amazium

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development. Comes with a 16 col psd to make a mock-up. The website is a lot more informative about the framework, includes examples and extensions.

Screen Shot of psd template
Screen Shot of psd template

“The file structure for Skeleton is:

  • index.html: The base html page that includes the necessary initial markup
  • stylesheets (folder)
    • base.css: Basic styles of Skeleton
    • skeleton.css: The glorious Skeleton grid
    • layout.css: File with no specific styles, but a variety of useful media queries
  • images (folder):
    • favicon.ico: Standard 16×16 favicon
    • apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.”
Advertisements

6 comments

  1. I’m really enjoying the design and layout of your site. It’s a very easy on the eyes which makes it much
    more enjoyable for me to come here and visit more often.

    Did you hire out a developer to create your theme? Superb work!

  2. I will immediately grasp your rss as I can’t in finding your e-mail subscription hyperlink or e-newsletter service. Do you’ve any?
    Kindly permit me realize in order that I may subscribe.
    Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s