joomla / cassiopeia Goto Github PK
View Code? Open in Web Editor NEWHome of the Cassiopeia frontend template working group for version 4 of the Joomla! Content Management System
License: GNU General Public License v2.0
Home of the Cassiopeia frontend template working group for version 4 of the Joomla! Content Management System
License: GNU General Public License v2.0
The photos used in Joomla sample data look rather old and not attractive. New images should be added to the sample data.
Joomla (marketing) has a license to 123rf.
@marcodings can help here.
The use of css variables instead of scss ones will improve the modularization of the css code. For example we can create a css file for modules stuff that is only loaded when a module is in use.
Examples:
// Global
$cassiopeia-template-color-dark:
$cassiopeia-template-color:
$cassiopeia-container-main-bg:
$cassiopeia-border-color:
can be changed to
// Global
--cassiopeia-template-color-dark:
--cassiopeia-template-color:
--cassiopeia-container-main-bg:
--cassiopeia-border-color:
bottom menu is used to create a back-to-top button. This is the wrong way to do this.
menu followed active parent
text static
use joomla/joomla-cms#30441 instead
The new design shows a card layout for blog layout
This enables us to add the params for "number of colums" from 3.9
Write the layout for caregory blog
The new Layout shows a disc layout for modules
Let we make that by users (bootstrap) or can we add a class or a layout?
Having an installation with the current development branch of this repository or the corresponding installation package (see PR #48 for details), change <rtl>0</rtl>
to <rtl>1</rtl>
in file language/en-GB/langmetadata.xml
and reload the front page.
Background gradient of header and footer changes direction, too.
=> Search box button not really visible when RTL.
See Backend - the basic fontsize is variable, with default 16px but webdesiger can select another basic fontsize.
Can or should we have such a parameter?
See #71 (comment) .
Either $white
or color("white")
is used, but not both, I'd prefer $white
.
A mix of $white
and color("white")
is used throughout Cassiopeia's scss files.
Current "development" branch of this repository + PR #71 applied = "development-cassiopeia-design" branch.
Issue for PR #46 .
Install the latest testing branch and then blog sampe data, see #37 .
Check on frontend by selecting different menu teims if the active item on top level is visualized somehow.
In J4 standard Cassiopeia it looks like underlined, but in fact it was a border. E.g with blog sample data installed, active menu item = "About":
In the Cassiopeia development here I think it worked in past (but am not 100% sure), but now it doesn't work anymore:
Ping @hans2103 .
Te metis menu toggler button for opening/closing the submenu is rather thin. It is not really visible when a menuItem cintains a link and a button.
Better UX
Make the button with contrast color, make the arrow better visible.
Same Space at RTL as at LTR
Missing Space at RTL
php: Linux lamp121.cloudaccess.net 2.6.32-673.8.1.lve1.4.3.1.el6.x86_64 #1 SMP Thu May 5 16:06:47 EDT 2016 x86_64
dbserver: mysql
dbversion: 5.7.29-cll-lve
dbcollation: utf8_general_ci
dbconnectioncollation: utf8mb4_general_ci
dbconnectionencryption:
dbconnencryptsupported: true
phpversion: 7.3.19
server: Apache
sapi_name: cgi-fcgi
version: Joomla! 4.0.0-beta4-dev Development [ Mañana ] 29-July-2020 18:21 GMT
useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:80.0) Gecko/20100101 Firefox/80.0
Install the blog data. Use dev tools and inspect the home page as if an iPhone
Images scale as they have been getting smaller and smaller to fit the panels
Image stops scaling and breaks out of the panel
See image
Chrome latest
Best practice for accessible templates is consequent usage of landmarks (sections).
Replace divs by sections where possible
This has been already started by Hans Kuipers - must be integrated into the project
If in clobal configuration editing for modules and menus is enabled
then the menu has an edit icon and menuitems in default menus get an edit symbol.
It is added via js, appears on hover and is worst UX
In the metismenu appears an icon which enables editing of a menu item
There is an icon for editing the module but no editing of menu items is possible
The new design shows modules in a special card layout
Add and alternative layout
Compare Tag-Align:
RTL | LTR |
---|---|
![]() |
![]() |
RTL-Tag right-aligned
RTL-Tag not right-aligned
php: Linux lamp131.cloudaccess.net 3.10.0-714.10.2.lve1.5.17.el6h.x86_64 #1 SMP Mon Apr 30 13:48:47 EDT 2018 x86_64
dbserver: mysql
dbversion: 5.7.24-cll-lve
dbcollation: utf8_general_ci
dbconnectioncollation: utf8mb4_general_ci
dbconnectionencryption:
dbconnencryptsupported: false
phpversion: 7.3.21
server: Apache
sapi_name: cgi-fcgi
version: Joomla! 4.0.0-beta4-dev Development [ Mañana ] 29-July-2020 18:21 GMT
useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:80.0) Gecko/20100101 Firefox/80.0
Sample Data represent Joomla after installation. The Sample texts are old and it is a chance now to mke good marketing.
I would like to have good texts for sample data and good icons and images.
We can present J4 and new features of J4 or anything which helps to make the prodoct attractive.
Sample data can be expanded and changed independent from other development.
The metismenu has been implemented as a template override.
This means it is ONLY available to cassiopeia and EVERY template will need to copy it and include it with the files they ship if they want a usable menu.
It should be a core layout and if necessary some additional css for cassiopeia to match that templates style.
Whenever you create an override in a core template it should set off a big warning sign that you're doing something wrong.
Submenus in the metismenu could have better distance or contrast against the first level of the menu. As a proposal I have added two fake metis menu screens how a solution could look like.
Can we have two different layouts? Vertical and horizontal?
Meanings?
The search module in cassiopeia need a11y test in every variant, just as confirmation. AXE and Wave say that the form is ok.
The templat description is:
Continuing the space theme (Solarflare from 1.0, Milkyway from 1.5 and Protostar from 3.0), Cassiopeia is the Joomla 4 site template based on Bootstrap 4.
Change the based on Bootstrap 4.?
Install Sample data, read the text "Working on your site". The Text is not up to date, it is based on former joomla versions.
Help of a native speaker would be appreciated.
One of the first things you will probably want to do is change the site title and tag line and to add a logo (what is a tag line?)
to totally change the look of your site you will probably want to install a new template. In the Extensions menu select Extensions Manager and then go to the Install tab (has changed in j4)
When you work with modules, articles or weblinks setting the Access level to Registered (replace weblinks by ?)
Check the navbar at different display sizes. The hamburger icon appears at 991px width, but the menu is still horizontal
The menu changes to vertical, when hamburger menu appears.
The menu is still horizontal.
make articles with intro image, full image
Good design in template overrides
Change the structure from index.php to adapt to the new design. The names of the positions shouldn't change. We should work with sections instead of div container.
Logo + Search
Menu
Banner -> we can eventually create a new chrome to have an image with text overlay
Top-A Modul -> Main Features, it can be a custom module or one of the articles module (category, latest, etc.)
Main Content -> Blog or Featured Layout
- [ ] Bottom-A or Bottom-B -> Custom module, menu
- [ ] Login module has to be re-styled.. it looks very J 1.5 ;-)
That is for the "homepage". Later we can go further with the sub-pages.
Hello!
Can anyone explain what this is and how it's used?
$wa = $this->getWebAssetManager();
// Enable assets
$wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
->useStyle('template.user')
->useScript('template.user');
$wa->registerStyle
$this->getPreloadManager()
Thank you!
The user must be able to select a colour palette. In the backend template atum, this is possible.
We can either define some nice and a11y colour palettes or use the solution from atum.
Most important: The solution must be fast.
A colour palette must be accessible - contrast ratio, colour blindness.
RFC about changes on PR #18 .
The use of local fonts is not really limited to Google Fonts.
When PR #18 will be ready we will be able to download and use fonts from any fonts provider or vendor as long as they are available in woff and woff2 format.
So naming the option "Google Fonts" might be at least misleading.
I ask all to suggest a better naming or vote for some suggested by others, so we can see what would be the best, most widely accepted naming.
We could use instead of "Google Fonts" something like:
Another thing is that we could use fronts from more than one vendor, so it might make sense to group them by vendors in the dropdown, like we now group e.g. the layouts by templates in module's layout selection.
We could use sub-folders to group the scss files (and the compiled css) by the vendors, which would also allow us to build that grouped dropdown options.
E.g. if one adds fonts from a vendor "SomeVendor", there would be following folders for scss and css:
The compile script for the scss can already handle that, i.e. the sub-folders don't need to be hard-coded in the script. It also creates the css folders if they don't exist, based on the scss folders.
In the dropdown one could see something like:
If desired I can implement it.
See above:
Install the the metismenu branch (https://github.com/joomla/cassiopeia/tree/4.0-dev-metismenu-frontend), create a menu with submenus (using menu heading as level 0) on position "menu" and alternative layout "metismenu". Try to open and close the submenu.
The submenu closes and disappears.
The submenu stay open or somehow visible.
The problem is related with the class "mm-collapsing", but because I not fit in javascript, I don't know how to debug it :-(
Menu- and Search-Module vertically aligned.
php: Linux lamp110.cloudaccess.net 3.10.0-962.3.2.lve1.5.24.7.el6h.x86_64 #1 SMP Mon Dec 17 12:02:35 EST 2018 x86_64
dbserver: mysql
dbversion: 5.7.30-cll-lve
dbcollation: utf8_general_ci
dbconnectioncollation: utf8mb4_general_ci
dbconnectionencryption:
dbconnencryptsupported: true
phpversion: 7.3.21
server: Apache
sapi_name: cgi-fcgi
version: Joomla! 4.0.0-beta4-dev Development [ Mañana ] 29-July-2020 18:21 GMT
useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:80.0) Gecko/20100101 Firefox/80.0
Version 3.x has params for multi column layout. How can we provide this in cassiopeia
In https://issues.joomla.org/tracker/joomla-cms/18516 the multicolumn layout is done and merged.
Is something left to do for this team?
The template cassopeia does not have a accessible drop down menu with n sublevels
Write an alternative layout for the module mod_menu based on the js variant of metismenu
Must be also designed and tested for rtl languages
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.