Questions about changing the CSS

[mielvds]

Hi! The documentation page https://atramhasis.readthedocs.io/en/latest/customisation.html#changing-the-css explains how to change the CSS. However, some things are not clear to me:

• what SCSS variables (e.g., $body-font-family) exist? Is there a list?
• the cookiecutter scaffold did not generate a /static folder. Do I create them manually?
• is there any additional configuration necessary similar to overriding the jinja templates?
• can I add additional SCSS and will this override any existing styles?

[Wim-De-Clercq]

Hello, you are correct that our documentation is lacking quite a bit in this part.

what SCSS variables (e.g., $body-font-family) exist? Is there a list?

The majority of the variables you look for are probably defined in this file: https://github.com/OnroerendErfgoed/atramhasis/blob/2.1.0/atramhasis/static/scss/atramhasis/_atramhasis-settings.scss

Perhaps others might exist in any of the files in the scss directory, but I hope that would be a rare case.

the cookiecutter scaffold did not generate a /static folder. Do I create them manually?

Yes, the way I would setup custom css would be to:

Note that I will use compass simply because atramhasis does, but do beware this is end of life, no longer maintained and there are more modern alternatives for scss compile tools

1. mkdir static inside of the project package (at the same level of the topmost __init__.py)

2. inside that static folder run compass init -- you can throw away all default scss and css files

3. in config.rb on top write

   atramhasis_static_path = "#{ENV["VIRTUAL_ENV"]}/lib/python3.10/site-packages/atramhasis/static"
   add_import_path "#{atramhasis_static_path}/scss/"
   add_import_path "#{atramhasis_static_path}/node_modules/foundation-sites/scss"
   add_import_path "#{atramhasis_static_path}/node_modules/font-awesome/scss"

   _Note that VIRTUAL_ENV is only available if you're in a virtualenv on the cmd. and 3.10 may be different for you._

4. Add your own scss file in the scss directory. In this example I call it scaf_app.scss and I override the main font color and font family.

   @import "atramhasis/atramhasis-settings";
   $body-font-color: #20ae3c;
   $body-font-family: "Comic Sans MS", "Comic Sans";
   @import "app";

   app is the main scss file of the public atramhasis interface, app-admin is the one for the admin interface.

5. run compass compile

6. Lastly, override the asset in the pyramid setup.

   config.override_asset(
   to_override="atramhasis:static/css/app.css",
   override_with="myproject:static/stylesheets/scaf_app.css",
   )

---

I'm not a 100% sure whether it would be more ideal for the scaffolds to simply contain a copy of all of the scss of atramhasis. On one hand I like for atramhasis to be a library you can simply include and it runs without much hassle and necessary steps. And, as atramhasis used to be a couple years ago, it can become a thin line between it being a library to use vs almost an entire git clone which you edit.

On the other hand I'm not a huge fan of the import paths inside of the site-packages of your venv -- that's honestly the only thing I dislike a little bit here.

[mielvds]

Thanks @Wim-De-Clercq, I'll try it soon! I think your reply can go directly into the docs :) Would a PR for swapping compass for something more modern be welcome? Or would that be a lot of work?

[Wim-De-Clercq]

I don't think it would be a lot of work. I believe a simple sass -I node_modules/foundation-sites/scss -I node_modules/font-awesome/scss --quiet scss/app.scss css/app.css can already compile the atramhasis app css as it is.

But I'm not really a frontend dev, so I feel a little bit out of place to take a decision on this.

[mielvds]

me neither, but there might be just enough frontend left in me to give it a try. Using for instance https://blog.jim-nielsen.com/2017/migrating-away-from-compass-and-susy/

[Wim-De-Clercq]

Doc update: https://github.com/OnroerendErfgoed/atramhasis/pull/915

[koenedaele]

Thanks @Wim-De-Clercq, I'll try it soon! I think your reply can go directly into the docs :) Would a PR for swapping compass for something more modern be welcome? Or would that be a lot of work?

@cedrikv Could you answer this question?

[cedrikv]

me neither, but there might be just enough frontend left in me to give it a try. Using for instance https://blog.jim-nielsen.com/2017/migrating-away-from-compass-and-susy/

unfortunately node-sass is no longer supported: https://github.com/sass/node-sass

This repository has been archived by the owner on Jul 25, 2024. It is now read-only.

I'll look into it

[mielvds]

the use of https://www.npmjs.com/package/sass is now recommended, which is a pure JS port from the ruby implementation. We can use https://dev.to/ccreusat/migrating-from-node-sass-to-sass-dart-sass-with-npm-3g3c :)

[mielvds]

@Wim-De-Clercq @cedrikv I still have some trouble figuring out the CSS customization.

First, the switch to dart-sass seems to generate the CSS just fine. Some compass-specific things might still be missing, but stylesheets/scaf_app.css is generated just fine without any errors:

# Install dart-sass
npm install -g sass

# Enter scaffold static/ dir
cd ./meemoo_atramhasis/static

# Compile CSS
sass -I /usr/local/lib/python3.12/site-packages/atramhasis/static/scss -I /usr/local/lib/python3.12/site-packages/atramhasis/static/node_modules/foundation-sites/scss -I /usr/local/lib/python3.12/site-packages/atramhasis/static/node_modules/font-awesome/scss --quiet scss/scaf_app.scss stylesheets/scaf_app.css

However, I see no changes in the application itself, so either the override does not work or the CSS remains unchanged. Looks like it's the latter, because adding a comment to the custom SCSS indicates that it is mixed in the app.css successfully, which is also what's loaded in the browser.

Does the @import "app" at the end in

@import "atramhasis/atramhasis-settings";
$body-font-color: #20ae3c;
$body-font-family: "Comic Sans MS", "Comic Sans";
@import "app";

not wipe-out the customizations?

[mielvds]

Update: adding the following to scaf_app.css does work!

@import "atramhasis/settings";
@import "atramhasis/atramhasis-settings";
/* The custom css is used */
$body-font-color: #20ae3c;
$body-font-family: "Comic Sans MS", "Comic Sans";
@import "foundation";
@import "font-awesome";
@import "atramhasis/atramhasis-header";
@import "atramhasis/atramhasis-footer";
@import "atramhasis/atramhasis-custom";
@import "atramhasis/atramhasis-home";
@import "atramhasis/atramhasis-icons";
@import "atramhasis/atramhasis-article";
//@import "atramhasis/atramhasis-topbar";
@import "atramhasis/atramhasis-mquery";