Hacker News Reader

Comment by cel1ne | Hacker News Reader

I want to mention my styling library here: https://www.npmjs.com/package/react-native-style-tachyons

The best part: it gives you a consistent spacing [0] and a consistent font scale [1] which is relative to rem. No more magic values, just use classes:

    ma0 ... ma7            margin: 0|0.25|0.5|1|2|4|8|16 rem
    ml|mr|mb|mt [0-7]      marginLeft, marginRight, marginBottom, marginTop
    mh [0-7]               marginHorizontal
    mv [0-7]               marginVertical

    /* Same with p for padding */

No more stylesheets, everything is there at a glance and easily fixable:

    <View cls="bt bb jcfs pa2">           /* border at top and bottom, justifyContent: stretch, padding: 0.5rem */
       <Text cls="white tc">           /* white color, text-align: center */
           Something
       </Text>
    </View>

[0] http://tachyons.io/docs/layout/spacing/

[1] http://tachyons.io/docs/typography/scale/

View on HN

That's awesome, I love tachyons!

styled-components is on a slightly "lower" level in a certain sense, you would build components like yours with styled-components:

    const TachyonsText = styled.Text`
      ${props => props.bt ? 'some: styles;' : 'other: styles;'}
    `;

Those functions could then be extracted and reused across your components:

    const bt = (props) => props.bt ? 'some: styles;' : 'other: styles;';

    const TachyonsText = styled.Text`
      ${bt} ${bb} ${jcfs}
    `;

And then you can use your component like any other tachyons component:

    <TachyonsText bt bb>Text here</TachyonsText>

To elaborate on this just a tiny bit, you can use tachyons-js[0] by the amazing jongold to automate even more of this:

    import tachyons from 'tachyons-js';

    const tachyonsHelperFunc(props) => Object.keys(props).map(prop => tachyons[prop])

    const MyTachyonsComp = styled.div`${tachyonsHelperFunc}`;

This way, MyTachyonsComp can now has all the benefits of styled-components (easy theming and overriding, power of JS for styling, ReactNative, nesting,…) while also being able to use tachyons really easily:

    <MyTachyonsComp ma2 ph2 bb />

In fact, you could probably even wrap the above helper to make it really easy to use:

    const styledTachyonsComponent = (...args) = styled(..args)`${tachyonsHelperFunction}`;

Now you can created styled-tachyons-components really easily:

    const MyTachyonsStyledDiv = styledTachyonsComponent('div');

:tada:

Note: I just coded this in this comment, might be some typos in there.

[0]: https://github.com/jongold/tachyons-js

Another option for creating a customizable, consistent font scale and spacing is my Typography.js project http://kyleamathews.github.io/typography.js/

It's a JS library that you provide a configuration object and it generates your type/spacing CSS. I love Tachyons and am planning on building a plugin for Typography.js which will generate tachyon-like classes.

https://github.com/kyleamathews/typography.js

You can use it with css-in-js libs like styled-components as well. It exports two helper functions, "rhythm" and "scale".

"rhythm" is a virtual unit that's the distance of one line-height. All spacing within Typography.js are based on it. Using "rhythms" for other spacings on your site ensures everything stays consistent as you make styling tweaks.

"scale" is a function to pick font sizes off the scale you setup (with scaleRatio). This let's you tweak the body font size and all other font sizes will move along with that.

For those critical applications where typing out inline styles is just too many characters, I guess.

Tachyons' main-purpose is not abbreviating inline-styles, but providing the developer with a consistent and scalable layouting-system for spacing and typography, which, at the end, is what arrives at the user.

If you love your inline-styles you can keep them and use tachyons just for the scale:

    import { sizes } from "react-native-style-tachyons

    <MyComp
        style={{
            fontSize: sizes.f2,
            height: sizes.h1,
            paddingTop: sizes.pt1,
            backgroundColor: "#232323"
        }}
    />

Though I still think

    <MyComp cls="f2 h1 pt1 bg-#232323" />    /* string is checked for validity of course */

is much cleaner.

Tachyons is the library that made me like designing web pages again.

What's so good about it?

Here's a longer article on how tachyons came to be: http://mrmrs.io/writing/2016/03/24/scalable-css/

Other than that: try it out ;)

Does the package "react-native-style-tachyons" also work for non-React-Native projects?

For HTML-DOM you can use the regular tachyons package: https://www.npmjs.com/package/tachyons

Thanks, I'll give it a try

Reply on news.ycombinator.com