2metres / typographic Goto Github PK

Leaving GitHub. Looking for maintainer.

@FranzSkuffka
@larsenwork
@tunnckoCore
@seaneking

I think your _font-stacks.styl is very handy. Here are some ideas to expand it. Low priority; more like expand as we run across examples on the web.

• Add Monotype (focus on legible code presentation, but a fancy-typewriter set is welcome
• Add script (focus on legable, pre-installed fonts & free CDN hosted fonts)
• Add source of fonts; to help gauge availability. Should show in exported CSS as a comment; expecting final production code to be minified with comments stripped. See example below:

// Monotype-sans
/* Vista+, MS Office Win & Mac | Default Mac | IE 5 & 6, OSX */
consolas = Consolas, Monaco, "Andale Mono", monospace

// Monotype-serif

// Script

Not sure if you're the type of repo manger who is OK with many micro-PRs or prefers larger, more complete PRs?

• em everything (including :root) but line-height (use some postcss-foo-to-em plugin or make one)
• Check out https://github.com/jeremychurch/type-scale (literally just modular scale pen)
• Check out http://stormwarning.github.io/typeset.css/ (looks kinda cool but heavy, maybe typographic should just be a sizing tool?)
  • Steal/credit
    • tracking
    • consider Opentype control
    • might be cool to fetch particular characters for certain classes (like typeset.css' ampersand thing) using http://googlewebfonts.blogspot.com/2011/04/streamline-your-web-font-requests.html
• Explore http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/ and https://github.com/viljamis/Molten-Leading (we can probably do this with Mike's scaling technique)
• Get vertical rhythm right (pen)
• Get modular scale right (pen)
• Combine modular scale and vertical rhythm pens
• Combine ^ with molten leading
• Settings (these aren't concrete, just tossing them here):
  • heading-font-stack
  • body-font-stack
  • min-heading-size
  • max-heading-size
  • min-body-size
  • max-body-size
  • min-heading-leading
  • max-heading-leading
  • min-body-leading
  • max-body-leading
  • min-page-width
  • max-page-width
  • margin-bottom-size
• Turn into a free web GUI? Try to add in local storage and maybe Firebase (give me a reason to learn Firebase).
• It'd be cool to have user contributed/named "typography themes" (presets)
• Round everything to nearest px. These sub pixel things are nasty. (this just applies the problem in one direction, doesn't fix it)
• possibly refer people who was ligatures and such to http://utility-opentype.kennethormandy.com/
• read https://www.smashingmagazine.com/2016/03/meaningful-web-typography/

Slightly confused how I would go about making sure the html is set to 62.5% using your plugin.

After the original re-set, h1 looks good, h2 looks decent, but as the headers go on, the line-height gets pretty insane. Need to fix this.

I'm currently using media queries for responsive letter spacing to increase letter spacing at smaller font sizes but would be great if they could be variables here. I know these are some very minute adjustments but they can make a big difference in overall typographic sexiness.

E.g.:

$min-font            : 12px !default;
$max-font            : 20px !default;
$min-font-spacing    : 1px !default;
$max-font-spacing    : 0px !default;
$header-font-spacing : -0.2em !default;

You should use the !default flag for configurable settings.

And increase margin-bottom

@lost gutter 60px can not be used with vr-block. Makes sense in next version.

In short what I would like is to set this in the variables

$min-width           = 25em
$max-width          = 50em

and get this in the css file

@media all and (min-width: 25em) {
  . . .
}

I think this could be a great addition, but I'm not sure if it's possible.

Here's the reason why I like to use them http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Hi, Do you have any plan to port this one to PortCSS as well?

https://gist.github.com/davidkpiano/ad6e6771df050ff3727f gets it without Compass

Things like code, pre, blockquote aren't perfect. Audit and style all these.

🍹

• Create rem mixin, convert everything to rem with px fallback
• Consider creating em option (hard so meh)

Do color definitions really belong into a typographic toolset? I am having conflicts with the reset and normalization included with axis.

Since Lost Grid now utilizes a max-width of 1140px, might aswell update typographic to coincide with the $max-width variable just for consistency sake.

In my personal experience, there are two options to a typographic set I adjust almost everytime, that are not included here yet.

• letter-spacing
• transformation (uppercase)

Looking forward to any comments & thoughts on this.

Typographic (specifically the scss version) is not automatically injected by wiredep like your other project, lost.

I suspect this is an issue with the bower.json configuration, but I've not had a chance to look at it in depth. It's a minor annoyance but should probably be fixed!

My understanding is that the modular scale is a geometric sequence, not an arithmetic sequence. If that's the case (and an examination of Tim Brown's scale output suggests it is), then your function:

 t-scale(numbawang = 1, rat = ratio)
   return unit(numbawang * rat, rem)

should probably be something like

 t-scale(numbawang = 1, rat = ratio)
   return unit(rat^(1 - numbawang), rem)

This would set the p, ol, and ul elements to a font-size of 1rem (as expected) instead of 1.618rems (if using the 'golden ratio') and have the headers scale geometrically instead of by a fixed increment (in this case, the product of the 'numbawang' increment and the ratio).

Tim Brown's scale performs this way, with 'numbawang' increments of 1. Increments of 0.5, though, would seem to be more appropriate for headers. With such increments, and using the golden ratio, your output would be
1, 1.272, 1.618, 2.058, 2.618, 3.330 rems
instead of
1.2135, 1.618, 2.0225, 2.427, 2.8315, 3.236 rems

I can submit a PR if this makes sense to you.

Great job on jeet, by the way. I hope to see a companion UI kit soon!

Hey!

I'm trying to use typographic inside media query, but it seems that in this case the settings are not overridden correctly:

@media (max-width: 320px)
    $header-font    = $geneva
    $body-font      = $geneva
    $body-color     = orange
    typographic()

results in

@media (max-width: 320px) {
  html {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 300;
    color: #666;
    font-size: 12px;
    line-height: 1.75em;
  }
//more code here

As you can see, the font and color remain default.

I tested the demo this morning but the results on a mobile are lackluster: please check this out.

I'm only seeing this in Safari (OS X and iOS), but when nesting a grid, I am getting the attached gap at the end of the nested row. Not an issue in Chrome or Firefox on Mac.

HTML:

<div class="grid-lost-2 om-grid-display">
    <section>
        <div>1</div>
        <div>2</div>
        <div>3
            <section>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </section>
        </div>
    </section>
</div>

SCSS:

.grid-lost {
    & + & {
        margin-top: 3.2rem;
    }
    section {
        lost-center: 1170px; // Max-width, center and clearfix
    }
    div {
        lost-column: 1/4;
        @media all and (min-width: $break1) {
            lost-column: 1/6;
        }
        @media all and (min-width: $break2) {
            lost-column: 1/12;
        }
    }
}

.grid-lost-2 {
    @extend .grid-lost;
    & > section > div {
        lost-column: 1/4;
    }
    & > section > div:last-child {
        lost-column: 1/2 3;
    }
    & > section > div > section > div {
        lost-column: 1/4;
    }
}

In the section "Putting it all together" t-headers(helvetica) needs to be above "html". For me it didn't work until I did that.

I need to mentiion that I tested it on a current project with which I began using Typographic 0.1.0 and the issue occured after I updated to 1.0.0.

All over the stylesheet you use the $golden variable instead of the ratio. This makes the $ratio setting useless in term of definig the actual scale.

Waiting until it's a bit more feature-rich in Stylus until I do this.

Make headers and such more modular and then put together into big, sweeping mixins a la https://github.com/jenius/axis/blob/master/axis/typography.styl

At the end of the day, typographic should be a tool that helps you manage typography spacing/sizing/etc. And it does all of that BEAUTIFULLY might I add.

The problem is, with a recent release, you went and added things like:

a
  color: dodgerblue
    &:visited
      color: darken(dodgerblue, 10%)

input[type="submit"], button
    background: darken(white, 3%)

code
    background: darken(white, 2%)

pre
  padding: vr-block(.5)
  background: darken(white, 2%)

code
      background: none

etc.

You are setting all of those up at the core level which take precedence over any class that we create. This is an absolute nightmare when coding.

You should save all of those base colors and backgrounds for your Switch repo because I really don't think typographic is the right place for it. We should be able to use typographic to get JUST a typography solution but you started embedding a bunch of base colors at the core level into it recently which kind of ruins the purpose of what Typographic is trying to be.

Awesome stuff, thanks for doing this.. I have been meaning to create something similar lately. Do you have any plans on adding vertical rhythm/some sort of baseline grid that's more consistent?

The modular scale is not applied to headings because font-size is not defined in any of them.

zspecza/stylus-conventions#4 (comment)

You should either quote all font names, or none, but not a mix. I'd recommend quoting them all.

http://madebymike.com.au/writing/precise-control-responsive-typography/

This way we could do:

// Style default components
typographic()

// Style a specific h2 as a paragraph
.site-description
    p()

I'm pretty new to Stylus, been using other preprocessors for years though, so bear with me.

I'm trying to use typographic with gulp the following way:

# Styles.
gulp.task "styles", ->
  source src.stylus + "/app.styl"
    .pipe stylus
      use: [
        "nib"
        "jeet"
        "rupture"
        "typographic"
      ]
    .pipe prefix(
      "last 2 versions"
      "> 1%"
      "ie 9"
      "Android 4"
      "iOS 6"
    )
    .pipe gulpif !!util.env.production, minifycss()
    .pipe gulp.dest dest.css
    .pipe size()
    .pipe notify
      message : "Generated styles: <%= file.relative %>"
      notifier: growlNotifier
      templateOptions:
        date: util.date new Date(), "yyyy-mm-dd hh:mm:ss"

Everything gets imported fine and it works like it should. My problem comes when I try to override the typographic settings. In other preprocessors I've worked with you would use @import and then override the variables. In this case everything already seem loaded and I can't get my custom settings variables to work.

Would love some help and insight on how to do this and what the best practice is. I'm guessing that there is similar issues when compiling Stylus with CLI etc.

I'm sure I'm missing a million things like dd, etc.

I was going to add some types and make a PR, but then I realized I wasn't sure what should be left unstyled.
http://www.quirksmode.org/html5/inputs/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Perhaps number, range, search, tel and url could be included?
Date and time types should offer a datepicker according to spec.. but maybe they should still get styled?

package.json in the repository says version 3.0, but the latest NPM package seems to be version 2.9.3.