Loading...
 

Improving the Tiki Bootstrap SCSS File Arrangement

For a while, it's been apparent that some variables specified in the themes' variables.scss file aren't being used, they aren't replacing the default Bootstrap values. It's been necessary to add CSS rules for the theme to implement the desired styles.

The upgrade from Bootstrap 4 to 5 seemed like a good time to revisit this, and a good time to have another look at the Bootstrap documentation (https://getbootstrap.com/docs/5.0/customize/sass/). In the info from the doc page below, Option B is the sequence of imports similar to what's used by Tiki:

Bootstrap importing diagram
Copy to clipboard
// Custom.scss // Option A: Include all of Bootstrap // Include any default variable overrides here (though functions won't be available) @import "../node_modules/bootstrap/scss/bootstrap"; // Then add additional custom code here // Custom.scss // Option B: Include parts of Bootstrap // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // 2. Include any default variable overrides here // 3. Include remainder of required Bootstrap stylesheets @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; // 4. Include any optional Bootstrap components as you like @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; // 5. Add additional custom code here


It seems Tiki's organization of the files doesn't match this arrangement as well as it might, so some time was spent looking for and testing a way that gets better results.

Master branch, as of July 2022

For background, here's a typical "theme.scss" file (tikinewt in this case):

tikinewt.scss
Copy to clipboard
// tikinewt/scss/tikinewt.scss; compile to make /* The TikiNewt theme style sheet for Tiki Wiki CMS Groupware. */ @import url("//fonts.googleapis.com/css?family=Simonetta"); @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/functions"; @import "variables"; // Needs to come first, to override Bootstrap defaults. @import "../../base_files/scss/_tiki-variables.scss"; // Values/definitions for Tiki variables (outside of Bootstrap variables) such as _tiki-selectors.scss. @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/bootstrap.scss"; @import "variables"; // Imported again, to override base_files/tiki-variables defaults, if the theme overrides any (this is a kludge that's another reason to revise the method) @import "../../base_files/scss/_tiki-selectors.scss"; @import "_tiki-selectors.scss"; @import "../../base_files/scss/_external-scripts.scss"; @import "../../base_files/scss/_select2-tiki_colors.scss";


So functions.scss needs to come first. Then we've been importing the theme's variables file, then the global Tiki variables, and then (simplified path) vendor/bootstrap/bootstrap.scss, which looks like this:

bootstrap.scss
Copy to clipboard
@import "mixins/banner"; @include bsBanner(""); // scss-docs-start import-stack // Configuration @import "functions"; @import "variables"; @import "maps";a @import "mixins"; @import "utilities"; // Layout & components @import "root"; @import "reboot"; @import "type"; @import "images"; @import "containers"; @import "grid"; @import "tables"; @import "forms"; @import "buttons"; @import "transitions"; @import "dropdown"; @import "button-group"; @import "nav"; @import "navbar"; @import "card"; @import "accordion"; @import "breadcrumb"; @import "pagination"; @import "badge"; @import "alert"; @import "progress"; @import "list-group"; @import "close"; @import "toasts"; @import "modal"; @import "tooltip"; @import "popover"; @import "carousel"; @import "spinners"; @import "offcanvas"; @import "placeholders"; // Helpers @import "helpers"; // Utilities @import "utilities/api"; // scss-docs-end import-stack


And then the other necessary files are imported. This arrangement has been working, generally, but, as mentioned, not all variables defined by the theme have been reflected in the final CSS.

Testing and improved performance

To more closely follow the pattern shown on the Bootstrap customize page, in a test installation, the vendor bootstrap.scss file was copied to Tiki's themes/base_files/scss and then split into two files — tiki-bootstrap_functions.scss and tiki-bootstrap_layout_and_components.scss — that could be imported separately, with the Tiki global and theme variables in between those imports. The import paths of course are updated to point from themes/tiki_base to the vendor Bootstrap directory. The original vendor bootstrap.scss is no longer used by Tiki. The vendor/bootstrap/variables.scss file is no longer imported by vendor/bootstrap/bootstrap.scss, but rather directly by the Tiki theme SCSS file.

tiki-bootstrap_functions.scss
Copy to clipboard
// This is a copy of vendor_bundled/vendor/twbs/bootstrap/scss/_bootstrap.scss containing only the top lines of the file @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/mixins/banner"; @include bsBanner(""); // scss-docs-start import-stack // Configuration @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/functions";

tiki-bootstrap_layout_and_components.scss
Copy to clipboard
// This is a copy of vendor_bundled/vendor/twbs/bootstrap/scss/_bootstrap.scss with lines now in tiki-bootstrap_functions.scss and the default variables import statement commented out //@import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/mixins/banner"; -- now in _tiki-bootstrap_functions //@include bsBanner(""); // scss-docs-start import-stack // // Configuration // @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/functions"; -- now in _tiki-bootstrap_function //@import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/variables"; -- now imported by themename/scss/themename.scss @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/maps"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/mixins"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/utilities"; // Layout & components @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/root"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/reboot"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/type"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/images"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/containers"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/grid"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/tables"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/forms"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/buttons"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/transitions"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/dropdown"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/button-group"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/nav"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/navbar"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/card"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/accordion"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/breadcrumb"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/pagination"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/badge"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/alert"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/progress"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/list-group"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/close"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/toasts"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/modal"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/tooltip"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/popover"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/carousel"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/spinners"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/offcanvas"; @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/placeholders"; // Helpers @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/helpers"; // Utilities @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/utilities/api"; // scss-docs-end import-stack @import "../../../vendor_bundled/vendor/twbs/bootstrap/scss/nav";


This worked for most of the variables tried so far, but initially it didn't work for $nav-item-color. The color indicated by the Bootstrap CSS variable persists even when theme SCSS compiling tries to override it, and even when the CSS variable is replaced by a hex color code in the vendor Bootstrap variables file (this was checked to rule out the use of CSS variables as a factor).

Finally it was found that if the vendor/bootstrap/nav file is imported directly in (near the bottom of) the theme.scss file OR if the nav import statement in tiki_base/bootstrap-layout_and_components is moved to the last import statement position, then the theme's $nav-item-color is used.

Here's an example of a theme.scss file with the revised import statements:

ohia.scss
Copy to clipboard
// ohia/scss/ohia.scss: compile to make /* The Ohia theme stylesheet for Tiki Wiki CMS Groupware. */ @import url(https://fonts.bunny.net/css?family=alegreya-sans:400,400i|alegreya-sans-sc:400,400i,700); @import "../../base_files/scss/_tiki-bootstrap_functions"; // The first part of the former bootstrap.scss @import "variables"; // Needs to come first, to override Bootstrap defaults. @import "../../base_files/scss/_tiki-variables.scss"; // Values/definitions for Tiki variables (outside of Bootstrap variables) such as _tiki-selectors.scss. @import "../../default/scss/variables"; // Provide any variables not defined by theme or tiki_base @import "../../base_files/scss/_tiki-bootstrap_layout_and_components"; // The last part of the former boostrap.scss @import "../../base_files/scss/_tiki-selectors.scss"; @import "_tiki-selectors.scss"; @import "../../base_files/scss/_external-scripts.scss"; @import "../../base_files/scss/_select2-tiki_colors.scss"; // This should probably be imported by _external-scripts.scss


Because nav is one of the "optional" Bootstrap component files, presumably where it comes in the sequence of imports doesn't matter, so maybe there's no downside to moving nav like this. There's no indication so far that other variables are impacted by the move.

A downside of this reorganization is that there is a small amount of redundancy involved in the vendor bootstrap,scss file being copied and split in themes/base_files/, but this file won't change much, if at all, except possibly in major upgrades, so there isn't much of a maintenance hit. And if it works better for themes, then it's worth it.

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools