New design

[jbrooksuk]

Sketch file for the new design: https://nofile.io/f/CocpvKYzcZs/status-page.sketch

What is within these design files does not need to be taken as gospel however, the layout makes perfect sense.

Cachet.pdf

Firstly, we need to discuss any potential changes that may need to be made or accounted for. After we've agreed on any changes, I'd really appreciate someone taking the time to implement the design as there are many other things that need implementing.

Obviously, a design change on this proportion will result in backwards incompatibilities so now may be the time we look at upgrading Bootstrap or using a different framework. As I've said in other issues, I'm loving Tailwind and we could use it to create a component framework that can still be configured or themed as Cachet currently allows.

[jbrooksuk]

[jbrooksuk]

Note that some of these exports show what Cachet could look like with extra styling.

[MattBSG]

Any examples of metrics being used in the new design?

Love the new look otherwise

[jbrooksuk]

@MattBSG afraid not, this is all I have. I imagine it'd look relatively similar to how they do currently, but with a bit of polish behind them.

[shuichiro-makigaki]

Looks good design!

As for detailed implementation, we should employ HTML5 philosophy such as <section> and <article> tags for:

that can still be configured or themed as Cachet currently allows.

Current v2.4 HTML is not structured well honestly.

[franzliedke]

As I've mentioned elsewhere, IMO Tailwind (and any other framework based on the "Atomic CSS" approach, for that matter) is not suited for creating themable layouts (which, I'd imagine, is a main point in any theme that people might create).

Using Tailwind for component styling is okay, I guess, but it will make life hard in for tweaking layout things (such as element positioning or order) in a theme (unless you want to allow themes to overwrite each component's HTML, which is yet another can of worms).

Nothing against Tailwind, if people like that, but it has its downsides when it comes to things like this.

[jbrooksuk]

@franzliedke are you thinking of using Tailwind with the individual classes? My thinking would be that we'd create individual components/structure without applying colours, instead do what we do currently and create dynamic classes for colours.

[franzliedke]

Basically, I am discouraging using it for layout, that's all. ;)

[nalysius]

I can help for the HTML 5 structure, but I'm not one of these CSS artist masters.

About themes, I think it's important that every person who installs Cachet can override the theme easily if needed. That said, it could be great if we'd have themes! Like PhpMyAdmin, we can download a new theme, develop a new theme, and hop it works. And the new design would be only the default theme.

[jbrooksuk]

I've been thinking about themes as well @anthonybocci!

I think once we're upgraded to Laravel 5.6 we get access to the automatic service provider support. What this means is that we could develop a theme system which looks for all of the registered themes and have them installed with composer require cachethq/theme-dark or whatever.

Technically, this means that themes could use whatever framework they wanted.

[nalysius]

It would be great @jbrooksuk! Doing so we could use the theme we want, either dark, light, or whatever else. Does this mean all the views would move into the theme?

[jbrooksuk]

Yup! Every theme would auto-register and would contain the Blade templates as well, we’d just need to provide the variables to the view.

[nalysius]

That's interesting! Every company could have its own Cachet.

So, before doing the new design we need to update Laravel 5.6 right? A roadmap would be useful ;)

[jbrooksuk]

3137 starts to solve this. I need to write some documentation on the basics of themes and then implement the new design with the required system changes, then if you don't like Tailwind, make a theme :)

[franzliedke]

And replicate all the markup / logic? Meh... :wink:

[jbrooksuk]

@franzliedke as I go about converting the new theme into a theme package, the core Cachet code should be improved to make it easier to get the data you need. In theory, you should be able to display it however you want.

[franzliedke]

@jbrooksuk Can you go into more detail on what that would look like? I cannot imagine an easier way than re-using existing markup and "just" writing / changing CSS to do theming.

[jbrooksuk]

@franzliedke yeah, so basically you'd be able to fork the official theme (which will live at https://github.com/CachetHQ/Official-Theme) and make the changes you'd like to make.

[InsaneSplash]

This will be great as I tried to run the site with a dark background, white text, but there a parts which change in areas they shouldn't and not in others... :)

[ChrisvanChip]

When someone has time to make a merge request for this, it would be nice. I will reward the creator that's making this theme into Cachet.

[rayterrill]

It would be awesome if we could change around how components are laid out on the page as part of the design work/theming. I've currently modified /resources/views/index.blade.php to move the scheduled maintenance portion above the statuses - probably a big no-no in terms of staying consistent with builds, but it accomplished something we'd like to have.

[jbrooksuk]

@rayterrill I've been working on the ability to add custom themes to Cachet. I'm still in the very long process of implementing the design though. I could really do with some help from someone to make that happen plus the dashboard.

[rayterrill]

@jbrooksuk I took a look at the codebase, and it's been a long time since I did any real PHP so it's a little out of my league at the moment, but I'd love to help in any way I can. Happy to re-learn on the fly if you'll have me, mate!

[jbrooksuk]

No worries. To make this entire change work, we basically need to completely rip out the current design and start fresh. This will likely require a lot of changes to the backend to get data in the right format also.

[ojdon]

Is there anyone working on an active fork? If not, I'll fork the current release and start work on moving Cachet to Bootstrap 4, as it's currently based off bootstrap-sass (The Sass fork of Bootstrap 3).

Once migrated, I'll work towards the new design.

[jbrooksuk]

@ojdon not that I'm aware of. If you're happy implementing the changes, that'd be great! I can definitely see the advantage of migrating to Bootstrap 4 first.

[jasoryeh]

Just verifying... are all the fonts Raleway? Are there any other special icons or fonts used?

[jbrooksuk]

Question for @ojdon :)

[ojdon]

@jasoryeh Yup. It's all Raleway.

However, "Material-Design-Iconic-Font" is the icon font in use.

[jasoryeh]

Hey @ojdon I've been working on a kind of html outline that tried to clone the design on the proposed design, but it doesn't use bootstrap...

[duysmil]

when this desing is released?

[ojdon]

@duysmil The first step is to update the frontend to Bootstrap 4 from Bootstrap 3. You can find my progress here: https://github.com/ojdon/Cachet/tree/updates/bootstrap

When I PR and if it gets accepted, then I'll work towards the new design.

[Korthoutrody]

How will the re-design work? Is it one person creating the whole thing or is it split in component work?

[duysmil]

@duysmil The first step is to update the frontend to Bootstrap 4 from Bootstrap 3. You can find my progress here: https://github.com/ojdon/Cachet/tree/updates/bootstrap

When I PR and if it gets accepted, then I'll work towards the new design.

Thanks.

[mswdev]

Would love a re-design

[TheCodingDutchman]

Is a re-design still in the works or has it been canceled? I would love to see a re-design. I'm waiting on this for quite a while now, and last commits to the branches/repos that have to do with this are about 6 months ago.

[TheCodingDutchman]

@jbrooksuk Could you answer the above question?

[jbrooksuk]

It's still something we'll be doing. The problem I keep facing is that we need to rewrite a lot of code to make this work properly.

In doing so, I think we'll end up breaking the current 2.4 branch because there will be:

• Design changes
• Translation changes (I would want to make https://github.com/CachetHQ/Cachet/issues/3726 a part of this)
• The dashboard also needs updating in sync with the frontend (I don't want to be using Bootstrap and Tailwind for example). I also don't want to stick with Bootstrap at this point.

[TheCodingDutchman]

Ok, thanks for letting us know that it's still planned.

[Castafers]

@jbrooksuk Would you like me to create an exact replica of this style however for the admin dashboard for better clarity on the idea? I love doing UI design ^~^

[jbrooksuk]

Absolutely! That'd be brilliant.

I'm very keen on using Tailwind for the re-design if someone does want to implement this.

[Castafers]

So I can create the mockup, however I cannot implement the UI. I would really like to help this project, but it might take me a bit to pickup CSS. If it comes down to I have to for this to not be a dead community project, I'll do it so that people can be satisfied with this open source software.

[Castafers]

@jbrooksuk Tell exactly everything you need for the front-end. I won't be able to help with the back-end though.

[Castafers]

You could use this to speed up production if you want. You are able apply your own JS, HTML, and CSS with an easy block editor called GrapeJS @jbrooksuk

https://grapesjs.com/

[KaKi87]

Hello, Any news on dark theme ? Thanks

[dudeisbrendan03]

Moved from statusfy to cachet because statusfy can't do metrics, but cachet is ugly 😔

[ChrisvanChip]

Time to copy their design.

[KaKi87]

@jbrooksuk Why did you close this while it hasn't yet been implemented ? Thanks

[jbrooksuk]

Thank you for your input on Cachet 2.x. We are shifting our attention and resources to Cachet 3.x and will no longer be supporting the 2.x version. If your feedback or issue is relevant to the 3.x series, we encourage you to engage with the new branch.

For more information on the Cachet rebuild and our plans for 3.x, you can read the announcement https://github.com/CachetHQ/Cachet/discussions/4342.

We appreciate your understanding and look forward to your contributions to the new version.

[KaKi87]

Well, I do want a dark theme for Cachet v3. Thanks