Fixie.js - Automatic filler content for HTML documents.(fixiejs.com)
fixiejs.com
Fixie.js - Automatic filler content for HTML documents.
http://fixiejs.com/
42 comments
If we can get Samuel L. Ipsum integrated, I'm in. Either way, I think this is great if for no other reason than the amount of time it will save.
Agreed, lorem ipsum can become a crutch - good copy is integral for good design. That said, this script will give you random length paragraphs, articles, and what not, giving you some room to test your layout, and makes it easy to throw in temporary content until you've written something yourself.
awesome. maybe an alternative api would be to allow for something like
fixie.init([".array", "#of .selectors", ".that", ".should", "#be .populated .with .lorem"])
fixie.init(".string, #of .comma .separated .selectors, .that, .should, #be .populated .with .lorem")
This would be so much more awesome if you could assign the class to a container div. Then on each page reload it would randomly add content - be it paragraphs, headers, imgs, lists, tables etc.
This would be a fantastic tool for testing templates against a wide variety of random content. When making a template for clients to use you can never be too sure what they are going to add so you do your best to style everything. Getting random content on each page load would really solidify this testing.
Adding a class to individual elements... I don't find this too useful.
This would be a fantastic tool for testing templates against a wide variety of random content. When making a template for clients to use you can never be too sure what they are going to add so you do your best to style everything. Getting random content on each page load would really solidify this testing.
Adding a class to individual elements... I don't find this too useful.
You can now assign the class to a container div - you must still provide some empty tags to specify what kind of content you want.
For example, if you need a couple paragraphs of text, you can use `<article class="fixie"></article>`. If you need exactly 1 header followed by 3 paragraphs, you can use ``` <article class="fixie"> <h1></h1> <p></p> <p></p> <p></p> </article> ```
For example, if you need a couple paragraphs of text, you can use `<article class="fixie"></article>`. If you need exactly 1 header followed by 3 paragraphs, you can use ``` <article class="fixie"> <h1></h1> <p></p> <p></p> <p></p> </article> ```
Depending on what browsers you're supports it's probably far easier to use generated content (:before, :after). Maybe combined with calc or CSS expressions.
Sure, but it's hard to get a variety of content in that way. If you have a paragraph that begins with lorem ipsum over and over again, you'll quickly notice.
Then add some :nth-of-type() wizardry to it.
Great idea!
I'd use this on client projects if:
- I could pass a selector rather than adjusting my markup (maybe I can add 'fixie' via jQuery?)
- There's an easy way to swap out the word list - I've had Bacon Ipsum, Hipster Ipsum, and Gangster Ipsum all slip through before and it's embarrassing (depending on the client).
I'd use this on client projects if:
- I could pass a selector rather than adjusting my markup (maybe I can add 'fixie' via jQuery?)
- There's an easy way to swap out the word list - I've had Bacon Ipsum, Hipster Ipsum, and Gangster Ipsum all slip through before and it's embarrassing (depending on the client).
Very cool. However, I don't particularly like the fact that I need to add a class to each applicable container.
Maybe a configuration file that allows for selection of specific classes/ids instead?
Maybe a configuration file that allows for selection of specific classes/ids instead?
I don't this is a good idea. Because even if you want quick design but later you will have to fix them all. And nowadays designers are familiar with html ( the most basic skill ).
But it's nice btw
The point isn't to write content for you - it's to automatically add temporary content so you can test out your design before writing copy.
Thought this might be something like http://jsfiddle.net/MNFV8/1/ but I like the addition of the paragraph generators too.
This looks pretty cool. It would be a great companion to http://placehold.it (which fills a similar role for images).
It uses placehold.it, actually: http://ryhan.me/fixie/sample.html
[deleted]
I can't remember the number of times I've wished for something like this. I'll be sure to check it out for the next web project :)
Like it. The only nuisance is the class attribute you have to repeat across all tags that you need to fill in.
On a side note, you can now change the class name to whatever you want (thanks Luke Holder via github).
this is fixed: https://github.com/rthprog/fixie/pull/18
What is the better alternative?
don't know. But the smart folk behind should be able to figure something out.
Just auto-filling all <p>'s and <h_>'s might be an interesting option. You could also have the API allow you to list tag names to be auto-filled. It can even be smart and first check whether the tag in question already contains text content, and if it doesn't, only then auto-fill it.
Nice suggestion. I made some modifications so this is the new behavior. Child elements are targeted, and content is never overwritten.
``` <div class="fixie"> <p></p> <p>Hello <a></a></p> </div> ``` The above will cause only the first `<p>` tag to be filled, and the `<a>` tag.
In addition, you can now use `fixie.init(["CSS-selector"]);` to target arbitrary tag names, class names, and ids. If the tag in question contains text content, it will not auto-fill it (though it will auto-fill children, if need be).
``` <div class="fixie"> <p></p> <p>Hello <a></a></p> </div> ``` The above will cause only the first `<p>` tag to be filled, and the `<a>` tag.
In addition, you can now use `fixie.init(["CSS-selector"]);` to target arbitrary tag names, class names, and ids. If the tag in question contains text content, it will not auto-fill it (though it will auto-fill children, if need be).
I considered doing that, but the problem is that I've noticed that some people use <p> tags as breaks between paragraphs. Requiring a class makes sure that the developer/designer knows where their filler content is going.
If you're going to require classnames anyway, it might be more flexible to use those to define the type of content to insert. Personally I'd prefer adding a simple bit of js to a page to define the fixie behaviour, something like :
I'd prefer to start with an html document which has already been made, and consider how to add fixie to it in the least obtrusive way - and how to remove it later when it was not required, without impacting the document structure or classes etc at all. So if I can add a bit of js which adds fixie in an unobtrusive way to any existing page, and then remove it by simply commenting out that js, that would be preferable to having to set up a special template just to use fixie, or having to consider fixie use from the start. Fixie should really IMHO adapt to the html it is used on, not force that html to be adapted to it.
fixie.fill('.my_header_class','head');
fixie.fill('#my_id','paragraphs');
I'd prefer to start with an html document which has already been made, and consider how to add fixie to it in the least obtrusive way - and how to remove it later when it was not required, without impacting the document structure or classes etc at all. So if I can add a bit of js which adds fixie in an unobtrusive way to any existing page, and then remove it by simply commenting out that js, that would be preferable to having to set up a special template just to use fixie, or having to consider fixie use from the start. Fixie should really IMHO adapt to the html it is used on, not force that html to be adapted to it.
As mentioned elsewhere, this is now implemented as `fixie.init(["CSS-selectors"]);`
yep, we added fixie.init(query); functionality. coming up soon.
Won't work with javascript disabled, obviously. This makes it unusable for me.
I've encountered just too many cases where the design looks great as a mock-up but when you start plugging in real data the layout start breaking apart, either because the content is too short, too long, or the designer didn't consider long usernames.
My dream for a filler content generator would be a large database of real content types, so you would have a list of real twitter handles, facebook names, blog post titles, world news articles and so on. You could then do stuff like h1 class="fixie worldnews title" or class="fixie twitter username".
Designers often argue that the purpose of Lorem Ipsum is to help the client focus on the look and not the content. I think this posture is wrong because you need the client thinking about content as early as posible.
Front-end developers also need the randomness of real world data to test the sturdiness of their layouts and account for edge cases as early as posible.