csssasszurb-foundationplaybackwebjars

How can I define a custom theme in Foundation when using Play Framework org.webjars


I wish to add some customised styling / theming to a “Hello My-Lagom-World” application I am writing.

I have been using the online-auction-scala (https://github.com/lagom/online-auction-scala) as a basic to build my own ‘hello-lagom’ example.

The Play! Application has a dependency on:

"org.webjars" % "foundation" % "6.2.3",
"org.webjars" % "foundation-icon-fonts" % "d596a3cfb3"

and, when run, uses default styling.

Foundation, itself, uses Sass to define its theme, e.g.:

$foundation-palette: (
  primary: #1779ba,
  secondary: #767676,
  success: #3adb76,
  warning: #ffae00,
  alert: #cc4b37,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

and appears to allow them to be overridden by having '@include add-foundation-colors;' in its settings.scss file.

I can successfully override the settings after the scss file have been processed, by direct applying css styling in the main.css, but I don’t believe this is the best or correct approach.

If I’ve understood the intention of settings.scss correctly, this will allow me to override defaults, and is something I’d like to do in the Play! Application. I expected this to be as simple as adding an add-foundation-colors.scss file in an appropriate source folder (e.g. app/assets/css).

I’m new to the world of Play!, Lagom, webjars and Foundation, so have clearly missed something in my currrent noobie understanding. Help and enlightenment gladly appreciated.


Solution

  • Taking into account the comment by James Ward (see Overriding WebJar assets in Play 2.x), I "solved" the issue by:

    a) removing the dependency in build.sbt ("org.webjars" % "foundation" % "6.4.3-1")

    b) creating and using a 'custom download' of foundation (https://foundation.zurb.com/sites/download.html/#customizeFoundation)