6 ms·

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

by cel1ne 10y ago

I want to mention my styling library here: https://www.npmjs.com/package/react-native-style-tachyons 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/ http://tachyons.io/docs/layout/spacing/ [1] http://tachyons.io/docs/typography/scale/ http://tachyons.io/docs/typography/scale/

mxstbr 10y ago
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>
- mxstbr 10y ago
  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 https://github.com/jongold/tachyons-js
al2o3cr 10y ago
For those critical applications where typing out inline styles is just too many characters, I guess.
- cel1ne 10y ago
  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.
sotojuan 10y ago
Tachyons is the library that made me like designing web pages again.
- Kiro 10y ago
  What's so good about it?
  - cel1ne 10y ago
    Here's a longer article on how tachyons came to be: http://mrmrs.io/writing/2016/03/24/scalable-css/ http://mrmrs.io/writing/2016/03/24/scalable-css/ Other than that: try it out ;)
deleted 10y ago
[deleted]
lumannnn 10y ago
Does the package "react-native-style-tachyons" also work for non-React-Native projects?
- cel1ne 10y ago
  For HTML-DOM you can use the regular tachyons package: https://www.npmjs.com/package/tachyons https://www.npmjs.com/package/tachyons
  - lumannnn 10y ago
    Thanks, I'll give it a try
kylemathews 10y ago
Another option for creating a customizable, consistent font scale and spacing is my Typography.js project http://kyleamathews.github.io/typography.js/ 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 https://github.com/kyleamathews/typography.js
- kylemathews 10y ago
  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.

by cel1ne 10y ago

mxstbr 10y ago

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>

mxstbr 10y ago
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 https://github.com/jongold/tachyons-js

al2o3cr 10y ago

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

cel1ne 10y ago
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.

sotojuan 10y ago

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

Kiro 10y ago
What's so good about it?
- cel1ne 10y ago
  Here's a longer article on how tachyons came to be: http://mrmrs.io/writing/2016/03/24/scalable-css/ http://mrmrs.io/writing/2016/03/24/scalable-css/ Other than that: try it out ;)

deleted 10y ago

[deleted]

lumannnn 10y ago

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

cel1ne 10y ago
For HTML-DOM you can use the regular tachyons package: https://www.npmjs.com/package/tachyons https://www.npmjs.com/package/tachyons
- lumannnn 10y ago
  Thanks, I'll give it a try

kylemathews 10y ago

Another option for creating a customizable, consistent font scale and spacing is my Typography.js project http://kyleamathews.github.io/typography.js/ 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 https://github.com/kyleamathews/typography.js

kylemathews 10y ago
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.