Bootstrap 4 vs Bulma vs Foundation with Laravel & Vue js

@peterlc Only tip I have is play with each of them and see which one you prefer/best fits your needs.

A caveat would be: Bootstrap 4 is still in alpha (although I’ve used it for my personal home page).

i personally prefer bulma, eventhough we built more than 100 websites using bs3

another plug thing is, there is something called vue-bulma

Thank you guys,

vue-bulma looks great but i want to use isolated Vue SPA's for specific parts and jump between then with ordinary Laravel/blade and some other css solution like Bulma.

I played around with BS4 and i really like it but i have som issues with Vue and BS4.

i prefer Bulma, i used Bootsrap 4 before but for my development experience Bulma is still the best!

don't worry , you can use both , because laravel MIx can compile all you need together.

suggest you use sass version of bootstrap and bulma , custom-build the part you want to use , then , app.css is there for you

I personally hate polluting my HTML with bootstrap. Flexbox is so much better.

Testing UIKit now and it looks fine.

Any thoughts on UIKit?

UIkit looks nice. Really nice.

I'm thinking of using Element because it looks to integrate really well with vue.js

http://element.eleme.io/#/en-US/component/installation

The main reason i will try UIKit is the great integration possibility with Vue:

"UIkit is listening for DOM manipulations and will automatically initialize, connect and disconnect components as they are inserted or removed from the DOM. That way it can easily be used with JavaScript frameworks like Vue.js and React.

NOTE The UIkit website and its documentation that you are currently looking at is built that way. It is a perfect example of how UIkit and Vue.js can be integrated. Head over to its Github repo to see what a good setup can look like."

Im currently messing around with this Admin template and it looks great:

https://themeforest.net/item/altair-admin-material-design-uikit-template/12190654

It uses only 8 css and 17 js file compared to Bootstrap 4 Template Remark that uses 19 css and 41 js files. Even though AltAir UIKit has more features. And things like drag and sort and parallax works fine on touch screens. I never got that to work with BS4.

I will integrate Vue and bit by bit replace the traditional js stuff.

The end goal is to use clean Laravel/Vue/UIKit.

The future UIKit v3 is in beta and looks even more great regarding Vue integration.

So there is definitely an future for UIKit :)

what do you think @endian ?

@bashy - Care to share your experience with UIKit? ;)

It's hard to choose, with so many UI frameworks out there!

I tend to choose components per project. Although, I do have my gotos - like I prefer Vue to React. Generally, I go for the simplest solution possible in order to have the smallest and more manageable code base.

That means I don't necessarily use Laravel. Sometimes I use Slim, sometimes Lumen. I was using Kohana 3 for a long time. Did projects by combining symphony components, and also did stuff with Flask (python Framework).

I never start with the framework. I think that's a huge mistake. A framework is really just a delivery mechanism for your app.

I start by designing my app. Figuring out what it needs, what specs it has, what it needs to do.

From there I figure out the parts I need. Which server-side framework, maybe even which language, which UI library, etc...

Right now I am working on a small app. It only has a few pages and will only require a few UI components. I looked around at some frameworks - Elements, UIKIT, and a few others are looking good. However, I'm starting to think I just probably not use one and just do the few components I need by hand.

I'm prototyping my app with Laravel, but will switch to Slim when I'm done with the front end. Most of the app will be vanilla Javascript with some Vue.js stuff.

Now, to talk about UIkit directly.

I like the markup it uses. Pretty clean. Much better than the horror that bootstrap is.

It looks pretty well featured, but also nice and compact.

Did you check the project that glues vue and uikit?

https://github.com/vuikit/vuikit

I give UIkit a thumbs up if that's what you need. But, I stand by my philosophy that you must always start with the project requirements, not the framework. So, Uikit will not be for every project.

UiKit is cool with all the features it has out of the box, however it really depends on what you are building.

From my experience, it involves a lot of javascript and it can be overkill for some applications. That's why I am considering switching to another UI framework like Bulma, which is css only and which gives you a freedom to implement your JavaScript part however you want.

Me and my friend just built a small web app on Laravel, Vuejs and elementUI. I'm loving elementUI so far, really easy to get started with normally time consuming tasks such as displaying nice tables or interactive forms.

elementUI is great with bootstrap but can also be used with other CSS frameworks.

So@Hawcleaf would you recomend element over uikit if i'm using Vue?

Anyone tried: http://quasar-framework.org ?

Quasar looks more like a full on framework than a ui framework.

@endian , Will you go with Element or uikit and why?

@endian what can i do with Element that i cant do with uikit?

Will you go with Element or uikit and why?

Not sure yet for the app I'm working on. I was looking for a few days, but was confused because there are so many options. I went back to programming basic utilities for my site, plain javascript tools I need. Will look again in a few weeks.

I don't need layout stuff like grids, etc... I just use flexbox and do it by hand. I just want something for form elements like dropdowns and buttons, etc...

I also haven't checked the sizes of the scripts yet. I like small compact programs as opposed to big frameworks, so that will play in my decision.

what can i do with Element that i cant do with uikit?

Not sure.

Is your app designed yet? I mean specified on paper. Do you know what pages will be like, what kind of form elements you need, etc.. etc...

I think you should that before choosing the UI framework for your project. Then you'll know exactly what you need.

Anyone got something on elementUIs browser compatibility? It looks good so far and I could imagine using it for a project but couldn't find anything on browser compatibilities.

As for uikit, I worked with themes from YooTheme a couple of times (creators of uikit). I can't say if the themes were just not that well tested, or if the issues came from uikit itself. Especially on non apple mobile/touch devices we had several issues. As an example when we've got a dropdown navigation where a parent itself was a link, you couldn't access the child-items on non iOS devices.

For things like this we had to implement several work-arounds. But maybe these things have been fixed (if they were uikit issues at all).

Sometimes i whant to buy à theme and so far i havent found any Element themes.

UIKit on the other hand i found alot. Maybe im looking in the wrong places.

Another thing i like with UIKit is the exstra small grid option like BS4 has.

Maybe this is doable in Elements as well?

Any thoughts on Semantic UI?

@envision I thought it was quite bad. Semantic UI has !important all over the codebase so it's very hard to customize. Not to mention convoluted installation procedure which is a pain when it comes to CI.

Any good resource on how to use Bulma UI with Laravel without a fuss?

UiKit is cool with all the features it has out of the box, however it really depends on what you are building.

From my experience, it involves a lot of javascript and it can be overkill for some applications. That's why I am considering switching to another UI framework like Bulma, which is css only and which gives you a freedom to implement your JavaScript part however you want. As i share on my site apnakanpur