Matheus Garcia
4 years ago
1 changed files with 1 additions and 98 deletions
@ -1,98 +1 @@ |
|||||
This file describes API changes in /theme/ilb |
Tema ILB do Moodle |
||||
information provided here is intended especially for theme designers. |
|
||||
|
|
||||
=== 3.6.2 === |
|
||||
|
|
||||
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. |
|
||||
|
Loading…
Reference in new issue