npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@resonate/tachyons

v1.3.4

Published

Resonate styles using tachyons-custom

Downloads

3

Readme

@resonate/tachyons

A fork of the tachyons-custom css library used to style templates and components for Resonate branded user interfaces, such as stream2own. See configuration below for usage with postcss.

Install

npm install --save @resonate/tachyons

Add to a monorepo package

lerna add @resonate/tachyons --scope "@resonate/app"

How to use

We can import @resonate/tachyons into our front-end application using sheetify. The library's CSS classes then become globally available.

Here is an example of how we would import @resonate/tachyons into a choo application:

const choo = require('choo')
const html = require('choo/html')
const css = require('sheetify')

css('@resonate/tachyons')

const app = choo()
app.route('/', (state, emit) => {
  return html`
    <div class="bg-pink pa3 h-100 w-100">
      Hello world
    </div>
  `
})

app.mount('#app')

Using the library

Using @resonate/tachyons is the same as using the standard tachyons library. For introductory documentation as to how use tachyons, you can head to the tachyons website.

@resonate/tachyons modifies a handful of pre-existing CSS classes from tachyons, and also adds several more:

Colors

@resonate/tachyons changes 7 color classes. Their class names are the same, but their values have been updated:

resonate tachyons colors

Typography

Font sizing with @resonate/tachyons works somewhat differently than it does with regular tachyons.

Using tachyons, developers can specify which font size to use at different breakpoints using class modifiers. For example, if we wanted to style a <div> to render font size f1 on desktop, f2 on tablets, and f3 on mobile, we would write:

<div class="f1-l f2-m f3">
  Hello world
</div>

However, with @resonate/tachyons developers only have to specify one class name to adhere to Resonate's typography design system. That element's font-size will then change automatically over different breakpoints:

<div class="f2">
  Hello world
</div>

Overriding fonts

On rare occasions when you need to override a particular font-size, the currently suggested method is to create a sheetify class that would override the font-size variable at a chosen breakpoint. Note that because @resonate/tachyons' font classes also include letter-spacing properties, you may also need to override this property too.

Spacing

@resonate/tachyons still uses the same padding and margin classes as tachyons (eg. .ma0, .mr2, .pa4), however the variables used to calculate each class have changed.

@resonate/tachyons uses the following spacing variables:

--spacing-extra-small: 0.533rem;
--spacing-small: 0.867rem;
--spacing-medium: 2.200rem;
--spacing-large: 3.667rem;
--spacing-extra-large: 5.867rem;
--spacing-extra-extra-large: 9.533rem;
--spacing-extra-extra-extra-large: 15.400rem;

(Important! These variables may be subject to change.)

Fills

@resonate/tachyons adds several classes that allow developers to set a fill property on template elements. Using the color variables from earlier, here's a list of available fill classes:

.fill-black {      fill: var(--black); }
.fill-near-black { fill: var(--near-black); }
.fill-dark-gray {  fill: var(--dark-gray); }
.fill-mid-gray {   fill: var(--mid-gray); }
.fill-gray {       fill: var(--gray); }
.fill-light-gray { fill: var--light-gray); }
.fill-white {      fill: var(--white); }

Theming

Apply dark or light theme for backgrounds, text colors, border colors, and fills. To achieve this, we added dark and light as a modifier for these classes. Take a look at src/utilities/_skins-color-scheme.css and src/utilities/_fills-color-scheme.css

.fill-black--dark {      fill: var(--black); }
.fill-near-black--dark { fill: var(--near-black); }
.fill-dark-gray--dark {  fill: var(--dark-gray); }
.fill-mid-gray--dark {   fill: var(--mid-gray); }
.fill-gray--dark {       fill: var(--gray); }
.fill-light-gray--dark { fill: var--light-gray); }
.fill-white--dark {      fill: var(--white); }

By using @media (prefers-color-scheme: dark) we can handle browsers with support for dark/light color schemes. On newer versions of Firefox and Safari from macOs 10.14.3, dark or light theme is automatically set instead of default light.

Configuration (sheetify)

// package.json
...
"sheetify": {
  "transform": [
    "sheetify-nested",
    [
      "sheetify-postcss",
      {
        "plugins": [
          [
            "postcss-import"
          ],
          [
            "postcss-preset-env",
            {
              "stage": 1,
              "features": {
                "nesting-rules": true
              }
            }
          ],
          [
            "postcss-custom-media"
          ]
        ]
      }
    ]
  ]
}
...

Contributors

  • Jase <@jasecoop>
  • Louis <@louiscenter>
  • Augustin Godiscal <@auggod>

License

MIT