Spark UI

Spark is simply based on Bootstrap with a few changes. Nothing big. Of course you can integrate spark into every admin theme, there are no limits since you can edit any blade view file to your needs.

Did anybody manage to integrate Spark with SASS based Boostrap 4? Client has such a wish, and well, his wish is mine. ;)

Not 4, but 3 yes. Just npm install the sass version, add sass file under assets and update gulp file.

Done. Works with foundation sites and materialize to quite well. Though you have to update every view file. Including some vue components and mixins. That was the frustrating part swapping CSS all together.

Thanks for the answer. Yeah I just succeeded to make it work with Bootstrap 4 too. Redoing the views at the moment. Hmm, there were Vue components and mixins dependent on original LESS design?

No classes is all when I tried foundation and materialize. You should be good with bootstrap 4.

Here was also a pull request for converting the less to sass files: https://github.com/laravel/spark/pull/2

Hello people, Thanks for your replies. I wanted to make the side pane which contains the navigation UI into an admin theme functionality. Like how the admin panel minimizes the menu when rendered on a mobile, how can i minimize the spark's navigation pane on the left when rendered in a mobile browser?

@ younus Maybe use the (hidden-sm and hidden-xs) classes: http://getbootstrap.com/css/#responsive-utilities-classes

Blade Path: spark-app/basic/resources/views/vendor/spark/kiosk.blade.php 

It would be nice to use AdminLTE (http://demo.adminlte.acacha.org/) in future to have a scalable Admin Panel (Kiosk)

Most of the admin themes use jquery to hide and open the side menu like that (and make it full length according the window size). I'm sure you can google a plugin for it.

hey guys, with the latest spark version using mix it doesn't seem to be that easy anymore, anybody tried makin' it work on 5.4 with latest spark version?

Remove bootstrap from your dependencies:

yarn remove bootstrap

Note: If you don't have yarn installed, run npm install -g yarn so it's globally available to you.

Install bootstrap-sass instead:

yarn add bootstrap-sass

Delete the resources/assets/less.sass file (you'll want to copy Spark's custom CSS before doing this) and make the following directory:

mkdir resources/assets/sass

Create app.scss in that folder and add this to the top:

@import './../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap;

Then paste Spark's custom CSS (that you previously copied from the resources/assets/less/app.sass file) below that line.

Open up webpack.mix.js add replace mix.less('resources/assets/less/app.sass', 'public/css') with 'mix.sass('resources/assets/sass/app.scss', 'public/css')`.

Then run npm run dev to rebuild the stylesheets.

You'll now have the SCSS version of Bootstrap rather than the LESS version (I have no idea why this was done in the first place, it should be setup the same way Laravel 5.4 is).

This also works with Bootstrap 4, you just have to install Bootstrap like this:

yarn add [email protected]

Then update the path in your resources/assets/sass/app.scss file to ./../../../node_modules/bootstrap/scss/bootstrap.

@divspace Did you keep the default Spark CSS too?