Tailwind: A Utility-First CSS Framework

Re:Tailwind: A Utility-First CSS Framework by tambourine_man on Thursday September 27, 2018 @01:41PM (#18086836)

What if you need to change justification, image proportions, etc on mobile for instance?

Also, from a previous comment of mine:

“Problem is, defining quantity in the class name doesn’t work. .m10 may be fine for desktop but not for mobile. Then you’ll have media queries which define .m10 as margin: 5px or something, which is nuts. You could go for unspecified .mSmall etc, but in real life, things tend to be more specific and messier, in my experience.”

https://news.ycombinator.com/item?id=18083508

[ Parent | on HN ]

Re:Tailwind: A Utility-First CSS Framework by mcrittenden on Thursday September 27, 2018 @02:46PM (#18087497)

Tailwind has responsive variants of anything you want: https://tailwindcss.com/docs/responsive-design/

[ Parent | on HN ]

Re:Tailwind: A Utility-First CSS Framework by melkhior on Thursday September 27, 2018 @02:50PM (#18087520)

Tailwind offers 'modules', which let you define classes for certain states, such as responsiveness.

You can easily do something like 'w-10 sm:w-5', and it'll add a media-query based class.

[ Parent | on HN ]

Re:Tailwind: A Utility-First CSS Framework by mixmastamyk on Thursday September 27, 2018 @02:07PM (#18087123)

Wouldn't using em units be a better idea in most cases?

[ Parent | on HN ]

Re:Tailwind: A Utility-First CSS Framework by edoceo on Thursday September 27, 2018 @02:18PM (#18087251)

CSS has 'vh' and 'vw' units too, changed my life.

[ Parent | on HN ]

Re:Tailwind: A Utility-First CSS Framework by tambourine_man on Friday September 28, 2018 @12:34PM (#18094703)

Doesn't solve the problem though. vw, on a vertical screen (portrait mode) is very different from what you have on a ≈ 16:9 desktop screen.

The solution is pointed above, even more classes for responsiveness.

[ Parent | on HN ]

Re:Tailwind: A Utility-First CSS Framework by kaoD on Thursday September 27, 2018 @06:40PM (#18089485)

'vmin' and 'vmax' too.

I'm experimenting with using 'em' and % everywhere, base font size with 'vmin' and scaling font size with %. Works pretty well for scroll-less apps.

Example: https://alvaro-cuesta.github.io/instant-trivia/

[ Parent | on HN ]

Re:Tailwind: A Utility-First CSS Framework by di4na on Friday September 28, 2018 @05:20AM (#18092025)

Hint : you can also use 'calc' with vw and vh to get some more complex behaviours than purely proportional. You can add an offset, you can do some multiplications etc.

Don't go overboard, but a little offset can go a long way

[ Parent | on HN ]