DEV Community

loading...
Cover image for Best CSS Framework for Nuxt.js with Date Picker

Best CSS Framework for Nuxt.js with Date Picker

kimeiga profile image Hakan Alpay Updated on ・5 min read

When you start a new Nuxt.js project, it will ask you for which CSS Framework you want to use.

CSS Framework Choices

I was unfamiliar with a lot of the options, because they were all Vue wrappers for CSS frameworks.

I did some research on all of them and concluded the following:

Choose Buefy

  • Good support for dynamic input elements on desktop and mobile
  • Small bundle size:

It was difficult to evaluate the bundle size of all of the options since bundlephobia's numbers didn't seem to line up with the numbers in the docs for some of these frameworks so...

My primary criteria was how good the dynamic inputs were (specifically <input type="datetime-local">, and whether they worked on desktop AND mobile

Breakdown of the options

Element UI

https://element.eleme.cn/

Initially I thought that Element UI would be the best because it has support for shortcuts in the date time picker which are cool and it has animations, but it broke on mobile.

datetime picker:

https://element.eleme.cn/#/en-US/component/datetime-picker#datetimepicker

Ant Design (Vue)

https://antdv.com/

Looks really nice tbh.

Datepicker is nice but the time picker doesn’t scroll on mobile unless you tap a cell first, and then only that time digit's scroll view is scrollable. Really strange bug.

datetime picker:
https://antdv.com/components/date-picker/#DatePicker

Vuetify

https://vuetifyjs.com/en/

Also looks pretty nice albeit the spacing is really ...off. Especially throughout the docs.

Date picker in menu takes 1s+ to appear after tapping the field. Way too slow.

datetime picker (in menu (so its a modal, which is what I wanted)):
https://vuetifyjs.com/en/components/date-pickers/#date-pickers-in-dialog-and-menu

Framevuerk

https://framevuerk.com/

Framevuerk is ok. Good for Farsi and Arabic since it has RTL support.

It has datetime picker which works fine.

However, on mobile, when you tap the hamburger menu and open the sidebar, and then tap the search field, the sidebar closes and you cannot type. So probably bad mobile experiences elsewhere too.

datetime picker:
https://framevuerk.com/components/datepicker

Bootstrap-Vue

https://bootstrap-vue.org/

Bootstrap Vue’s time picker is bad because you can only click up and down arrows to set the time (no typing, no <select>)

And it is too small on mobile, and too hard to select time further from current time.

The date picker is ok i guess.

https://bootstrap-vue.org/docs/components/time#time

Tachyons

https://tachyons.io/

I'm sure Tachyons is useful but it has no date picker and is missing a lot of things in general, so I didn't use it.

Tailwind CSS

https://tailwindcss.com/

Tailwind CSS has no date picker (obviously), and I dont like the look of the html having so many classes on it.

Here's an example of a layout they made with Tailwind UI (which seems to be part of their premium model).

https://tailwindui.com/components/marketing/sections/heroes

It looks sexy but the html elements have so many attributes that its hard to find the actual markup.

snippet:

<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
        <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start">
          <div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
            <div class="flex items-center justify-between w-full md:w-auto">
              <a href="#">
                <img class="h-8 w-auto sm:h-10" src="/img/logos/workflow-mark-on-white.svg" alt="" />
              </a>
              <div class="-mr-2 flex items-center md:hidden">
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                  <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
          <div class="hidden md:block md:ml-10 md:pr-4">
            <a href="#" class="font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Product</a>
            <a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Features</a>
            <a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Marketplace</a>
            <a href="#" class="ml-8 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Company</a>
            <a href="#" class="ml-8 font-medium text-indigo-600 hover:text-indigo-900 focus:outline-none focus:text-indigo-700 transition duration-150 ease-in-out">Log in</a>
          </div>
Enter fullscreen mode Exit fullscreen mode

Buefy

https://buefy.org/

Buefy’s time picker isn’t perfect, but it switches to native time and date picker on mobile which is probably the best solution since it doesn’t rely on you scrolling to the right part of the page to see it (because its modal to your screen), and the desktop experience is ok.

Bulma

https://bulma.io/

I'm not going to go over Bulma, since it doesn't seem to have a date picker without using bulma-extensions, and if you were using it in Vue, you might as well use Buefy to make development easier I suppose.

One thing I don't like about Bulma though is how the docs don't have a search bar. Please correct me if I'm wrong though, I would like to find said search bar.

iView

https://www.iviewui.com/

Also sexy, but the datepicker is clearly meant for chinese week ordinals because when you switch to English "Sat", "Mon", "Tue", etc, it becomes pretty cramped. I think there are other lacks of localization elsewhere.

Also breaks on mobile

https://www.iviewui.com/components/date-picker-en

Vuesax

https://lusaxweb.github.io/vuesax/

Cool looking, no date time picker

Conclusion

I realize only looking for css frameworks that offer a date time picker is pretty narrow minded, but there were so many css frameworks in that list that for me to use a more varied criteria, I probably would have ended up spending all day looking.

For me, the most important thing in a CSS Framework is lots of useful styled components, mobile support, and SMALL bundle size

A Date picker is really common in web apps that involve scheduling, and I needed it in the app that I was about to make.

It was also the easiest way for me to evaluate all the frameworks in the list quickly.

I realize that a lot of people like certain CSS Frameworks and I might have been unfair to them by disqualifying ones that don't have a styled datetime picker (even though the standard one with Chrome is kiiiinda ok, but it doesn't have a time picker UI).

But the whole point of using a CSS Framework for me is to hit the ground running with tons of nicely styled dynamic components for different needs, and having to write as little css myself as possible.

I think this probably means that Buefy is the best css framework to choose for Vue/Nuxt. I will definitely try Buefy and give my feedback later.

If you want to see the CSS Frameworks compared in a real world setting that is framework agnostic, check out this awesome article:

https://codeburst.io/evaluating-css-frameworks-bulma-vs-foundation-vs-milligram-vs-pure-vs-semantic-vs-uikit-503883bd25a3

Discussion

pic
Editor guide
Collapse
kimeiga profile image
Hakan Alpay Author

tbh this was a super low effort one because i just was looking for a date picker and didnt judge them wholistically at all but i still stand by the philosophy that if you are going to pick a component library it should have literally everything you could want it to have

Collapse
gabrielaigner profile image
Gabriel

Tailwind CSS is not a component library, it's a utility-first CSS framework to quickly create custom designs. So there are no copy-paste components like you know them from Bootstrap, Buefy, etc.

If you're looking for a component library, then you have to take a look at Tailwind UI (you did it, but you got that wrong with Tailwind CSS).

Collapse
kimeiga profile image
Hakan Alpay Author

That is a very good point to make