How to properly set up typography.js

[dylannirvana]

How is best to configure typography.js? To clarify, I am a UX Developer and make no assumptions about scaffolding or configuration. Can you give an example of how to get this library to work?

After the npm install, one must get the application to talk with that new code. What is the name of the file where you put the import code? typography.js? How does one connect that to the application? I am using Gulp as a task runner to create a front-end UI. It simply does not like the import syntax. So far, have not been able to initialize the library. Thanks!

[KyleAMathews]

Check out Gatsby — some of the Gatsby starters have Typography.js already setup for you that you can study.

So run in your terminal:

npm install -g gatsby
gatsby new test-typography-site

Once that completes (it'll take a few minutes) then run:

cd test-typography-site
gatsby develop

Which will spin up a development server. Then open in your text editor utils/typography.js and try editing some of the variables. The changes will get live loaded on the screen.

Gulp isn't probably going to work for you here. You need a module bundler like webpack (which Gatsby uses).

[dylannirvana]

Well, we are pretty invested in using Gulp. I would love to find a way to make this work. I appreciate any help.

For example, a little more explanation about JavaScript usage would be super helpful. You have the following. Would you be kind enough to help me apply this? Thanks.

`// Output CSS as string. typography.toString()

// Or insert styles directly into the

(works well for client-only // JS web apps. typography.injectStyles()`

[KyleAMathews]

var Typography = require('typography')
// Add custom options here.
var options = {}
var typography = new Typography(options)

var css = typography.toString()

// Add the css to the rest of your css at the top.

Something like ^^^ that should work.

[dylannirvana]

Thanks. I am working on it this morning. Its a really cool library. I believe it can be very useful for prototyping for clients, as well as in a dev-pro workflow. Once I get if ironed out I'll let you know. pc

On Fri, Jun 2, 2017 at 4:41 PM, Kyle Mathews [email protected] wrote:

var Typography = require('typography')// Add custom options here.var options = {}var typography = new Typography(options) var css = typography.toString() // Add the css to the rest of your css at the top.

Something like ^^^ that should work.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/KyleAMathews/typography.js/issues/113#issuecomment-305903957, or mute the thread https://github.com/notifications/unsubscribe-auth/AH9ZmfSHPkBy1vvrwSO5uwjUKuoHRI8Pks5sAHOBgaJpZM4NugD_ .

[dylannirvana]

Can you be more explicate about usage? Browserify employs a require architecture. I don't understand how this is being called.

[KyleAMathews]

The code I wrote above runs in node. If you want to use this with browserify, look at the Gatsby example I linked to earlier.

On Sat, Jun 3, 2017, 1:45 PM Pierino Cipolloni [email protected] wrote:

Can you be more explicate about usage? Browserify employs a require architecture. I don't understand how this is being called.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/KyleAMathews/typography.js/issues/113#issuecomment-306000392, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEVh1Byz3NvFNVvSkFhqNHmAny8aDaXks5sAcXKgaJpZM4NugD_ .

[dylannirvana]

I am so sorry, I am not a super duper programmer and am surely missing something. I am afraid I need explicate directions, etc.. Is it possible I can download it? Can you make it available as a CDN? I am using Gulp as a task-runner which of course uses Node, but it is for the browser.

[KyleAMathews]

Perhaps you can find a programmer friend who knows node / modern frontend tools that can help you. Sorry my time is pretty limited for supporting this tool. It might not be the best choice for you as it makes a lot of assumptions about your environment.