Do these come as custom element ? Just wanna abstract away and deal with higher level UI elems.
Tailwind UI
231–240 of 367 posts
Re: Tailwind UI
#232Remove
Re: Tailwind UI
#233These UIs look great! Does anyone have any great resources, examples, where one could learn CSS/SCSS to create stuff like this. I know CSS/SCSS enough to edit existing codebases and tweek, but I would not be able to create these from scratch. I would love to improve my design skills.
While not CSS courses directly, these resources should help you address what you're looking for.
Tailwind related playlists on Adam Wathan's YouTube: https://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ/pla...
And this publication (by same authors as Tailwind UI, that is Adam and Steve) https://refactoringui.com/book/
Enjoy!
Re: Tailwind UI
#234To me this is solving Tailwind's biggest issue: consistency & context. Comparing it to Bootstrap or Foundation adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will look like an alert everywhere. If I want to change how alerts look, I change the CSS With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative`. Then I'd have to change my…
Why not use view templates to capture these?
For alerts a sharable template is doable. So maybe a bad example, LOL.
But for buttons & heros not so much. I've worked with apps that have a "button" template. I find it overkill.
For one project we have some components rendered both server-side & with Vue.
Other cases I've had are sharing styles across multiple apps and pulling in markup from a 3rd party, like Stripe or a WYSIWYG.
But you're right. Ideally this wouldn't be an issue w/ view templates.
Re: Tailwind UI
#235Earlier quoted context omitted.
OK, this: ` Isn't this why we have CSS preprocessors? So we can do: .description-of-what-this-is { .lg_flex() .lg_items-center() .lg_justify_between(); } Assuming there's enough complexity beneath the mixins to justify their use -- some of these might just be CSS properties.
You can do this with Tailwind as well: https://tailwindcss.com/docs/extracting-components // in JS, then build .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
In that secenario why even use tailwind? Why not just normal css?
Re: Tailwind UI
#236Remove all the things
Re: Tailwind UI
#237For anyone who hasn't tried tailwind I really suggest that you give it a shot. It's made me 2-5x more productive when styling something from scratch.
Bulma user here. I tried tailwind but it never works for me but the Bulma another hand it works perfectly well.
I finished my frontend work in two days with Bulma. This is someone who had zero experience with front-end development.
Re: Tailwind UI
#238On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development. Back End Developer Personally I would prefer Bootstrap over this approach.
Another reason Bootstrap > Tailwind is consistency & context. Adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will look like an alert everywhere. If I want to change how alerts look, I change the CSS With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative`. Then I'd have to change my HTML everywhere to update the appearance of aler…
> Then I'd have to change my HTML everywhere
Nope. Once you see same (sub)set of classes repeated, you would instead define .alert and .alert-danger using Tailwind's @apply directive, and you now have a single place to change how your `alert alert-danger` looks :)
Re: Tailwind UI
#239Earlier quoted context omitted.
Looks good and polished, but that landing page requires 165 KB of CSS, gzipped. That's, to put it lightly, ridiculous.
Congratulations on building your time machine. And welcome to 2020. 165kb is nothing these days and only takes a fraction of a second to download and processes even on a slow computer. You're going to find all kinds of other cool cool stuff you didn't have in the 90's. Did you know you can build and deploy an entire application without ever running a compiler or touching a physical machine now? We have REPLs were you…
Congratulations on leaving your bubble. And welcome to the developping world. 165kb is a pain in the ass over 3G, and when people buy loads for them sim card giving them a data amount still measured in megabytes, it matters a lot, even the big ones like facebook had to make lite versions because of it.
You're going to rediscover all kinds of other cool cool stuff you forgot you could do whle wasting resources in the last decades. With everyone going with bloated mess and electron apps, it is a really amazing time to be building snappy softwares now. So, again, welcome.
(the arrogant tone of your message was really misplaced)
Re: Tailwind UI
#240I've been following this closely. Given the preview with some components listed it seems exceptionally well made: https://tailwindui.com/components There are also live demos of the app and marketing pages: 1. https://tailwindui.com/page-examples/landing-page-01 2. https://tailwindui.com/page-examples/detail-view-01# Plus a screencast on how to use it to build these pages: https://vimeo.com/393580241/82c6d7c5f6
Do these stylistic simple preview images have a name? I have been searching for these for a long time to use in my application without designing them all by my own. A free-to use pack of these would be really great.
"Product Illustration" is what Steve (the designer) calls them. See: https://www.youtube.com/watch?v=1HDR-AV4ODU for a livestream of how he makes them