sourcebitsllc / chocolatechip-ui

Mobile Web App Framework
www.chocolatechip-ui.com
MIT License
616 stars 88 forks source link

inconsistent <p> font-size for ios. #41

Open sandwichfeet opened 10 years ago

sandwichfeet commented 10 years ago

In list.less, 'list.comp > div > p' has a font-size of 10pt, which looks about right to me, but other 'li p' type selectors just inherit 12pt from '.list li'. Should this be moved in typography.less anyway?

.list {
  & h3, & h4, & p {
    pointer-events: none;
  }

  & > li {

    & > p {
      margin: 6px 0px;
      color: @listDetail;

      & + p {
        margin-top: 6px;
      }
    }

    &.comp > div > p {
      font-size: 10pt;
      margin: 0;
      color: @listDetail;
    }
  }
}
sourcebits-robertbiggs commented 10 years ago

Is this Android or iOS?

Product Director ChocolateChip-UI

San Francisco

On Jan 19, 2014, at 7:18 PM, sandwichfeet notifications@github.com wrote:

In list.less, 'list.comp > div > p' has a font-size of 10pt, which looks about right to me, but other 'li p' type selectors just inherit 12pt from '.list li'. Should this be moved in typography.less anyway?

.list { & h3, & h4, & p { pointer-events: none; }

& > li {

& > p {
  margin: 6px 0px;
  color: @listDetail;

  & + p {
    margin-top: 6px;
  }
}

&.comp > div > p {
  font-size: 10pt;
  margin: 0;
  color: @listDetail;
}

} } — Reply to this email directly or view it on GitHub.

sandwichfeet commented 10 years ago

iOS. I've not looked on Android

On Mon, Jan 20, 2014 at 5:26 AM, sourcebits-robertbiggs < notifications@github.com> wrote:

Is this Android or iOS?

Product Director ChocolateChip-UI

San Francisco

On Jan 19, 2014, at 7:18 PM, sandwichfeet notifications@github.com wrote:

In list.less, 'list.comp > div > p' has a font-size of 10pt, which looks about right to me, but other 'li p' type selectors just inherit 12pt from '.list li'. Should this be moved in typography.less anyway?

.list { & h3, & h4, & p { pointer-events: none; }

& > li {

& > p { margin: 6px 0px; color: @listDetail;

& + p { margin-top: 6px; } }

&.comp > div > p { font-size: 10pt; margin: 0; color: @listDetail; } } } — Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/issues/41#issuecomment-32734979 .

sourcebits-robertbiggs commented 10 years ago

Oh, well in that case, all those font styles for iOS are really temporary. At some point soon they’ll be replaced with the new dynamic system fonts for iOS 7. That way when the user changes the font metrics in the general preferences for apps, it will also work for ChUI. Apple uses these in their Web view apps, such as the iOS iTunes and Appstore apps, so that the fonts work like native apps.

I haven’t figured out the subtle differences in some of these yet. From my experimentation I’ve only found five of them useful for ChUI:

Apple System Fonts, Safari 7

font-family: -apple-system-font; font-family: -apple-system-body font-family: -apple-system-caption1 font-family: -apple-system-caption2 font-family: -apple-system-footnote font-family: -apple-system-headline font-family: -apple-system-short-body font-family: -apple-system-short-caption1 font-family: -apple-system-short-footnote font-family: -apple-system-short-headline font-family: -apple-system-short-subheadline font-family: -apple-system-subheadline font-family: -apple-system-tall-body

The short and tall versions seems to render the same as the regular ones from my measurements.

The holdup is I haven’t figured out how to have a fallback for desktop yet. Once I get that working, that’ll be added in. Product Director ChocolateChip-UI

San Francisco

On Jan 20, 2014, at 5:36 AM, sandwichfeet notifications@github.com wrote:

iOS. I've not looked on Android

On Mon, Jan 20, 2014 at 5:26 AM, sourcebits-robertbiggs < notifications@github.com> wrote:

Is this Android or iOS?

Product Director ChocolateChip-UI

San Francisco

On Jan 19, 2014, at 7:18 PM, sandwichfeet notifications@github.com wrote:

In list.less, 'list.comp > div > p' has a font-size of 10pt, which looks about right to me, but other 'li p' type selectors just inherit 12pt from '.list li'. Should this be moved in typography.less anyway?

.list { & h3, & h4, & p { pointer-events: none; }

& > li {

& > p { margin: 6px 0px; color: @listDetail;

& + p { margin-top: 6px; } }

&.comp > div > p { font-size: 10pt; margin: 0; color: @listDetail; } } } — Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/issues/41#issuecomment-32734979 .

— Reply to this email directly or view it on GitHub.