kyleamathews / typography.js Goto Github PK

View Code? Open in Web Editor NEW

3.8K 28.0 181.0 8.59 MB

A powerful toolkit for building websites with beautiful design

Home Page: http://kyleamathews.github.io/typography.js/

License: MIT License

JavaScript 91.56% CoffeeScript 8.44%

typography javascript typography-themes theme typography-engine css-in-js css

typography.js's People

Stargazers

Watchers

Forkers

djiesamsoe kreo spencercdixon nilopc-interesting-reactjs iamtekeste everdimension calcsam number0 truevalentine frankie-666 tarasmetal justajazz arcarson piamancini johnsonchandra d2s jamiebuilds truonglvx webscp vinnymac independent-tech-writers guoliim rustymillorg he11yeah warpsmith whmountains chirox persephonepunch boguscurry trevorburnham daaain holistio defconcepts mikakujapelto the-cc-dev vibertthio jacobprice mehrdad-shokri markfchavez amritsub p50815 chenyaoyi88 redmega halkeand thierryc tylerbarnes ristinolla vibhanshuc pitbi ditoy ngminhtrung neosiae lipis willworth cd8608 leimonio buiduccuong30051989 cpboyd donysukardi esthor maheshwaghmare vinhlee95 appcoreopc daliandragon lirenmi00 mokkapps victorrodrigues litufu fk chasemccoy melisamalala rdjpalmer abusada kale-code hagnerd hastebrot krofax ruxandra-bklyn code-whiz dschau 0xpatrickdev antoniocapelo robphoenix mbao01 wgao19 jxnblk jakeschroeder aravindballa pcowgill tschaub phetw dakebl teaolivia dradetsky rijojoy strangehill etnichols dum3bi bmbejcek begrafx

typography.js's Issues

Change header/body gray to header/body color & don't specify a header color by default

Only supporting gray colors is confusing plus it's not at all obvious that Typography.js is depending on
gray-percentage. So instead use headerColor and bodyColor and let people pass in a string which corresponds to a valid css color value.

Also @bvaughn pointed out that specifying the header color made it difficult to control the background/foreground colors as headers didn't inherit.

Currently the default is that headers are slightly darker than the body. Which is a solid design choice but confusing as a default as it's hard to override. So by default let's set headerColor to inherit.

Add <SubTheme> component

In your typography configuration, you can define additional named "themes". These additional configurations are merged into the base configuration i.e. default config <-- config <-- theme

In your code, you'd import the Theme component and use it to surround the section of your site that you want themed differently.

Typography configurations

Put together a really nice configuration? Add it here so others can learn. The best of these will get added to the README.md and the app.

Copycat theme of gutenberg?

Just leave it here http://matejlatin.github.io/Gutenberg/. Maybe I will get to it myself

Add typekit support

React Native

I think Este needs this for React Native ASAP. Should not be hard. Universal typography FTW.

Don't create styles string by default

There's a number of use cases for creating new instances of Typography where you don't want/need to generate the string. So instead of doing this by default (it's fairly expensive, 20-30ms), move style creation code to a createStyles function where it can be called on demand e.g. in the react.js component.

Feature Suggestions

Here are some free ideas:

attach (ArrowUp/ArrowDown) key binding for inputs under focus. Would be much easier to flip though fonts if I could just press a key to get the next font.
click ... scroll ... click is too much for me man 😭
add letter-spacing, and other CSS3 typography properties
make a snapshot feature. Allow user to make a "snapshot" of the current config (ideally with just a button/keypress)
- Later allow the user to rapidly flip through those snapshots (which also would have a key binding)
  - delete the ones they don't want
  - want to make it a full app?
    - rename snapshots
    - toggleable per-snapshot lock to prevent accidental deletion
    - showcase / share
    - persist snapshots via accounts (OpenID/OAuth?)
    - one-click export to codepen.io and the like
make this extensible so you can use it anywhere
- Chrome DevTools extension?
- React Component that hijacks a <style>...</style> in <head>...</head>
- lots of implications to consider—what about inline styles?

adjustFontSize picks first modularScale — should pick active modularScale

Incorporate Web Font Loader

https://github.com/typekit/webfontloader

Use this instead of our hacked together way of loading Google Fonts. This will give us free support for Typekit and others + nice features like events and timeouts.

Example websites built entirely with typography.js

Add function to inject styles in header (e.g. for SPA that's not server rendered)

Javascript version

Is there a way to get a dist (transpiled) version as plain Javascript? I don't use npm, or coffeescript in my project but would love to try this component?

Rename Repo

the repo's name is `typography.js` ...

... `typography`.`js` not `.coffee`

Got some serious badfeelsman.jpg upon realizing this was .coffee

Apparently im not the only one longing for pure js (es6 hopefully) #11

Include a bunch of sample texts + layouts (e.g. two column)

Unexpected CSS img styling

This is in a similar vein to https://github.com/gatsbyjs/gatsby-starter-blog/issues/16 & as frustratingly tweeted https://twitter.com/kaihendry/status/778166191860936704 I don't expect style to be set here.

What is the good reason RE https://twitter.com/kylemathews/status/778262611058053126 ?

I wasted a serious amount of time over this margin-bottom:1.66667rem. In hindsight the issue was staring at me from Chrome dev tools, but I really didn't expect typography.js to setup so much CSS. I also resent it's uglyfying my HTML's header and not a separate file too.

I really don't quite understand how a modern day dev is supposed to track cascading CSS rules and override & normalise things, since it seems like I can't assume sane defaults anymore.

Add react-router to website and put config in query string

So can do custom configuration and share link to that configuration with someone.

Then have section in README.md of attractive font setups.

Add scale for changing gray value of header/body

Make config hidable so doc site viewable on mobile (this should be default on mobile)

Document adjustFontSizeToMSValue + adjustFontSizeTo + note fontSizeToMS is deprecated

Add more fonts

http://briangardner.com/popular-serif-google-fonts/
http://briangardner.com/google-font-combinations/

Mark themes which don't require external Webfonts

Sorry, I raised the issue before by email or twitter. However my wish remains the same. A method to see which themes do not use external fonts. Currently there is no easy way to tell upon:
http://kyleamathews.github.io/typography.js/

My end goal is to evaluate themes (or font styles) that do not bring in external fonts. External fonts are a no go in terms of Web performance for me and I'm trying to get the best "look" between major platforms like Android & IOS.

overrideThemeStyles = Broken

Returning any value breaks everything. I have tried everything i can think of - looking at your code it woudl appear your demo is broken as you need top return a copied object - this still breaks everything.

ERROR in ./~~/css-loader?{"modules":true,"sourceMap":true,"localIdentName":"[name][local][hash:base64:5]","importLoaders":1}!./~~/postcss-loader!./src/shared/app/index.css
Module build failed: TypeError: Expected a string
at module.exports (/home/ubuntu/workspace/node_modules/decamelize/index.js:4:9)
at /home/ubuntu/workspace/node_modules/typography/dist/utils/compileStyles.js:36:51
at /home/ubuntu/workspace/node_modules/typography/dist/utils/compileStyles.js:45:11
at /home/ubuntu/workspace/node_modules/lodash/_createBaseEach.js:24:11
at forEach (/home/ubuntu/workspace/node_modules/lodash/forEach.js:38:10)

Add breakpoints option

Should be an object with structure something like:

{
  breakpoints: {
    "@media only screen and (max-width:768px)": { // any valid media query.
      scale: 1.618 // Override the default scale
      fontSize: '95%', // Change body font size.
    },
    "@media only screen and (max-width:480px)": { // any valid media query.
      fontSize: '85%',
    },
  }
}

Perhaps also support calling overrideStyles in each breakpoint as well to both neatly consolidate responsive theming + this would be a natural way to design a breakpoints UI for the design tools.

Revamp usage instructions on website

Perhaps have some explanatory text + tabs for each supported way to integrate into website.

support popular font stacks

https://github.com/synapticism/sass-font-stacker/blob/master/_font-stacker.scss

Validate options

That option keys are allowed + some options e.g. that modular scales media query is a string and a valid css measure. Also that any string modular scales (no media query) are listed before any array media queries as otherwise, they'd just override the responsive modular scale.

Terminology fixes

As we're not using the "modular scale" terminology any more (just scale).

When using react-typography, replace Google Fonts CSS w/ css font-face declaration

This saves the extra request to Google Fonts to grab the CSS file which can significantly delay starting the download of the fonts.

Google Fonts doesn't recommend this as they want you to always be grabbing the latest versions of fonts but if you regularly rebuild your site then you'll generally be up-to-date.

This might be better actually as a Gatsby plugin. It'd be an HTML post-processor — it'd scan HTML for google font css strings and replace them with the font-face declarations.

Letter spacing configuration key

Is there a way to adjust letter spacing? Didn't see a key for it in the demo site

Font loading technique

Point to this somewhere or perhaps there's ways typography.js can make this simple to use https://www.filamentgroup.com/lab/font-events.html

Two plugin ideas: indent paragraphs and verse styling

Docs + marketing website

Leave this open to do brain dump of ideas soonish.

Good list of fonts to look at. http://www.alphabettes.org/please-no-more-open-sans-for-a-while/

sample texts to play with fonts on #3

Universal typography

So I finally find a time to rethink universal typography (React + React Native) approach. I am afraid current design is not sufficient. What we need:

Simple theme definition with implicit dependencies likes rhythm with inline styles in mind.
Define only styles, not all HTML elements since they don't exist in React Native and are often superfluous. React soon will use Text and View for span and div. facebook/react#7382
We need to define the common universal set of element styles: Text, Paragraph, Heading, Subheading, List, OrderedList... It can mimics HTML of course, but we have a chance to simplify it and make it more explicit.

In the other words, what we need is a computable expression with typography idiomatic DSL (domain specific language). It must be obvious what it does and it must follow React Native styling, which is basically a subset of CSS.

Then we can integrate universal typography into https://github.com/este/este

What do you think?

"scale is not a function" with typography-theme-lincoln

typography-theme-lincoln uses the scale function at least in release 0.15.0 and 0.14.0 but doesn't appear to import it. I tried it in gatsby just now, and 0.15.0 gives the error during build time, and 0.14.0 initially seemed to work but then had the same error during runtime. 0.13.0 does work.

Easy responsive typography

Like what we do for headers but for everything else. Anytime you call fontSizeToMS (or perhaps a different function) it should generate media queries rules for each modular-scale defined in the config.

Add font-face support

Add an array of objects each specifying the font-face rule e.g.

{
  fontFamily: "DinNextRounded",
  src: [
    "url(../fonts/dinnnextrounded_bold.eot)",
    "url(..'fonts/dinnextrounded_bold.woff)"
  ],
  fontWeight: 700
}

Check if modularScale is string and use that instead of always expecting an array

Support colors

Themes should be able to set colors in the option which would get picked up by the design tools. Plugins should also be able to accept colors as an option.

Example or how to use Typography React Components in Head

Having trouble understanding how the react components in your example are being added to the head?

<html>
  <head>
    <TypographyStyle typography={typography} />
    <GoogleFont typography={typography} />
  </head>
  <body>
    // stuff
  </body>
</html>
<body>
<div id="app" />
...

In my app the head is inside an index.html page - not a react component. My React application code is being added to the body a la

  ReactDOM.render(
    <App store={ AppStore } />,
    document.getElementById('app')
  );

Can one add the typography React components in the head via ReactDOM.render?

Any help appreciated.

Define font CSS property

font - CSS

Mainly because I use it with postcss-lh

Enable extra typography features by default?

http://practice.typekit.com/lesson/caring-about-opentype-features/

Outdated & missing package.json metadata

Individual packages should have an URL to the Git repository.

package.json files in /packages/ directory current lack details. Missing "repository": field creates discovery problems for people who look individual packages at the npm package directory (as they need to search separately from search engines to find where original source code is located).

Also, even while individual typography package already has the right "homepage": metadata, it has old URL in the"repository": field. Currently points to a broken repository address (as you had renamed repository from typography to typography.js).

Currently:

  "repository": {
    "type": "git",
    "url": "https://github.com/KyleAMathews/typography.git"
  },

Should be:

  "repository": {
    "type": "git",
    "url": "https://github.com/KyleAMathews/typography.js.git"
  },

Example files from another project:

Should individual packages's "repository": point to the Git repository?
(That is how Jest has solved the metadata issue.)

Do you need any help with this?

Allow user to manually pick font-family

Would be cool if I could just type "Helvetica" or something so I can play with system fonts

Package module with rollup so we can easily remove development helpers in production

e.g. all the css generation code. That should drop the weight of this component significantly.

Link dump

Some links to digest further

https://www.smashingmagazine.com/2016/03/meaningful-web-typography
http://matejlatin.github.io/Gutenberg/ — perhaps take some config from here
http://matejlatin.github.io/Gutenberg/example/
https://github.com/davidmerfield/typeset
https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/

Modular Scale calculations

Just wondering what calculations are used for the scales?

I've compared typography.js to a couple of sites I've referenced in the past and I've noticed that the output of typography.js isn't consistent with the other sites.

The sites I'm comparing are:

and the values I'm using are

font size: 18px / 1.25em
line height: 1.5
scale ratio: ~1.333

kyleamathews / typography.js Goto Github PK

typography.js's People

Stargazers

Watchers

Forkers

typography.js's Issues

the repo's name is typography.js ...

... typography.js not .coffee

Recommend Projects

Recommend Topics

Recommend Org

the repo's name is `typography.js` ...

... `typography`.`js` not `.coffee`