typeplate/typeplate.github.io

Paragraph Indentation Carpet Bombing

grayghostvisuals opened this issue · 3 comments

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;
    }
}

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.

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;
      }
    }
}

Change my diaper cause I just committed 8bce17a088dd44d5905c2c566ceba296925664e4.