3 ms·

This is a great technique and I've been using it on projects for over a year now. This is the first time I'm seeing anybody else write about it or use the techn

by err4nt 12y ago

This is a great technique and I've been using it on projects for over a year now. This is the first time I'm seeing anybody else write about it or use the technique! One question for the author: Why repurpose a Horizontal Rule <hr> when HTML has a perfectly functional Line Break tag ? You can use @media queries to set display: none; on tags and then those tags have no effect, and then you get to decide when they kick in. This is a great idea, but ignoring the built-in line break to repurpose and restyle the horizontal rule tag seems like an arbitrary choice for implementing the technique.

maxsavin 12y ago
Thanks for the positive feedback! My reasons are: 1) You still want to have the option of a "hard" BR 2) I want to set the HR as a high level class, so I can use it freely through whatever I'm working on. For example: Headline The quick brown fox jumped <hr> over the lazy dog. You 100% want the line break after the headline, and want to set an optional one in the subtext. I like it because its very clean to look at, but you can also create a responsive class like <div class="desktop-breakline"></div>
- ajanuary 12y ago
 If you're going as verbose as using a class, just put the class on the br tag. Headline The quick brown fox jumped over the lazy dog.
 - err4nt 12y ago
 This is what I did originally, But now I'd rather just use the media query to only affect the inside of the H1 or other container where the line break appears. Another consideration I didn't see in the article that I train the people updating the marketing copy: put your white space before the line break. When it's all inline it will display as one line, but you don't want to have a space after the line break at the start of the new line. programmers may be conscientious of where the white space is but its a real eye-opener for marketing-types who only pay attention to the content, not the space around it!

by err4nt 12y ago

maxsavin 12y ago

Thanks for the positive feedback! My reasons are: 1) You still want to have the option of a "hard" BR 2) I want to set the HR as a high level class, so I can use it freely through whatever I'm working on. For example: Headline The quick brown fox jumped <hr> over the lazy dog. You 100% want the line break after the headline, and want to set an optional one in the subtext. I like it because its very clean to look at, but you can also create a responsive class like <div class="desktop-breakline"></div>

ajanuary 12y ago
If you're going as verbose as using a class, just put the class on the br tag. Headline The quick brown fox jumped over the lazy dog.
- err4nt 12y ago
 This is what I did originally, But now I'd rather just use the media query to only affect the inside of the H1 or other container where the line break appears. Another consideration I didn't see in the article that I train the people updating the marketing copy: put your white space before the line break. When it's all inline it will display as one line, but you don't want to have a space after the line break at the start of the new line. programmers may be conscientious of where the white space is but its a real eye-opener for marketing-types who only pay attention to the content, not the space around it!