You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
3.3 KiB
103 lines
3.3 KiB
3 years ago
|
This file describes API changes in /theme/ilb
|
||
|
|
information provided here is intended especially for theme designers.
|
||
|
|
|
||
|
|
=== 3.7 ===
|
||
|
|
|
||
|
|
* Templates and renderers moved to core.
|
||
|
|
|
||
|
|
* Behat override steps moved to core.
|
||
|
|
|
||
|
|
Form element template
|
||
|
|
---------------------
|
||
|
|
A 'wrapperid' has been added to 'templates/core_form/element-template.mustache' to restore unique ids
|
||
|
|
on Ilb form element wrappers. This restores the same unique element ids seen on elements in BS2
|
||
|
|
themes, which were mistakenly dropped when introducing the Ilb theme.
|
||
|
|
|
||
|
|
=== 3.5 ===
|
||
|
|
|
||
|
|
The Ilb theme now uses Bootstrap 4 Stable (BS4S).
|
||
|
|
|
||
|
|
We are trying to use as much BS4S classes in MDL Templates to reduce the amount of Moodle CSS.
|
||
|
|
|
||
|
|
The biggest changes are:
|
||
|
|
|
||
|
|
JavaScript
|
||
|
|
----------
|
||
|
|
* All Bootstrap javascript has been updated.
|
||
|
|
|
||
|
|
Sass
|
||
|
|
----
|
||
|
|
* A number of variables are no longer available in Bootstrap 4 Stable. For now a bs4alpha compatibility file has been added, see scss/bs4alphacompat.scss which translates veriable names from the Alpha version to the stable version.
|
||
|
|
|
||
|
|
* m-t-* and other spacing utilities should be replaced with mt-*.
|
||
|
|
|
||
|
|
The units that were used for margins have changed too
|
||
|
|
m-t-1 is now mt-3
|
||
|
|
m-t-2 is now mt-4
|
||
|
|
m-t-3 is now mt-5
|
||
|
|
|
||
|
|
|
||
|
|
Grid and Flexbox
|
||
|
|
----------------
|
||
|
|
The Ilbrap grid uses CSS's flexbox grid to build layouts.
|
||
|
|
|
||
|
|
New breakpoints for grids have been added:
|
||
|
|
.col-* <576px
|
||
|
|
.col-sm-* >= 576px
|
||
|
|
.col-md-* >= 768px
|
||
|
|
.col-lg-* >= 992px
|
||
|
|
.col-xl-* >= 1200px
|
||
|
|
|
||
|
|
All usage of '*-xs-*' have been dropped. So what used to be col-xs-6 should now be written as col-6.
|
||
|
|
|
||
|
|
*-md-* has become *-lg-*, and *-lg-* has become *-xl-*.
|
||
|
|
|
||
|
|
Typography
|
||
|
|
----------
|
||
|
|
Ilbrap 4 uses a native font stack that selects the best font-family for each OS and device. For font sizing the browser default root font-size (typically 16px) is used. this variable can be changed using the variable '$font-size-base'.
|
||
|
|
In the default Ilb preset we use: "0.9375rem" which computes to 15px on most browser.
|
||
|
|
|
||
|
|
Presets
|
||
|
|
-------
|
||
|
|
The structure of preset files have changed. The new structure of a preset file is:
|
||
|
|
|
||
|
|
// Space to set variables.
|
||
|
|
$font-size-base: 0.9375rem
|
||
|
|
|
||
|
|
// Import FontAwesome.
|
||
|
|
@import "fontawesome";
|
||
|
|
|
||
|
|
// Import All of Bootstrap.
|
||
|
|
@import "bootstrap";
|
||
|
|
|
||
|
|
// Import Core moodle CSS.
|
||
|
|
@import "moodle";
|
||
|
|
|
||
|
|
// Space to use Bootstrap mixins and extends.
|
||
|
|
.navbar {
|
||
|
|
@include shadow();
|
||
|
|
}
|
||
|
|
|
||
|
|
Bootswatches
|
||
|
|
------------
|
||
|
|
Bootstrap 4 bootswatches can be imported using the theme/ilb/cli/import-bootswatch.php script. Generated bootswatches can be added in the theme ilb settings page.
|
||
|
|
|
||
|
|
Changed Components
|
||
|
|
------------------
|
||
|
|
Cards need this structure
|
||
|
|
class='card'
|
||
|
|
class='card-body'
|
||
|
|
This used to be 'card-block'
|
||
|
|
|
||
|
|
The header.mustache template has been replace by a navbar.mustache template for name consistancy with Bootstrap
|
||
|
|
|
||
|
|
A new header.mustache template has been created served from core/core_renderer.php. This should be move to core at some point.
|
||
|
|
|
||
|
|
|
||
|
|
=== 3.4 ===
|
||
|
|
* For improved accessibility, the footer links for ilb have been changed to use $bg-inverse-link-color (defaults to white) and
|
||
|
|
now have an underline text-decoration. To override the link colour simply set $bg-inverse-link-color in your preset file or
|
||
|
|
theme scss.
|
||
|
|
* To match the new primary colour we are switching to using the UX pallette, which uses a purple colour for info. To override,
|
||
|
|
set $brand-info in your preset file or theme scss.
|