[MCL-1] Theme assets Created: 07/Dec/23  Updated: 29/Jan/24  Resolved: 29/Jan/24

Status: Closed
Project: Magnolia Component Library
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Raymond Tran Assignee: Raymond Tran
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2024-01-19 at 15.44.23.png     PNG File Screenshot 2024-01-22 at 11.07.02.png     PNG File Screenshot 2024-01-22 at 11.09.37.png    
Template:
Acceptance criteria:
Acceptance Criteria
[X]* Theme references the minified and concatenated css and js generated by Webpack
[X]* Theme leverages Imaging module and defines image resize/crops for each supported breakpoint
[X]* Supports light and dark mode toggle control
[X]* Theme is called "Magnolia Components Default Theme" and "Magnolia Components Accessible Theme"
[X]* Theme supports mobile, tablet and desktop breakpoints:
XS: 0
SM: 576px
MD: 768px
LG: 992px
XL: 1200px
[X]* "Magnolia Components Accessible Theme" uses prefers-reduced-motion media query to reduce or disable animations
Content Author Acceptance Criteria
[X]* Content Author can assign the theme to the default demo site
[X]* Content Author can select Desktop, Mobile and Tablet breakpoints in Preview mode
Documentation Acceptance Criteria:
[X]* Contains instructions on how to build the theme using node / webpack
[X]* Contains instructions on how to extend the theme
[ ]* Contains instructions on how to change the look and feel - linking to Bootstrap docs is fine
Date of First Response:

 Description   

User Story:

As a content author,
I want to select a theme
So that I can easily swap out the look and feel of my Magnolia website

Description:

BTK uses resfn to load css / js. Create a new theme and refactor the existing templates to use sitefn.theme to increase flexibility for end-users

 



 Comments   
Comment by Thanh Pham [ 16/Jan/24 ]

Tasks:

  • Define 2 themes:
    • Magnolia Components Default Theme: current default
    • Magnolia Components Accessible Theme: slightly different with the layout and colors to explain how to use/extend the theme
  • Restructure pages templates:
    • Use the site definition with the prototype
    • Pages templates will be inherit from the prototype
  • Demo contents:
    • a site definition
    • pages
Comment by Raymond Tran [ 16/Jan/24 ]

See https://getbootstrap.com/docs/5.3/getting-started/accessibility/ for accessible media query we can add to the css

Generated at Mon Feb 12 04:48:34 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.