Spark CSS - How big is too big?

When it minified it will get smaller but better to use purgecss too.

https://github.com/spatie/laravel-mix-purgecss

Oh of course... I forgot about optimisation like that!

Thank you @xuma :)

I just got a bit of a surprise when I saw how long it was taking to compile and how big the file was at the end.

Purgecss looks great - definitely going to run that when I am ready to do so.

Thank you once again - I really appreciate your taking time out of your day to help me :)

Are you still using bootstrap as well? I know Spark uses bootstrap, so was curious. It might be why your size is so large if you're using Bootstrap+Bulma.

Thanks @cronix

Yes - I have been investigating this and it looks that way.

It seems I should make a decision:

1. Stick with what Spark provides for the rest of my app.
2. Leave both in (I mean Tailwind as well) - this doesn't feel too good to me - but doable I guess.
3. Remove Bootstrap and redo the Spark side of things - eek!

Has anyone else done this before? Any advice / thoughts?

I am open minded at this stage so any contributions here would be very welcome.

p.s. SweetAlert is in there too!

All of the spark boilerplate is using Bootstrap 4. All of the templates, the user menus, the admin panels, the many vue components, etc. The javascript (vue+jQuery) used is also acting on those bootstrap 4 classes. You will have a lot of work to do if you want to totally remove Bootstrap 4 as it's js you'd have to muck with in addition to just css. I wouldn't advise it. Not only will it take several solid days of mucking around, but you won't be able to upgrade since you'll have to redo all of your changes manually again (moreso for the js - customized views will be left alone when upgrading but you'd have to manually incorporate any updated html/css in the updates within your custom views). It's not really a path that will leave you with a smile on your face lol. If you use Spark, it's best to go with their defaults. It's very opinionated.

Yes - that makes total sense :)

Thank you @cronix

The more I learn about it Vue is looking like a great choice for my application. I've been working my way through the Laracasts series on Vue (it's very good!). So, unless anyone comes up with any compelling reasons otherwise, I think I am going to persuade myself that Bootstrap 4 is the way to go too and make my life as easy as possible.

I feel slightly disappointed in that I had been eyeing up Tailwind for a while and this was looking like a good opportunity to really put it through it's paces... next time.

Tailwind is create for a brand new project. Spark is like a half assembled project that already has a lot of views and such, so harder to alter.

Vue is very powerful. It's a great choice (not sure why the still needed to use jQuery in addition to vue...).

Vue is also pretty complex, and Spark really uses some pretty advanced Vue. You need to have an above average skillset with vue before really being able to do much in Spark. The vue skills needed to be proficient in Spark go beyond laracasts lessons on here.

I'd go either full bulma, or full bootstrap. You don't want to slow your site down and complicating things by providing both.

This is interesting because form the Spark documentation, it made it sound easy to use your own Javascript and CSS (I think!) framework for the body of your application. It also makes developing Spark itself sound easy too! At least that's the impression that sold me on it :)

At this stage it doesn't really matter to me too much. I just did a little experiment and it's very easy to create a new template that uses

@extends('Spark::layouts.app')

to include the functionality I have written already in there and it all works seamlessly.

My skills with Vue are limited I guess, but I don't plan on changing much in Spark at all, it's fine as it is for my needs. The reason I chose Spark was so I didn't have to do all the things it does - my application needs them so it's huge step up to where I need to be. I guess that's the whole point of it right?

Anyway, there are one or two places in my application where Vue will indeed be an excellent choice, so I am going go for it. No doubt it will be a journey of discovery too, but that's okay.

Thank you once again for your thoughts - I really appreciate them :)

Just a little update to say my initial thoughts on integrating other components into Spark were a little naive, but on further investigation I am really starting to enjoy everything Spark is providing out of the box, and finding that my application development quality is improving by studying the way Spark works. Steep learning curve - erm - yeah! But it feels good!

I also removed Tailwind (thanks npm for making this easy!) and the CSS is back down to a much healthier 193kb un-minified and me and Bootstrap are getting along just fine.

This discussion has been really helpful, just taking this step back and re-evaluating what I am doing, why and how, has really brought me a long way forward in a very short time - so thank you once again!

Also, watching the Spark intro videos helped a lot.

To anyone who may be struggling with Spark (I don't mean if you are an expert and know exactly what you are doing by using spark and adopting a different methodology) I strongly encourage you to really study the way the application is built and adapt your development techniques to follow suit. Life suddenly gets a lot easier and there's lots of wow factor. It's an education in it's own right.

I also tried to change the look and feel of the Spark theme and just gave up. Decided to have a fancy landing page instead and then just make Spark navbar look somewhat similar and that's it. https://captifi.net

It's actually not as bad as I thought, the /resources/sass/app.scss is already set up in mix so you can simply override any of the declarations in Spark, and of course add your own.

npm run dev will pick up on any changes and recompile the css - it's really very easy because all the setup is done for you.

To see how the css is declared ins Spark look in spark/resources/assets/sass/spark.css follow the linked in files from there, there's a whole folder full of them!

e.g. copy this to yours css file and change the colour, mix will do it's thing and the nav bar will change when you refresh the page, here I changed it to blue:

.navbar-spark {
  background-color: $blue;
  box-shadow: 0 2px 4px rgba($black, 0.04);

  i {
    opacity: 0.6;
  }
}

And away you go - it's just Bootstrap - have fun :)