CSS-Tricks

Yes/No Ipsum!

Chris Coyier — Wed, 09 Nov 2011 22:19:44 +0000

I've heard a number of people make statements lately like: "If you're using Lorem Ipsum text, just stop it." Or similar. That argument, expanded, goes something like this. Design exists to serve content. Lorem ipsum is fake content. If you're already designing, and you are using fake content, you are not serving the content and thus not doing your job as a designer correctly.

Pretty extreme, I think. Karen McGrane is one of the only people I've heard argue the other way, in her article "In Defense of Lorem Ipsum". She asks:

For those who would argue that it’s impossible to evaluate designs without real content, let me ask this: why then, is it okay to evaluate content out of context of the designs?

I don't know about you but I've worked on designs where only after it's been fleshed out a bit and starting having a life of it's own did it suggest the best copy. It actually makes more sense to me to not start with specific copy and let that happen more naturally during the design process.

The cool part about this discussion is that everyone has good points. Instead of "No Ipsum!" we should probably be saying "We should involve content strategy right away in new projects." Instead of saying "Yes Ipsum!" we should probably be saying "Fake content can be a useful part of the design process, like picking colors or wireframing."

Kristina Halvorson, in a comment on Karen's article:

Pointing to “lorem ipsum” as a problem is, really, simply an attention-grabbing way to start the bigger conversation, which is that very few people have a process in place for planning content.
It’s a talking point around which to structure an introduction to content strategy.

Sorry if this is dead-horse-beating, but it's been running through my head and sometimes the only way to get it out is blogging it =)

Yes/No Ipsum! is a post from CSS-Tricks

The Future, Glassy?

Chris Coyier — Tue, 08 Nov 2011 23:48:39 +0000

Bret Victor:

Now, take out your favorite Magical And Revolutionary Technology Device. Use it for a bit.
What did you feel? Did it feel glassy? Did it have no connection whatsoever with the task you were performing?

Direct Link to Article — Permalink

The Future, Glassy? is a post from CSS-Tricks

CSS3 Secrets

Chris Coyier — Mon, 07 Nov 2011 19:36:57 +0000

I bet there is a couple things in this slide deck from Lea Verou that you didn't know about CSS3.

Direct Link to Article — Permalink

CSS3 Secrets is a post from CSS-Tricks

LiveReload

Chris Coyier — Fri, 04 Nov 2011 04:22:27 +0000

Mac users, this is really worth checking out. As you work on local projects, you have your HTML and CSS open in your text editor of choice, and the web page open in a browser. With LiveReload, as soon as you save files the changes appear in the browser (with CSS, it doesn't even need to reload the page). It also works with all the popular preprocessors and instantly compiles as you save. Might just change the way you work. I have a feeling it's going to change mine.

Direct Link to Article — Permalink

LiveReload is a post from CSS-Tricks

jQuery 1.7 Released

Chris Coyier — Thu, 03 Nov 2011 22:17:33 +0000

You'll probably start seeing .on() and .off() on tutorial sites so just a heads up, that's new syntax for event binding in jQuery (although all the old methods still work too).

Direct Link to Article — Permalink

jQuery 1.7 Released is a post from CSS-Tricks

Columns and the Greatest Common Divisor

Chris Coyier — Thu, 03 Nov 2011 16:26:59 +0000

I was recently putting together some CSS for columns. There was a few pre-determined widths that the columns needed to accommodate. For whatever reason (maybe because every grid framework in the world is this way) my mind went right to trying to find a common building block size. All columns are either the size of one building block or a multiple of a building block with gutter widths added.

You know what I mean:

So I had this list of sizes to accommodate, and I needed to figure out what that base building block was going to be. I thought to myself: "isn't that like, the lowest common denominator or whatever?" Well, no, but it's similar. What I was looking for was the greatest common divisor. That is, the largest building block that can build those columns evenly.

The mathematical way to represent a greatest common divisor expression is: gcd(n₁, n₂, n₃, etc)

First I tried OS X's spotlight, as that can do math problems sometimes. Not this one. Using the Google search box didn't work either. Fortunately, Wolfram|Alpha worked!

Here's an example of a series of desired column widths and getting a useful common divisor.

Unfortunately, when I ran my particular set of numbers, the greatest common divisor was 5. Five pixels. That's smaller than the gutters that were planned. I hate to think about writing the CSS for a 192-column grid framework.

Two Options

In this particular situation, I see there being two options:

1) Adjust those widths

Tell the people in charge of whoever gave you those goal widths what the problem is. There is no common building block that makes sense. Why are they that way? Can they be adjusted to fit a more reasonable common building block? There may be benefits to this, such as clean visual consistency.

2) Screw it

Here's another question: why do we need base building blocks at all? I imagine it's useful for mega-ultra-flexible layouts (e.g. like the New York Times needs to have). I've actually never worked on a site that was that complex and deep with content, so I have little first-hand experience.

In my case, the grids audit was already done. We already defined the needed grids. Rather than create a whole complex grid framework that can aligns to the needs of these few needed grids, you could write very specific CSS just to define those grids.

Which way?

So which is the right choice? Getting to a reasonable building block size means being able to create a grid framework that is very flexible and useful for grids that go beyond a couple of specced out needs. It also means a lot more CSS.

Defining just the grids you need saves a lot of CSS you may never use. But it's also far less flexible.

I guess it's one of those "it depends" situations.

I'll make sure to blog about it as my particular situation plays out.

Columns and the Greatest Common Divisor is a post from CSS-Tricks

Five Questions with Lea Verou

Chris Coyier — Tue, 01 Nov 2011 15:13:29 +0000

Lea is a front end web developer from Greece. You have likely heard of her, as ever since she started blogging in English (read more about that below), she's had quite a boom in popularity. Or perhaps you've seen some of her work. She's created a number of one-page sites that either show off amazing things CSS can do or help you with a difficult/tedious task.

I asked Lea some questions about critical reaction to her work, the community in Greece, the future of CSS, and more.

*Chris: I think you proved with your pattern gallery that CSS3 gradients can do a lot more than make 3D looking buttons. What are some real-world design scenarios you've come across where you've reached for gradients to help get it done?

Lea: Here's the first ones that come to mind:

On my blog, as you can see one side is peachy stripes, the other side is white. Actually, gradients aren't only used there for the peachy stripes, but also to cover the other side with white. I used the same trick in the -prefix-free homepage.
On cubic-bezier.com, the guides are made with CSS gradients.
On CSS.coloratum, I use black & white stripes made with gradients, behind the color, which helps when it's semi-transparent (it doesn't show at all when it's a solid color).
On Michaelia Hotel's website, for the hole in the circle and also the lower left diagonal corner on the booking page.

Of course I've also reached for CSS gradients in many more cases where I needed, well, gradients. But I guess you weren't asking about that :)

*Chris: You recently authored -prefix-free, a JavaScript CSS processor that automatically adds the required vendor prefixes to CSS properties to make them work in whatever browser a user happens to be in. You've gotten extreme mixed reactions on this. An opposer might talk about "flash of un-CSS3'd content" or generically that JavaScript isn't correct for this kind of thing. Can you recap the most common complaints and have your say?

Lea: "Extreme mixed reactions" indeed! People either absolutely love it or absolutely hate it. Luckily, the ones in the former category far outnumber the ones in the latter one. The most common complaints by the people in the 2nd category are:

"It will cause FOUC (Flash of Un-CSS3-ed content)"

My answer: If you put -prefix-free right after the stylesheets, the FOUC is so minimal that nobody will notice, unless they're looking for it. Regular users don't go hunting for FOUCs like we do. We might think "it was super quick but I managed to notice a FOUC, ha!", but users don't even think of taking part in silly "spot the FOUC" games. They will notice it if it lasts too long or if the difference is too big. For example, regular FOUC (Flash of Unstyled Content) is much easier to notice, because the page is completely unstyled. -prefix-free's FOUC is just some CSS3 missing for a fraction of a second.

"It makes the style depend on JavaScript"

My answer: If JavaScript is not available (< 2% of visitors), the only styles that will be missing are some CSS3 features (less and less as the time passes and vendors drop prefixes). If you designed the page with graceful degradation in mind, it should work and look fine even without any CSS3. If you didn't, you'll have bigger problems than that.

"This is something better done on the server. Do it once instead of on every pageload"

My answer: What -prefix-free exactly does, is impossible to do in the server. -prefix-free detects which features need a prefix and only adds it if needed. Also, it automatically detects which properties are available that need a prefix. It doesn't have to keep lists of which prefixes to add for which features, everything gets feature detected, and thus is very future proof. With preprocessors, lists need to be maintained about this sort of stuff. Such lists are doomed to be incomplete and quickly get out of date. Every server-side prefixer I ever tried fails in a number of cases.

For example, think about CSS animations. In the beginning, it was only Webkit. Then Firefox implemented them, and we had to go back and add -moz- versions too. Now IE has just implemented them too, so everything has to change and include a -ms- prefix as well. Soon, Opera will implement CSS animations. Are we really going to go back for a third time and add @-o-keyframes? Probably not. Most people will just start making up excuses about how Opera's market share is low and how they don't need to bother. -prefix-free is great for cases like that, because you never need to go back and change anything. When Opera implements CSS animations, they will work fine in Opera too, without even -prefix-free requiring an update.

"But what if you actually need vendor prefixes because an implementation is buggy?"

My answer: -prefix-free doesn't change stuff that's already prefixed, so if you need to specify something different for a specific engine, you can use prefixed along with unprefixed. -prefix-free also adds a class with the current prefix to the root element, to give you even greater flexibility.

*Chris: You live in Greece now. Maybe it's just my perspective but Greece doesn't seem like a hotbed for progressive web technology. Or am I wrong? Clearly that didn't prevent it from creating a world class developer like you. Does location matter much anymore for what you can achieve?

Lea: You are not wrong at all Chris, Greece is very far from being a hotbed for progressive web technology. You might be surprised to hear that I hardly get any recognition in Greece. I even have a Greek hater! (although he lives in Brussels, not Greece)

When I first started blogging, I started posting my research in Greek. Nobody paid much attention. After a few months I decided to try my luck with an English blog and well, we both know how that turned out :)

I think it's because most Greek developers just want a quick solution that works in every browser, to apply to their current project and move on. They don't have time to think about research and cool new stuff, they're still struggling with getting things to work. So, even though they will recognize projects and people that helped ease their day-to-day development pain, they won't care much about experimental stuff. Greeks are also very ageist, they won't even hear what you have to say unless you have lots of "years of experience" in your back. Young people are generally put down a lot here, and if you're not strong enough, you might actually believe you can't do anything until you reach your forties. Luckily, location doesn't matter a lot in our field, at least as far as countries go. If you want to have an international audience, you just start using English in everything you do online, it's that simple.

However, I am planning to move out of Greece in a few months, hopefully to the US. Even though I'm Greek, Greece never really felt like home to me. I'm much happier when I'm not here. There was a quote from the recent "Rise of the Planet of the Apes" movie, that I found very moving, for this exact reason. After Caesar spent some time with other apes and met his human foster-father again, he refused to come home and instead told him "Caesar is home". Sometimes, the place you belong in ("home") is not the place where you grew up or where your loved ones are. It's where you can easily find others that are similar to you and truly "get" you.

*Chris: For years now, designers have been stretching the abilities of CSS by creating complex imagery through "Pure CSS". On one hand, usually clever and impressive. On the other, usually impractical and unsemantic. A year and a half ago you called this out and cited SVG as a better alternative. Why do you think designers aren't experimenting with SVG more? A year and a half later, is it still a better choice?

Lea: Yes, I still think SVG is a better choice. It was created for this purpose, and it allows for many more things than even CSS3 does. However, it still doesn't have the adoption it deserves, which I mainly attribute to the following reasons:

Difficult syntax. SVG allows us to do crazy things, but with most of the times just as crazy and complicated syntax. It makes sense once you understand how each feature works, but the learning curve is very steep. Especially since there's no debugging tool that helps you understand what you did wrong and very little information about browser support, so you might get stuck wondering if you misunderstood something or it's just not supported.
Not enough resources. This is kind of a chicken and egg thing. If not enough people fiddle around with SVG, not enough people write tutorials, so not enough people are inspired to learn SVG. The few resources that exist are either very simple examples for beginners or academic stuff without much relevance to applied work (and both are usually ugly as f***, turning designers away).
Hard to understand specifications. While CSS and HTML specs are reasonably easy to understand for the most part, a big part of the SVG specs requires university-level Computer Graphics and Linear Algebra knowledge. Even if you have that kind of knowledge, it's still hard. Given the lack of good SVG resources mentioned above, this hurts SVG adoption much more than meets the eye.
Laziness. People like what's familiar, what they already know. If they can avoid learning something new, most will.
Browser support issues. SVG brings its own set of browser bugs to the table, most of which are far less documented than CSS & HTML bugs. This is also a chicken and egg thing: The more developers use a certain technology, the highest priority its bugs get. Currently there are SVG bugs that are left unresolved for years, because not enough people use it.

I think however that there's lots of untapped potential in SVG, especially now that we can embed it in HTML5 documents. It's hidden there, waiting to be discovered. We just need more creative minds to start playing with it.

*Chris: What is your CSS wish? Something that you regularly wish you could accomplish with CSS but can't. Perhaps an existing feature with very limited browser support. Or something completely outside the current spec and discussions around the spec.

Lea: My favorite CSS3 feature that doesn't have enough implementations yet is the CSS3 generalization of attr(). In CSS2.1, we can use attr() in the content property, to use attribute values in generated content. In CSS3, we're supposed to be able to use attr() in every property, which will greatly reduce presentational JavaScript code. Unfortunately, only IE9 supports it, and not fully. If only developers realized how many use cases it simplifies and started pushing browser vendors for it!

But I also have lots of not yet existing features in my CSS wishlist:

A generalization of currentColor: A current() function that would accept any property (currentColor would then just become an alias to current(color)).
The inherit keyword becoming a function, that would accept a parameter to specify how many nesting levels to go up. inherit would then be aliased to inherit(1).
Being able to use the color keyword invert everywhere, not just in outlines.
Being able to use attr() and counter() in selectors.
Conical gradients, which are hopefully coming in CSS4.
Diagonal corners, with adjustable angle and size (example)

and many, many more. When it comes to CSS, I'm a big dreamer :)

*Chris: Thanks, Lea!

Five Questions with Lea Verou is a post from CSS-Tricks

A Call for ::nth-everything

Chris Coyier — Mon, 31 Oct 2011 14:33:54 +0000

With CSS3, we have positional pseudo class selectors to help us select specific elements when there are no other distinguishing characteristics other than where it is in the DOM in relation to it's siblings.

:first-child
//AN_Xml::last-child
//AN_Xml::nth-child
//AN_Xml::nth-last-child
//AN_Xml:
//AN_Xml::first-of-type
//AN_Xml::last-of-type
//AN_Xml::nth-of-type
//AN_Xml::nth-last-of-type
//AN_Xml:
//AN_Xml::only-child
//AN_Xml::only-of-type

We also get a couple of text-specific pseudo elements to help with our typography needs:

::first-letter
//AN_Xml:::first-line

That's a great start, but it really would be useful if we could extend the whole ":nth" concept to these typographic selectors. Let me convince you.

Please note that most of the code below is not valid. It's example code. Like "wouldn't it be cool if" code.

::nth-line() / ::last-line / ::nth-last-line()

We already have ::first-line, so to complete the set let's add ::nth-line(), ::last-line, and ::nth-last-line().

With these, we could select the first two lines of a poem to highlight.

article.poem p:first-child::nth-line(-n+2) {
//AN_Xml:  font-variant-caps: small-caps;
//AN_Xml:  color: red;
//AN_Xml:}

I don't know from poetry, Brendon.

Or perhaps we could fade out the end of a passage.

article.poem p:last-child::nth-last-line(3) {
//AN_Xml:   color: hsla(26, 5%, 25%, 1);
//AN_Xml:   font-size: 70%;
//AN_Xml:}
//AN_Xml:article.poem p:last-child::nth-last-line(2) {
//AN_Xml:   color: hsla(26, 5%, 50%, 1);
//AN_Xml:   font-size: 60%;
//AN_Xml:}
//AN_Xml:article.poem p:last-child::nth-last-line(1) {
//AN_Xml:   color: hsla(26, 5%, 75%, 1);
//AN_Xml:   font-size: 50%
//AN_Xml:}

If we were allowed to use generated content on these line pseudo elements, we could accomplish something like line numbering without having to resort to intrusive markup.

pre::nth-line(n)::before {
//AN_Xml:  content: counter(line) ". ";
//AN_Xml:  color: #999;
//AN_Xml:}

Look ma, easy practical multi-line code styling.

Relevant article by Adam Prescott.

::nth-word() / ::first-word / ::last-word / ::nth-last-word()

We currently don't have any word-based pseudo elements. We do have word-spacing though, which is notable.

One use case is similar to using ::first-letter for drop caps, only doing a whole word.

article p::first-word {
//AN_Xml:  float: left;
//AN_Xml:  font-size: 300%;
//AN_Xml:  margin: 0 10px 10px 0;
//AN_Xml:}

Also similar to the "fade out" of lines above, we could fade out a passage word-by-word using ::nth-last-word(n).

::nth-letter() / ::last-letter() / ::nth-last-letter()

We already have ::first-letter, which sees pretty decent usage, so why not complete the set?

Of all of these "new" selectors, ::nth-letter is likely the most useful. For instance, Lettering.js wraps letters in s for us so that we can select individual letters. This would be entirely unnecessary with ::nth-letter.

Take this example:

h1.fancy::nth-letter(n) {
//AN_Xml:  display: inline-block;
//AN_Xml:  padding: 20px 10px;
//AN_Xml:}
//AN_Xml:h1.fancy::nth-letter(odd) {
//AN_Xml:  transform: skewY(15deg);
//AN_Xml:  background: url(light-red-pattern.png);
//AN_Xml:}
//AN_Xml:h1.fancy::nth-letter(even) {
//AN_Xml:  transform: skewY(-15deg);
//AN_Xml:  background: url(dark-red-pattern.png);
//AN_Xml:}
//AN_Xml:h1.fancy::nth-word(n) {
//AN_Xml:  margin-right: 20px;
//AN_Xml:}
//AN_Xml:h1.fancy::last-word {
//AN_Xml:  margin-right: 0;
//AN_Xml:}

Check out all the examples at Lettering.js -- all of those are good examples of the need for this.

Another word/letter combination example is a formal "letter", like:

Dear Emily,
//AN_Xml:yadda yadda yadda.
//AN_Xml:Love, Chris.

Perhaps this "letter" is generated by dynamic content from a database, but we want to ensure the proper capitalization and style of the opening and closing lines.

.letter p:first-child::nth-word(-n+2)::nth-letter(1),
//AN_Xml:.letter p:last-child:nth-word(-n+2):nth-letter(1) {
//AN_Xml:  text-transform: uppercase;
//AN_Xml:}

The Complete Set

So if we get all of this, the complete set would be:

:first-child        :first-of-type        :only-child
//AN_Xml::last-child         :last-of-type         :only-of-type
//AN_Xml::nth-child          :nth-of-type
//AN_Xml::nth-last-child     :nth-last-of-type
//AN_Xml:
//AN_Xml:::first-letter      ::first-line          ::first-word
//AN_Xml:::last-letter       ::last-line           ::last-word
//AN_Xml:::nth-letter        ::nth-line            ::nth-word
//AN_Xml:::nth-last-letter   ::nth-last-line       ::nth-last-word

Again, just wishful thinking. If there is anyone I can put this in front of that can do something about it, I will. And I'll also keep this updated with the feedback on it, positive or negative.

For the record, this isn't a new request. Anne van Kesteren called for it in 2003.

A Call for ::nth-everything is a post from CSS-Tricks

Centering in the Unknown

Chris Coyier — Sat, 29 Oct 2011 19:58:12 +0000

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.

Not too hard: Known Child

If you know the height and width of both the element to be centered and its parent element (and those measurements won't change, i.e. not fluid width environment) one foolproof way to center the element is just to absolute position it with pixel values so it looks perfectly centered.

Let's say you know the exact width and height of the element you are centering, but the parent element can change in height and width.

You absolutely position the element to be centered and set the top and left values to 50% and the margin top and left values to negative half of the elements height and width. That was a tounge twister, so check this out.

Harder: Unknown Child

The hard comes in when you don't know the dimensions of the element to be centered.

What do we know? Nothing! When do we know it? Now!

The grossest way to handle it is literally tables:


//AN_Xml:  
//AN_Xml:     
//AN_Xml:  
//AN_Xml:
//AN_Xml:          Unknown stuff to be centered.
//AN_Xml:

If you are worried about the semantics of that, you could attempt to match it to your content.


//AN_Xml:   
//AN_Xml:       Unknown stuff to be centered.
//AN_Xml:   
//AN_Xml:

And get the same result as the tables like:

.something-semantic {
//AN_Xml:   display: table;
//AN_Xml:   width: 100%;
//AN_Xml:}
//AN_Xml:.something-else-semantic {
//AN_Xml:   display: table-cell;
//AN_Xml:   text-align: center;
//AN_Xml:   vertical-align: middle;
//AN_Xml:}

CSS tables might be fine for you. Or it might not. Tables do render a bit differently than just a regular block-level div does. For instance the 100% width thing. A table will only stretch to be as wide as it needs to for the content inside it whereas by default a block level element will expand to the width of its parent automatically. Also, god help you if you need other content inside that div that you want to position or otherwise not act as a table-cell.

Michał Czernow wrote in to me with an alternate technique that is extremely clever and accomplishes the same thing. If we set up a "ghost" element inside the parent that is 100% height, then we vertical-align: middle both that and the element to be centered, we get the same effect.

See what we did there?

So does that ghost element need to be an un-semantic element? Nope, it can be a pseudo element.

/* This parent can be any width and height */
//AN_Xml:.block {
//AN_Xml:  text-align: center;
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* The ghost, nudged to maintain perfect centering */
//AN_Xml:.block:before {
//AN_Xml:  content: '';
//AN_Xml:  display: inline-block;
//AN_Xml:  height: 100%;
//AN_Xml:  vertical-align: middle;
//AN_Xml:  margin-right: -0.25em; /* Adjusts for spacing */
//AN_Xml:}
//AN_Xml:
//AN_Xml:/* The element to be centered, can
//AN_Xml:   also be of any width and height */
//AN_Xml:.centered {
//AN_Xml:  display: inline-block;
//AN_Xml:  vertical-align: middle;
//AN_Xml:  width: 300px;
//AN_Xml:}

View Demo

I'd like to tell you the ghost element technique is way better and should be the go-to centering technique for the ages. But in reality, it's just about the same as the table trick. The browser support for this is essentially everything and IE 8+. IE 7 doesn't support pseudo elements. But it doesn't support CSS tables either, so it's a horse apiece. If IE <= 7 support is needed, it's

time (or use an equally un-semantic or something for the ghost element).

This stuff isn't brand new territory. Gary Turner wrote about it like 5 years ago. But I credit Michał for doing it with a pseudo element and making it the most semantic approach yet.

Centering in the Unknown is a post from CSS-Tricks

Lots of Ipsum

Chris Coyier — Fri, 28 Oct 2011 14:02:03 +0000

There is just too many awesome Lorem Ipsum (placeholder) text generators going around lately not to round them up.

Cupcake Ipsum

Dragée soufflé sweet roll gummi bears. Tiramisu chocolate macaroon jelly chocolate bar jujubes icing. Faworki bear claw brownie pudding caramels chocolate. Cake chocolate chocolate. Cake bonbon lollipop caramels cheesecake pastry cotton candy. Pastry applicake oat cake donut powder croissant brownie cookie. Bear claw bonbon candy canes sweet chocolate cheesecake halvah candy canes. Ice cream gummies gummi bears sweet cookie. Halvah tootsie roll cheesecake. Ice cream ice cream candy lemon drops biscuit topping.

Fillerama

Bender, quit destroying the universe! I decline the title of Iron Cook and accept the lesser title of Zinc Saucier, which I just made up. Uhh… also, comes with double prize money. So, how 'bout them Knicks? Soon enough. Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be…

Samuel L. Ipsum

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

Hipster Ipsum

Readymade sustainable sartorial vice 8-bit, letterpress ethical beard lo-fi mustache craft beer banh mi mlkshk cred. Messenger bag banksy williamsburg cliche, biodiesel butcher gentrify farm-to-table sartorial 3 wolf moon beard twee. Beard DIY thundercats whatever, locavore 3 wolf moon put a bird on it Austin helvetica. Aesthetic salvia mcsweeney's cred brunch. Banh mi scenester mlkshk, american apparel DIY put a bird on it keffiyeh lo-fi. Wayfarers sartorial food truck stumptown brooklyn, mustache keytar vice VHS single-origin coffee cliche cardigan whatever. Irony lo-fi farm-to-table, letterpress aesthetic blog craft beer organic portland hoodie Austin whatever.

Bogan Ipsum

She'll be right dero also trent from punchy jackaroo. He's got a massive cook my he hasn't got a schooner. As dry as a your shout when mad as a pig's arse. Lets throw a prezzy no dramas she'll be right stoked. Mad as a bored sh*tless with gutful of doovalacky. As busy as a apples no worries chunder.

Bacon Ipsum

Bacon ipsum dolor sit amet rump turkey short ribs corned beef ground round, tri-tip biltong pancetta pork belly chuck shoulder. Ribeye pork loin andouille, corned beef sausage drumstick beef prosciutto pork. Tenderloin turkey chicken chuck. Swine boudin corned beef pastrami tongue. Swine shankle pork belly tenderloin tri-tip rump, andouille fatback biltong venison short ribs tail ham hock. Cow chicken turducken jowl, fatback frankfurter sirloin biltong. Rump salami short ribs kielbasa venison turducken.

Bonus

Probably not great for most client work or school projects: Swearem Ipsum

My own, with HTML tags: HTML-Ipsum

For images: Placehold.it, Placekitten, Placedog, and Placebear.

Lots of Ipsum is a post from CSS-Tricks