A Closer Look At the Blueprint CSS Framework Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we'll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework. 1. What is Blueprint CSS? If you are like me, as in more of a developer than a designer, then you are familiar with the process of starting a new project and not knowing what to do with your CSS. Now, even if you are a rockstar designer who already has all this CSS stuff figured out, or if you aren't worried about how your layout will change over time because you are working from a PSD template or something, that doesn't mean that there is nothing to learn here. Spend your time innovating, not replicating. 2. reset.css This file sets sensible defaults across all browsers. No. 3. 4. The head of the document 5.
The relevance of the baseline grid Posted on 24 August 2011 • 17 comments In the talk I’ve been giving at conferences this year, With Great Power Comes Great Responsibility, there’s a section where I mention baseline grids; specifically, what I’ve learned from doing a large-scale print project like 8 Faces. However, until now, I haven’t really covered the subject on this blog. This morning I was interviewed about typography for an upcoming issue of Computer Arts and I prepared some screenshots for them. Some context I’d never really done print projects that were that big prior to 8 Faces, so I was — shamefully — a little lazy when it came to setting up and following baseline grids. Because of that, one of the original aims of 8 Faces was to give myself a much-needed kick up the bum, and I’m happy to say that it served that purpose remarkably well. The example To actually see what I’m talking about, here’s a page from the latest issue of the magazine. The lesson So I can line things up. © 2005 – 2014 Elliot Jay Stocks.
Pixel ruler - use as a design tool while setting up web interfaces Debugging style sheets isn't a whole lot of fun. Especially for persons, like me, who aren't knee deep in BBEdit all day long. Today I am trying to get boxes to float and position the way I want them too. It's not rocket science and I've done it many, many times before but as each site is different, so are the pieces to the puzzle. One of the more frustrating difficulties in this work is deciphering what causes a box to behave differently between all three browsers. Still I have to test for Internet Explorer and that's on a separate PC where xScope can't be used. And then it dawned on me that any image can be placed in the background of almost any block level element. So here it is, here you have it, a simple image that can be applied as the background to most block level elements that will help you get an idea what's going on between browsers and platforms without the need for another application.
Free 960.GS CSS Photography Template and Tutorial Love it or hate it, the 960.gs makes for some incredibly fast prototyping. By utilizing preset classes you can accomplish fairly complex layouts with little to no effort. Today we bring you a free single-page template, fully coded using the 960.gs. The template has a few nifty CSS3 effects and uses @font-face to implement some beautiful custom typography. You can download the template completely free of charge and use it however you like with zero attribution. Download the Template Here’s a quick preview of what the template looks like: Download the 960.GS Resources The first thing you’ll want to do is head over to the 960 Grid System website and click the download button at the top left of the page. The download has a ton of stuff in it but really all we need is three CSS files: reset.css, text.css, and 960.css. The tutorial below will assume that you are fairly familiar with both CSS and 960.gs. Step 1: Start Your HTML and CSS Files Paste the following code into your HTML to get started:
Technical Web Typography: Guidelines and Techniques Advertisement The Web is 95% typography1, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs? Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. Creative and Technical Typography I’m not sure these two categories are recognized in the industry but, in my mind, the two main types of typography are creative and technical. Creative typography involves making design decisions such as which face to use, what mood the type should create, how it should be set, what tone it should have — for example, should it be airy, spacious and open (light) or condensed, bold and tight, with less white space (dark)? We’ll focus on technical type in this article. We’ll learn about: <! Beware! <!
Gridding the 960 You might recall a certain dialogue on this site about optimal layout width for 1024px. And perhaps your astuteness leads you to recollect the ensuing dialogue about fluid vs. fixed width. Shift gears for a moment and see if you recall Khoi Vinh’s discourse regarding the use of a background image grid for Subtraction.com (or for TheOnion.com redesign). Cross that with Greg Storey’s px ruler background image and Christian Watson’s similar image, and the culmination of these recollections might be the following: Background image grid + pixel ruler + column divisions for 960px-width layout, all in one mean little package. Consider the possibilities: …and so on. Not keen about constructing your own grid? In related news, this was one of the items covered in yesterday’s Web Design World workshop, which appears to have gone over well based on audience feedback.
Bootstrap 3.3.0 released 29 Oct 2014 Bootstrap 3.3.0 is here! This release has been all about bug fixes, accessibility improvements, and documentation updates. We’ve had over 700 commits from 28 contributors since our last release. Woohoo! Here are some of the highlights: Added a handful of new Less variables for easier customization. For a complete breakdown, read the release changelog or the v3.3.0 milestone. Download Bootstrap Download the latest release—source code, compiled assets, and documentation—as a zip file directly from GitHub: Download Bootstrap 3.3.0 Hit the project repository or Sass repository for more options. An update for the Bootstrap CDN will be available shortly. New tools Since our last release, we’ve open sourced two new tools: Bootlint, a custom linter for all your Bootstrap projects. They join LMVTFY, our bot for quickly validating HTML in live examples. Onward to Bootstrap 4 Perhaps the best part of releasing v3.3.0 today is that we can start to tell you more about Bootstrap 4! @mdo & team
CSS Baseline: The Good, The Bad And The Ugly Advertisement Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online. This may be due to a lack of understanding and appreciation of the benefits that follow from a baseline grid, but it is more likely because baseline is notoriously difficult to get right, and no one yet holds the blueprint to its successful implementation. Some even argue baseline is redundant online, as typographic terminology and behavior on the Web follow different rules than those used in print, the frustrating discrepancy between line-height and leading being the most obvious example. For now, however, let’s assume baseline is, to some degree at least, a useful tool for Web designers. Vertical Rhythm And Pattern Recognition Grids are not only helpful on the horizontal axis, but also on the vertical axis. The Trouble With line-height (cp)
Four Methods to Create Equal Height Columns | Build Internet! Back when tables were used for layouts, creating equal height columns was very simple. All you had to do was create three cells in a row and you have a layout with equal height columns. The method for creating equal height columns isn’t as straightforward when you use CSS for layouts. This article discusses some methods to create equal height columns that work on all major web browsers (including the infamous IE6). All of these methods show how to create a three column layout. Create a layout in which all the three columns assume the height of the tallest column. Method 1: Using display: table Attribute In this method we use a list or one div enclosing a set of <div>s (one for each column). I’ll discuss this with an example: Here’s the markup for this technique Here’s the CSS Advantage: It is very simple and easy to implement. A margin (the equivalent of a cellspacing in table layouts) cannot be applied to each cell. Disadvantage: This method doesn’t work on IE7 and below. Disadvantage: The CSS: