Search Results For: break

CSS / 15 Feb 2012

Twitter Bootstrap 2: Bootstrap Goes Responsive

Recently, we published a piece titled 5 Incredibly Useful Tools Built Into Twitter Bootstrap, which took a look at the basic structure of Twitter’s Bootstrap framework and walked you through implementing some of the major components.

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Inspiration / 14 Feb 2012

100 Awesome Logos With Script Typography

What do script typefaces suggest in a design? Will they make your design dainty or masculine? Timeless or retro? Goofy or sophisticated? Would you believe me if I said all of the above and more?

Today we’re going to look at a massive, handpicked selection of logos from Logopond that all use script and cursive writing in some form or another. The point is to showcase the incredible versatility of these types of fonts. The next time you’re designing a logo and wondering if a script is appropriate, you’ll be able to come back here and browse the various themes that different types of scripts can suggest.

HTML / 13 Feb 2012

Save Loads of Time by Writing Your HTML With Haml

Odds are, by now you know all about Sass and its brethren (LESS, Stylus, etc.). Love them or hate them, these CSS preprocessors are making a big splash in the development community. In many ways they represent a faster, more efficient way to write CSS and if you get on board, you’ll no doubt appreciate the flexibility that they bring to your project.

Once you get bitten by the CSS preprocessor bug, you’ll inevitably start look at HTML and wondering why it has to be so cumbersome. Why doesn’t someone drastically simplify the way we write markup? It turns out, the same people that brought us Sass have done just that with a language called Haml. Today we’re going to take a look and see how to use Haml to completely change the way you write markup.

Layouts / 10 Feb 2012

Practical Tips for Utilizing Columns of Text in Your Layouts

Designing around large blocks of type can be tough and more designers are taking the “fewer-is-better” approach when working with columns and large blocks of text. When using a mass of type, such as in a book, text-laden website or print project, much of the emphasis is more on the readability than the actual look of the type.

Typefaces are important but even more important can be the number of columns used in combination with the words. The number of columns you use in a project can vary depending on a number of factors such as typeface and style used, type of project, font size and gutter width and proportion of other elements.

CSS / 3 Feb 2012

5 Online Playgrounds for HTML, CSS and JavaScript Compared

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

Typography / 26 Jan 2012

Pick the Right Typefaces for Your Project

Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website.

Understanding some of the history of fonts and typography can help make any project a little easier. Learn how to pair different typefaces to get desired effect every time and learn what things to avoid. Sharp typography and font selections can really make or break just about any project.

CSS / 18 Jan 2012

Beating Borders: The Bane of Responsive Layout

Responsive design often requires setting your widths using percentages. This is easy enough to accomplish, that is until you start throwing borders into the mix. If your columns and total width are set using percentages, a static border size wreaks havoc on your layout.

Today we’re going to look at a couple of different ways to beat this problem. You’ll learn how to create a completely fluid layout that doesn’t mind extra borders or padding one bit.

CSS / 11 Jan 2012

Build a Fun Trivia Game With the CSS Active Selector

We’ve done a ton of fun stuff recently with the :hover selector. From button hover effects for beginners to more advanced hover tutorials and even onto using hovers with multiple backgrounds. Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked.

With :active, we can control the state of an object while it’s being clicked. Typically, this takes the simple form of changing a link’s color while the mouse is pressed down, but we’re going to do something much more interesting. Follow along as we build a super cool, pure CSS presidential trivia game.

CSS / 3 Jan 2012

How to Build a Responsive Thumbnail Gallery

Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.

One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. One day you’ll be working on a project and will need a responsive gallery and you’ll remember this post on that very topic.

Layouts / 27 Dec 2011

Utilizing Grids in Print Design

The basic organization of a design project typically begins with a simple concept – the grid. Whether you decide to work within its constraints or intentionally move away from it, deciding how to use a grid tends to be one of the first steps in the design process.

Print designers have been working on grids since the first newspapers rolled off the presses hundreds of years ago. Most magazines also employ a grid; books are put together using the grid format. The grid can be part of a publication’s identity and helps create a sense of space and organization. Understanding the basics of grid design – from how it originated, to developing your own grid and using it in your workflow processes – will make working within vertical and horizontal constraints a snap.

CSS / 20 Dec 2011

Make It Snow on Your Website With CSS Keyframe Animations

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

Typography / 7 Dec 2011

Typography 101: Understanding the Anatomy of a Letter

Every designer, whether you’re in print or web, should possess a basic understanding of fonts and type. Using the right typeface and understanding how a font will impact your design can add that extra pop to print and digital projects and will set them apart from all others.

One important area to understand is the anatomy of type. Ascenders, descenders and serifs may sound like words from another language but are the basis for understanding the style of a typeface and how if relates to your project. Today we’ll take a brief run through of some terminology that you should know.