Voyager: [feature request] Publish css src (.sass/.scss)?

Created on 8 Nov 2016 · 8Comments · Source: the-control-group/voyager

This. looks. simply. awesome!
Great backend that gives you a whole lot but is still just a package for plain Laravel that doesn't mess with the rest! AWESOME!

I am missing the ability to publish/get the source of the css.
Why not include the pre-processed styling assets in .sass/.scss?

Or are we supposed to add our own styling?

enhancement

Source

blomdahldaniel

Most helpful comment

We will likely not be publishing the scss file(s) for Voyager, but we are currently working on making Voyager use Laravel Mix.

fletch3555 on 15 Jul 2017

👍2

All 8 comments

Hi
This is also my problem.
How we can change the css or add our own style?

miladrezaei on 5 Jan 2017

Instead of publishing it, would it work if it was possible to add a set of assets that was loading with Voyager?

marktopper on 6 Jan 2017

What do you mean with "assets that was loading with Voyager"? Do you mean the source would be inside the vendor dir? And then the user can copy it manually from there to overwrite themselves?

Because adding assets and manually overriding classes is of course already an option. However it needs to bee easier to edit and tweak the current sass/scss/less in a preferred way for customisation.

blomdahldaniel on 6 Jan 2017

@blomdahldaniel: I mean that you can overwrite the styling in you own voyager.css file like this:

body {
  background: red !important;
}

Then this style rules would be loaded after the other Voyager vendor styles.
However, you would have to redesign it without any help.

Publishing the asserts source would be much easier as you say, however it will also disable us to send bug fixes in the styling.

However still considering what option to go with.

marktopper on 6 Jan 2017

@marktopper Hm.. My first feeling is that using !important this way is really bad and not a good solution in the long run...?

Sure, the user can create and override all the css with !important as you wrote. So, create voyager.sass and then let Laravel Elixir (soon Laravel Mix) compile it to voyager.css. But then it means I would give the user a lot of unnecessary .css load and that would be bad. For example, say that I want to change all the colours, fonts and margins. That means I would have to add, almost your entire .css again. Which would be bad.

Solution suggestion

If I may suggest then: First and foremost I really think you should include the real sass/scss files in this repository. This would almost solve everything. It would allow easy overrides for variables and components by simply importing into the users own sass/scss. You would have to set a voyager.config option like customCss => true or something like that to not make double load but this seems like a pretty neet solution (at least in my head.. :p)...

// my-own-app.scss
// dont mind if the paths are wrong.. 

// pulling in all voyager variables
@import 'vendor/voyager/resources/scss/variables.scss';

// here Im overriding some variables
$primary-color: #BADA55;
$font-family:  MyCoolFont, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

// pulling in all voyager components
@import 'vendor/voyager/resources/scss/components.scss';

@import 'my-own-customization-of-voyager/database.scss';

Worrying about providing css-fixes if the user has already modified the css should not be an issue?Just say: "if you customise the styling you might loose new updates/fixes".
And with the example above, all the fixes you provide would still be updated correctly (when the user rerun the compilation) except if you would change the variables...

In my head (ofc I might be missing something) this would be a great way of solving this. You still point your stuff to the publishable/assets/css/voyager.css. But if the user says it uses customized css, then the user is responsible for importing it and update it and your css file should not be used.

Not yet that reliable, but cool, solution:

A potential, not yet that reliable but cool solution could be to use CSS Variables for at least the big things like colours, margin/padding, font-family etc etc.
Then, to customise we can just override that in the body tag or even in the style tag.
I'm not sure about the browser support though. Its not supported by IE yet... It would be a cool solution though!

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="voyager.css">
    <styles>
      :root{
        --primary-color: #BADA55;
        --font-family: Roboto, 'helvetica neue', sans-serif;
      };
    <styles>
  </head>
  <body>
    <!-- 
      ...
      content
      ...
    -->

blomdahldaniel on 6 Jan 2017

👍1

For now I've ended up with a following workaround:

I've 'decompiled' css to scss (with http://sebastianpontow.de/css2compass/ )

Very helpful to extract colors and then change them.

antongorodezkiy on 25 Apr 2017

We will likely not be publishing the scss file(s) for Voyager, but we are currently working on making Voyager use Laravel Mix.

fletch3555 on 15 Jul 2017

👍2

This issue has been automatically locked since there has not been any recent activity after it was closed. If you have further questions please ask in our Slack group.