I’m now working with Bootstrap, so I’m updating my style sheets accordingly. I have one particular style that works beautifully, but the styles that make it work look amateurish at best.
You can see a working example @ http://jsfiddle.net/dzsazos1/2/ However, it looks much better than that when linked to Bootstrap’s style sheet.
Ideally, I’d like to simplify the HTML as much as possible. It would be nice if I could just give a blockquote one of two classes - PoliQuoteL or PoliQuoteR - and it would be automatically styled and floated to the left or right.
I should not that the class PoliQuote in these examples does nothing. I just retained that class for further styling to distinguish these from regular blockquotes.
Anyway, can you see a way to improve my styles?
Thanks.
HTML…
<blockquote class="PoliQuote pull-left"><span class="Quote">“</span>The measure of a man is what he does with power.<span class="Quote">”</span>
<footer>Plato</footer>
</blockquote>
<blockquote class="PoliQuote blockquote-reverse half"><span class="Quote">“</span>Ideas are more powerful than guns. We would not let our enemies have guns, why should we let them have ideas?<span class="Quote">”</span>
<footer><a href="/people/joseph-stalin" title="Joseph Stalin">Joseph Stalin</a></footer>
</blockquote>
Those spans you use as quotes could be on the before/after pseudo elements with the “quotes” propeorty. Your jsfiddle looks really awkward and incomplete. Do you have a live website? I doubt very much that the jsfiddle looks like what hte live website looks like.
It’s difficult to gauge how well these styles are without a live environment.
Sorry, I don’t have a live website yet. The styes actually work beautifully; like I said, it looks far better when connected to Bootstrap’s style sheet.
I just wondered if I could accomplish the same thing with more elegant, streamlined styles. I’m not sure what you mean by putting the quote spans on the before/after pseudo elements. Could you show me an example?
Actually, my blockquotes already look like that; it’s just that the styles are so awkward. On another note, I just discovered that The Guardian’s quote is variously inline or completely outside the article, depending on one’s screen size. That’s kind of cool, too.
The link you posted is probably better for regular blockquotes - quotes that aren’t floated. So I am going to check it out, because I’ll be using those kinds of quotes as well.
I’ve put a small demo together for you. The result is not the same but quite close to the blockquote example in the website you indicated in your earlier post. I used the starter template from Bootstrap (just to have a base) and a bit of the CSS-trick code that Ryan pointed out above, although adapted to your idea. The blockquote is positioned outside the content in wider screens, floated to the left in smaller screens, and not floated and embedded in the main text on very small screens. The upside is that the code is quite lean and you don’t see any spans.
