Hi, please

Tag Archives: blueprint css

Hummus V.2 and Helpful HTML & CSS links

I aimed to make Hummus v.2 as simple and straightforward a tutorial as possible, since it’s a recipe that anyone (with or without cooking skills) ought to be able to follow.  In case the design/layout isn’t clear or doesn’t accomplish those goals, please do give some feedback.

Using Blueprint CSS eliminated the need for me to go deep into CSS coding.  This was Very Nice.  Working with what Blueprint generated for me, I only needed to tweak some div, type, and img styles.  I had sized down my images in Photoshop (and Saved for Web and Devices!) before uploading them to my directory, so that there was no need for thumbnails or to “click to enlarge”.  Having sized my pictures to a pre-determined size, I also didn’t have to put in “width” and “height” attributes to the image tags.

While coding Hummus v.2, I googled many sites for help with HTML and CSS coding.  I still stick to my initially recommended sites: HTMLDog (for excellent HTML and CSS beginner tutorials) and W3Schools.com.  You really can’t beat free information that is this accessible and clear in instruction.  For those of you who like to “learn by doing”, the “try it for yourself” feature in w3schools is great–it allows you to see your code side by side with what it’d look like in a browser window.

HTMLDog:  Common HTML attributes

W3Schools.com:  Grouping and Nesting CSS Selectors

Let’s try again, this time with more *Style*

Now that we got some initial experience with Blueprint let’s dive a bit more into it.

  • First of all I would recommend you to subscribe to the Blueprint CSS mailing list where you can both ask some questions when you run into difficulties, learn from other people’s experience, and yes, one day also help others with their BP & CSS questions…
  • Second, go back to your PSD file and make changes to it based on the feedback you got in class.
  • Third, fix your css grid if it need any more fixing and go direcly into all the details, styling all the graphic and typographic elements in the page including: hover states, images and all. Feel free to steal take inspiration from other html/css designs you find online. Visit the html validator every now and then, and try to see what you can learn from it.
  • Post at least once to the blog this week with a tip for the rest of us, some clever way you found of doing something or even a problem you have that you want us to help you solve. Please post before Saturday night 11:59pm.
  • Post at least 3 comments to your fellow students on Sunday and Monday so they might make more progress on their designs through the week.
  • Try to implement the feedback you are getting in class and post again as you make more progress.
  • If you haven’t yet, get familiar with your Parsons webspace or buy your own domain name with a hosting space that supports PHP 5 and preferably also provides one-click install for Wordpress.
    I use Dreamhost and can recommend it + give you any of the 3 discount keys (for ~$50 discount) I have: 494827242184, 652338575666 or 778630683845 Go here and enter one of these numbers towards the end of the signup process, if non of them work, use the promotion code: OSD
    Disclaimer: I get a discount from this too.
    If you don’t want Dreamhost, you might choose one of the hosts recommended by Wordpress.org (Dreamhost is one of them)
  • The final links to your works should already be hosted on your own sites (or Parsons webspace).
  • If any of you have technical (or other) problems with this assignment, or want to consult me on anything, please use email. Don’t wait for the last moment with it. Best way would be to post a screenshot and a link on the site and email the list (osd5 {at} mushon [dot] com) if you want our immediate feedback on it. The rest of the class will be able to better help you that way too.
  • To start gearing ourselves towards the Wordpress assignment, I also want you guys to try to think of a site you might want to build with Wordpress this can be a blog but it can also be much much much more.
  • Next week’s great wide open would be led by Ken (email me with your topic if you want my help)
  • Next week’s How To How To would be led by Mei (“)
  • Enjoy!

See you next week,

Mushon.

Hummus Tutorial v.2

I missed out on comments since I was out last week (click here to view last week’s hummus tutorial v.1), but I tried editing down my hummus tutorial by consolidating some steps and laying it out in a neater “recipe card”-like format that’s easier to read and follow along.  The image below (click to enlarge) is a Photoshop mockup of my hummus tutorial v.2 page layout using the quomunnication ps starter kit.  I modified it again after implementing Blueprint, since the default type styles utilized the Helvetica Neue/Arial/Helvetica font stack, and I was initially hoping to use Georgia.   Since the sans serif font stack and heirarchy worked well with my design layout after all, I kept it.

I created my  new CSS styled Hummus Tutorial v.2 webpage using: Komodo edit, Blueprint, Bluecalc, Firefox, and Firebug.  Click here to view updated hummus tutorial v.2

I found the BP wiki demos (with Firebug to view the HTML and CSS markup) and the Quomunnication PS starter kit to be really helpful in my process.  One thing I had trouble with was utilizing the “colborder” vertical rule (from the BP wiki demo), which I thought might be nice to implement in my Equipment/Ingredients section.  I used a margin of 1em around my images, which in addition to the colborder’s right side margin and padding, made my columns add up to more than my container (pushing everything down to the next line).  I couldn’t quite get the img class=”push-#” and img class=”pull-#” to work exactly to resolve that issue either.  Anyhow, Blueprint was great in helping with my layout styling–I didn’t have to get too deep in CSS coding.

Brief: Tutorial#2 – HTML+Layout

Now that we have made our initial introduction to Blueprint CSS I would like you to start using the grid to build your webpage’s layout.

For next week:

  1. Read the Typography tutorial at Smashing Magazine and apply your lessons from it to your design.
  2. Based on the feedback you got in class, reiterate through the html and mockup you made for this class. Feel free to make the adjustments needed to your previous HTML file to fit your new layout.
  3. Use new HTML elements, ids and classes to style your page, use Firebug to monitor the html and css and to learn how would your tweaking of the code modify the browser’s rendering of the page.
  4. For next week, you should work only on the layout, you are yet not required to work on the typography, images and styling (though you can if you want), we will do that next week. As far as the layout goes, it does not have to be very sophisticated, but try to make sure you’re teaching yourself new things while you’re at it.
  5. Post your questions and references to the blog, we would try to work together finding ways around problems and tricks to solve them. Use the instructions on the How-To and the Resources pages to post code examples in your posts.
  6. Leave your comments, insights, ideas, references to Jonathan’s How To How To post titled HTHT—Delicious Bookmarks Add-on.

Next week we will enjoy a Great, Wide Open presentation by Angel and a How To How To post by Miriam.

Enjoy.

Into (Blueprint) CSS

You hear a lot about the grid in your print classes, well, you’ll hear a lot about it in this class too. But this time you would actually get to experiment with it as well. First, let’s briefly go again through the Grids Are Good presentation by Khoi Vign from NYtimes.com and Subtractions.com fame.

After getting your hands dirty in HTML, it is time to dive into CSS. Luckily we are not starting from scratch and a lot of the heavy lifting will be taken care of for us by BluePrint CSS – a Cascading Style Sheets framework. What does Blueprint gives us?

  • CSS reset for default browser styles
  • An easily customizable grid
  • A way to separate custom designs from the basic grid settings
  • Some default typography
  • A stylesheet for printing
  • A typographic baseline (should we choose to use one)
  • More…

What do you need to do?

  1. Download BluePrint CSS
  2. Unzip it
  3. Create a css directory where your HTML file is and copy the blueprint folder into it
  4. Choose how many columns and width you want in your grid
  5. If it’s not the (30+10)*24 default Blueprint grid that you’ll be using, you can build your custom grid using the Grid Generator
  6. Open the screen.css file in your favorite text editor
  7. In that file, replace the code under the comment /* grid.css */ (and before the comment /* forms.css */) with the one provided to you through the generator.
  8. Go back to your html file and include a link reference to the CSS files in the header (check the documentations if you’re not sure how to do it). the syntax should be something like this:
    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">	
    <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
  9. Create another css file to include your own styles, you can call it my-styles.css like in the example above, or by the name of the site, or whatever. Place that file inside the css folder next to your blueprint folder. Make sure to specify that name in the link tag that calls the css file. Also make sure it is the last to be linked to the html page so it overwrites the default Blueprint styles. The way to reference that file (right after the reference to the blueprint files in the head of your html) is:
    <link rel="stylesheet" href="css/my-styles.css" type="text/css" media="screen, projection">
  10. Start assigning classes to your html elements, adding divs and other elements appropriately to group them together and develop your layout.
  11. Write your CSS in that file and use firebug to monitor your changes
  12. Enjoy

You can check the quick start tutorial here.

For more resources, check the Blueprint CSS wiki page