Skip to content

Make it possible to define SCSS settings overrides from modules#8198

Merged
leio10 merged 4 commits intodecidim:developfrom
mainio:feature/modify-scss-vars-from-module
Jul 19, 2021
Merged

Make it possible to define SCSS settings overrides from modules#8198
leio10 merged 4 commits intodecidim:developfrom
mainio:feature/modify-scss-vars-from-module

Conversation

@ahukkanen
Copy link
Copy Markdown
Contributor

@ahukkanen ahukkanen commented Jul 13, 2021 •
edited
Loading

🎩 What? Why?

Right now it is possible to add extra SCSS to the main and admin SCSS from modules as of #8115 and #8154.

But it is not possible to override any Foundation/Decidim SCSS settings variables from modules.

This adds this possibility in order to make it easier to do theming directly from modules.

📌 Related Issues

Testing

  • Override some SCSS variable from a module of your choice by following the added documentation, e.g. $anchor-color: #f00;
  • See whether your change was applied

📋 Checklist

  • ❓ CONSIDER adding a unit test if your PR resolves an issue.
  • ✔️ DO check open PR's to avoid duplicates.
  • ✔️ DO keep pull requests small so they can be easily reviewed.
  • ✔️ DO build locally before pushing.
  • ✔️ DO make sure tests pass.
  • ✔️ DO make sure any new changes are documented in docs/.
  • ✔️ DO add and modify seeds if necessary.
  • ✔️ DO add CHANGELOG upgrade notes if required.
  • ✔️ DO add to GraphQL API if there are new public fields.
  • ✔️ DO add link to MetaDecidim if it's a new feature.
  • ❌AVOID breaking the continuous integration build.
  • ❌AVOID making significant changes to the overall architecture.

@ahukkanen ahukkanen changed the title Make it possible to define SCSS settings overrides from module Make it possible to define SCSS settings overrides from modules Jul 13, 2021
leio10
leio10 approved these changes Jul 19, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@leio10 leio10 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I see that none of the built-in modules are using this, so I guess that this would be used by external modules to customize SCSS variables, right? What type of customizations are you thinking about?

@ahukkanen
Copy link
Copy Markdown
Contributor Author

ahukkanen commented Jul 19, 2021

Yes, you are correct @leio10. None of the core modules are using this.

It would be used to create Decidim themes without having to add additional CSS includes in the view (which will be less performant and more cumbersome). This need came out as we wanted to build a module which would theme Decidim in a specific way.

Example use cases would include:

  • Changing the dark skinned Decidim into a more light skinned version.
  • Changing the body font (family, size, etc.)
  • Changing the global paddings/margins
  • Modifying the breakpoints
  • Changing the gutter widths
  • Changing the form borders
  • Etc.

You might ask why not to do it in the instance itself and I might ask why should we apply the same customizations to all instances separately making their maintenance harder?

It's basically a baby step towards theming Decidim, similarly as you can theme any CMS system out there or e.g. how you can create themes for Discourse.

@leio10 leio10 merged commit 12be8a6 into decidim:develop Jul 19, 2021
@ahukkanen ahukkanen deleted the feature/modify-scss-vars-from-module branch July 19, 2021 16:10
@virgile-dev
Copy link
Copy Markdown
Contributor

virgile-dev commented Jul 22, 2021

Hey @ahukkanen
This is great !
We were thinking on working on such a module. Have you started on your side ? Do you want to collaborate ?
We'll be working on specs soon, let us know.

@ahukkanen
Copy link
Copy Markdown
Contributor Author

ahukkanen commented Jul 22, 2021

@virgile-dev What do you mean exactly?

We are working on a light Decidim theme but it is on hold right now and we'll continue next month.

It's not going to be anything extensive, just something we feel looks a bit fresher, a better starting point (in our opinion). Mostly quite minor changes.

But I am sure interested in what you have in mind, so let me know if you want to back'n'forth about that.

entantoencuanto added a commit that referenced this pull request Jul 26, 2021
@entantoencuanto
Merge branch 'develop' into 7714-quilljs
e488132 
* develop: (32 commits)
  Remove obsolete rake webpack task (#8237)
  Active storage migrations service (#7902)
  Fix content type delegation to blank attachments (#8230)
  Evote bug fixing (#8220)
  Fix the proposal data migration for proposals without authors or organization (#8015)
  Bump addressable version because security issues (#8229)
  Online meetings iframe visibility with time (#8097)
  Meetings iframe and iframe URL (#8096)
  Remove flaky test on meetings (#8226)
  Fix broken tests after problematic PRs (#8224)
  Apply permissions system to comments (#8035)
  Set current_component as commentable when commentable is a participatory space (#8189)
  Fix don't require inactive authorization handlers (#8122)
  Improve metrics calculations performance (#8215)
  Fix performance issue in notification settings page (#8155)
  Active storage migration (#7598)
  Update manual installation guide in documentation (#8217)
  Load JS configuration in elections focus mode layout (#8213)
  Fix user activity pagination when there are hidden items (#8202)
  Make it possible to define SCSS settings overrides from modules (#8198)
  ...
roxanaopr pushed a commit to i-need-another-coffee/decidim that referenced this pull request Jul 29, 2021
@ahukkanen @roxanaopr
Make it possible to define SCSS settings overrides from modules (deci…
3034da4 
…dim#8198)
@ahukkanen
Copy link
Copy Markdown
Contributor Author

ahukkanen commented Sep 29, 2021

Here is an example how to use these features for themes:
https://github.com/mainio/decidim-theme-bleach

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@leio10 leio10 leio10 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

in-review module: admin module: core target: developer-experience

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ahukkanen @virgile-dev @leio10