typeplate / typeplate.github.io

Official Website for Typeplate: “A Typographic Starter Kit.”
http://typeplate.com
Other
1.35k stars 109 forks source link

Paragraph Indentation Carpet Bombing #119

Closed grayghostvisuals closed 10 years ago

grayghostvisuals commented 11 years ago

Our current method to style paragraphs is a PAIN IN THE ASS and I'm tired of it carpet bombing everything. We need a more robust way to handle this. Anybody have thoughts on this?

//paragraph siblings indent
$indent-val: 1.5em !default;

p {
    margin: auto auto $indent-val;
    & + p {
        text-indent: $indent-val;
        margin-top: -$indent-val;
    }
}
Melindrea commented 11 years ago

This is not a disagreement, but rather to help pin down the exact issue:

What kind of issues have you had with the current setup?

Looking at my own site (which, admittedly, is fairly small), I see a few places where I've overriden the current stuff:

1) .contact, which is a form 2) Paragraphs following a paragraph that follows an h6 (yes, it's an ugly selector, sorry about that... =), which has text-indent: 0 due to the h6 being a run-in sidehead. 3) I've also changed the margin-top to -1.1em rather than -$indent-val, to keep a touch more space between parapgrahs.

However, I've also made an active choice (based on the current carpent-bombing of both this style and one of my own) to not use paragraphs in the sidebar, even at one particular place where it might be appropriate.

I know there's been discussions to limit the typeplate styling to particular parts of the page through scoping - possibly set a reasonable default (like, say, none...) and allow the user to change it if they wish to scope it. I will test one theory I have and add to the discussion this weekend.

grayghostvisuals commented 10 years ago

Here's my solution for users to opt in for paragraph styles of their choosing which I'll be adding later today.

// $Variables $Paragraphs
// -------------------------------------//

$paragraph-vertical-whitespace: false !default;

// $Styles $Parargraphs
// -------------------------------------//

p {
    margin: auto auto $indent-val;
   @if $paragraph-vertical-whitespace == false {
      & + p {
          //siblings indentation
          text-indent: $indent-val;
          margin-top: -$indent-val;
      }
    }
}
grayghostvisuals commented 10 years ago

Change my diaper cause I just committed 8bce17a088dd44d5905c2c566ceba296925664e4.