Volto-light-theme: Volto Theming, Reimagined
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 36 | |
| Autor | ||
| Lizenz | CC-Namensnennung 3.0 Deutschland: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen. | |
| Identifikatoren | 10.5446/66294 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
Plone Conference 202332 / 36
1
2
6
7
11
14
16
26
34
36
00:00
BitSoftware Development KitRückkopplungFreier ParameterProdukt <Mathematik>MehrrechnersystemVorlesung/Konferenz
00:53
TemplateMultiplikationsoperatorMusterspracheComputeranimationVorlesung/Konferenz
01:32
BildverstehenDefaultSuite <Programmpaket>Rechter WinkelURLInverser LimesBildverstehenProjektive EbeneMultiplikationsoperatorSoundverarbeitungComputerarchitekturSoftware Development KitRechenschieberDatenfeldWeb SiteSystemverwaltungDemo <Programm>Computeranimation
04:18
BildverstehenDefaultSuite <Programmpaket>Cross-site scriptingMinkowski-MetrikKnotenmengeClientGamecontrollerWeb-SeiteRechter WinkelBenutzerbeteiligungSoundverarbeitungFormale SemantikWeb SiteRückkopplungDefaultLastKonfigurationsraumMAPSuite <Programmpaket>PunktQuaderHyperbelverfahrenComputeranimationVorlesung/Konferenz
06:37
BildverstehenCross-site scriptingSuite <Programmpaket>PunktVariableDefaultExogene VariableVariableCASE <Informatik>PunktKonfigurationsraumProgrammierumgebungShape <Informatik>InjektivitätSoundverarbeitungKontrollstrukturCliquenweiteMereologieDefaultRechter WinkelOrdnung <Mathematik>BenutzerbeteiligungElektronische PublikationKonfigurationsdatenbankRechenschieberBereichsschätzungCross-site scriptingMAPSchlüsselverwaltungVorlesung/KonferenzComputeranimation
12:26
DefaultKontrollstrukturVariableSCSIWeb-SeiteMetropolitan area networkSpezialrechnerBenutzerfreundlichkeitProjektive EbeneGraphfärbungMaskierung <Informatik>Formale SemantikWurzel <Mathematik>KontrollstrukturAbschattungRechter WinkelClientInteraktives FernsehenSchreib-Lese-KopfGrenzschichtablösungSchlussregelMAPMinkowski-MetrikKategorie <Mathematik>Wrapper <Programmierung>Mailing-ListeEinsPunktVolumenvisualisierungZeiger <Informatik>DefaultVariableGruppenoperationLesen <Datenverarbeitung>QuaderEigentliche AbbildungInjektivitätFontWeb SiteVorlesung/KonferenzComputeranimationProgramm/Quellcode
18:52
Hill-DifferentialgleichungCliquenweiteDefaultAbfrageMinkowski-MetrikKlasse <Mathematik>Wrapper <Programmierung>InformationDefaultRechter WinkelProdukt <Mathematik>Bildgebendes VerfahrenQuaderCliquenweiteProjektive EbeneDämpfungKonfigurationsraumPixelATMMailing-ListeWrapper <Programmierung>GrenzschichtablösungZusammenhängender GraphTexteditorFormale SemantikBenutzerfreundlichkeitWeb-SeiteRückkopplungEindringerkennungMaßerweiterungKategorie <Mathematik>AbfrageKlasse <Mathematik>HypermediaClientKonfiguration <Informatik>DatenstrukturTouchscreenSichtenkonzeptWeb logInhalt <Mathematik>FontObjekt <Kategorie>RandverteilungLokales MinimumGraphfärbungMixed RealityWiderspruchsfreiheitMereologieMathematische LogikGeradeGewicht <Ausgleichsrechnung>Demoszene <Programmierung>Vorlesung/KonferenzBesprechung/InterviewComputeranimationProgramm/Quellcode
26:10
DefaultKlasse <Mathematik>InformationWrapper <Programmierung>Komponente <Software>Physikalisches SystemInterpolationMereologieVariableProjektive EbeneCASE <Informatik>PunktInverser LimesHypermediaPhysikalisches SystemVersionsverwaltungRechter WinkelComputerspielBrowserKategorie <Mathematik>Mixed RealityMultiplikationsoperatorClientCross-site scriptingsinc-FunktionGraphische BenutzeroberflächeKontrollstrukturMathematikKlasse <Mathematik>EinsMaßerweiterungMinkowski-MetrikTypentheorieGraphfärbungInformationAbfrageZusammenhängender GraphMAPWort <Informatik>Web SiteProgrammbibliothekSchreib-Lese-KopfFlächeninhaltGüte der AnpassungData MiningPräprozessorMetropolitan area networkComputeranimationVorlesung/KonferenzBesprechung/Interview
33:28
Physikalisches SystemKomponente <Software>TouchscreenSichtenkonzeptRechter WinkelInhalt <Mathematik>EinflussgrößeCliquenweitePunktDefaultBildgebendes VerfahrenMathematikTypentheorieDatenstrukturMereologieGeradeMatrizenrechnungKlasse <Mathematik>KnotenmengeVersionsverwaltungInformationLokales MinimumKonfigurationsraumProdukt <Mathematik>Coxeter-GruppePixelVisualisierungWeb-SeiteProgrammfehlerProjektive EbeneDatensichtgerätClientService providerWort <Informatik>Güte der AnpassungEigentliche AbbildungCross-site scriptingZusammenhängender GraphQuaderLeistung <Physik>ComputeranimationVorlesung/KonferenzBesprechung/Interview
Transkript: Englisch(automatisch erzeugt)
00:13
So let's go for it Yep Welcome again. Now. I welcome Victor. We'll talk about Volto like them Volto them in reimagined big applause for them
00:31
Okay. Thank you Yeah, we are going to talk about Product theme that we've developed in concept the last year
00:45
Yeah, let me do a little bit of introduction This team Is the placeholder of all the knowledge and feedback and of the good practices that we've been Learning during the last years and we tried the idea was to infuse this
01:01
This knowledge into a theme that we can then reuse across our projects and use it as Template as base of all of them so we don't have to reimplement every single time the same patterns the same
01:20
Best practices everywhere, so yeah, this is a quick look How it looks like We call it lysing because it was meant to be light and clean Yeah, you can take a look at it
01:43
Somewhere Sorry, so maybe maybe comes later, right? Yes Yeah, so we have a site where you can take a look. It's Volto the dash No, it's like dash team dot kit concept that I own. So yeah, probably I think it's you know
02:05
Further slide after so you can take a look at it. You can play with it. It's a demo site You can log in with admin admin. It gets reset every day. So don't worry if you Mess with it. So yeah, this is the vision so
02:21
Along with all these practice practices that we wanted to put in there We also wanted to try a new theming approach. So The idea is yeah, we have this theme that is going to be the foundation of all the upcoming projects, right? Then we had the limitation but it's not limited
02:42
I mean at least is our requirement so that Volto can have only one theme at a time active right because all the architecture of internals of Volto and We wanted since Each project has its own
03:02
peculiarities especially in look and feel we wanted to Have this idea of extending the theme so not to override or create a theme every single time That we had to undertake a project but instead of that using this base theme that we want to have across all our projects as a foundation we
03:23
extend that theme so we don't have to create a new one every single time or neither that is based on these or Come up with a new new thing rather Extending it right so we We took care that this was
03:43
possible we will share with you how we did it afterwards and So the idea is that that all the add-ons sum up to the existing active theme Okay, we had also the one limitation Well, I call it a limitation because it's it's quite of the end ends up by being cumbersome
04:05
If you have an add-on and you want to add CSS That will style that add-on you Import this this CSS as a side effect, right then that CSS pops
04:20
Magically into your build and then it gets applied Technically you don't have any control how this side effect import is going to be applied in your in your build How does it work webpack goes through all the imports when it sees these imports for the CSS
04:43
it just loads it at that point if Later on, it sees another import Of styling then it just put it afterwards. You don't have any control of which one is going to go first right and Eventually at some point that could bite you at the end, right because of CSS
05:06
So we wanted to have control over how the add-ons can sum up to the existing theme and solve this problem then one other thing is how to We wanted also to elevate the vertical spacing importance and relationship between blocks
05:24
Kind right now in vanilla Volto. We don't take much care about that, but we knew our clients Feedback was that they wanted also to that their sites look nice, especially and this vertical spacing was
05:41
Harmonic right through all the pages and we put a special Interest I mean a special effort into making that happen Yeah, we will show you afterwards also how we do that We ditch semantic UI in favor of a more white level based styling
06:00
We still halfway there We will talk about that as well We are leveraging new available CSS features with simpler layouts that the one that Volto pushes Yeah, then we added some opinionated defaults to vanilla Volto So we know which things works and with what which doesn't and then we configure them by default
06:24
So over these vanilla configurations that Volto comes out of the box and Then we also recommended a suite of essential non-core add-ons that we are always using We will talk also later and then
06:41
In general propose a saner customization story. So if you want to quick start with The Volta-like theme you can add it To your build like this and then after this
07:02
You can Add it to your build to your Volta configuration in your packages and your as any other add-on, right? So you you can declare it as an add-on and later on as a theme. This is a feature that That we introduced Early this year So the ability that the that Volta knows about which is the theme the add-on theme
07:26
That is going to be active at that point So we do it like this then Volta knows which add-on is your theme then it applies and put everything Configure everything that for this to happen you can do it also in the Volta confident.js in case that you want to do that
07:43
dynamically programmatically It will really add this shape Again, declare it as an add-on and as a theme and you can also declare the theme via an environment variable that will also Volta will look for it and then it will be configured. So yeah, let's talk about the Volta's new theme
08:05
sensibility story we Thought or we had an idea That we could have some theme entry points or declare some theme entry points In the way that
08:20
With these entry points, which are at the end technically Webpack alliances so with this web pack alliances we could go and compile get all the CSS that we want to inject into our theme now, I will explain how and then make our theme
08:41
build Get these This additional styling that we want in our theme and build them as if there was they were part of the theme itself right, although So how does this work? So it works with CSS themes
09:01
So we can only do that with CSS We declares these two entry points is the underscore main SCSS and the underscore variables SCSS and we can put it in any add-on and that's also important to say So it doesn't have to be a theme add-on because the theme add-on is going to remain Being Volta-like theme right, but we can put it in every add-on
09:24
the add-ons The add-ons the Volta add-ons registry will look for though all the add-ons and will look for these Files that should be in SRC theme in in now in the next slide
09:42
We will we'll see it. This is this is how it works So I have my add-on there and I have in SRC theme I have my underscore main SCSS and then I can have also an underscore variables SCSS and in other add-on I can have only one or Yet my third add-on with again the two of them
10:01
The Volta will get we'll gather all them and we'll gather also in order and that's important thing so in the order that they are declared in the add-ons key and We'll add them to the theme build so the theme is going to
10:23
get this This styling and these variables that will come from the add-ons and will build those styling along with their own Styling so we will sum up to the existing theme Instead of loading here and there pieces of SCS of styling that won't end
10:46
Up in the cascade in a in a drone order or could could be that that could happen and this way we ensure that they are all applied in an order that we intended to Okay, solving the original problem of
11:03
Importing them as a Side effects, right So going back we have these two entry points. You can inject styles and variables in the theme Why the variables this is also important One in our add-ons if we wanted to inject some styling it was impossible to get the variables from Volta
11:27
For example and the same will happen if these we won't be able to do this Because by injecting them into the built of the theme we're getting by default all the the the variables for example the widths
11:42
the Breakpoints and all these kind of things that exist in the theme and we cannot Bring them into the styling of the add-on because the add-on Have a CSS that is detached from everything by doing this this styling from the add-on is
12:00
starts to get integral part of The theme build then it will have access to all the variables. It could inject their own and it will inject its own styling to summing up to the whole story of the theme and The last one is the the remaining of the idea
12:23
So it extend the theme from the inside at build level. Okay Yeah, we are doing CSS by default. Yeah, and We are using this scape hatching from semantic UI We only customize the essentials in the semantic UI side in Volta light theme
12:45
The rest is controlled by the CSS escape hatch. We do the escape hatch we doing this so we have to Customize we have to shadow this at root theme JS that lives in your
13:02
project right and then we We maintain the original ones, which is the the two top ones imports which load semantic UI and then pasta Naga afterwards and then we introduce the escape hatch here and This is the pointer to the entry point that will load all the volta light theme
13:26
Afterwards and all the customizations that we talked about with their own entry points the main and the variables one this is a This this way of escape hatching you can also do it in your theme If you are interesting to do your own volta light theme you could you could do that also as well
13:44
Have your own base teams for your projects This is how the escape hatching is so you can escape from semantic UI put your own SCSS build on that because volta allows you to use SCSS nowadays and
14:03
As you can see on the right. It's how how it looks like inside the Add-ons team so then you customize all the basics of semantics so you Get along with it Probably yeah, what we're doing is also customizing is the small thing like font like yeah break points and things like that then
14:26
We we forget about semantic. You would put it aside then we work on the CSS side Then vertical spacing. Yeah, I told you we took special care into that because it was one of the requirements in our pro in our
14:43
clients Yeah, there you can see summary of How it looks like how all the vertical spacing is carefully Implemented so when when for example take a look at how the
15:03
Background color the gray background color ends the spacing between the button and the next one that is not gray That it's it's the same so it maintains also this harmony, right? Let's see another yet another Example here the same
15:22
Yeah, take a look outside the headings So yeah We have a grid with a heading and then how it relates to the block to the text block above that Doesn't have background color and then it they have same vertical spacing So yeah, so they read them the vertical reading looks nice to the eyes and
15:43
so it revolves in a better in a better readability of of the whole site and Yeah Yeah, and lastly yeah here you can see the interaction above Consecutive grids. This is also that we took care of so, okay We have two consecutive two or more consecutive grids. They became a group of grids. So we also control the
16:08
The spacing between them which is the same as the spacing or isn't early so yeah, we can have this appealing look and feel and then Again in the next one there is another grid box
16:21
But since this grid block it's in a gray space and also has a heading then it has another rules That apply so it has also these the separation are different Although the four agreed at the top in the white background follows
16:40
Another greed with one block in this the next one How we do that. So we end up by coming up with a New way of grouping blocks That the bolt of theme is overriding from the original in
17:03
In vanilla Volto, but it it's in fact it enters by being also very light So it only it's only customizing the render blocks and But it's it's very light it uses
17:24
Yeah, the so it Looks ahead and looks back the blocks that are coming and the locks that came after me and by doing this You group the blocks Now we are doing only that with the background color, but you could say, okay
17:43
Given a property in my block. I can group them with along with this property for now We do the background color So we do this look ahead look behind we met we group them in lists and then we render them Appropriate wrappers so we can then apply more easily the CSS up and down, right?
18:06
We are doing that by injecting some CSS Using the styling wrapper, so we use the features in the styling wrapper to inject proper CSS names that controls all these and it ends up in a very very simple CSS
18:27
Which used to be hugely Difficultly before we have the styling wrapper and these these features that they that it introduces
18:41
Okay, so now I am Continuing with like what we did into the Volto light theme So first thing like the theming is related to the CSS mainly, right? So you we want to make our like CSS writing CSS easy and anybody can write it. So first thing which we Did is like we want to make our team
19:02
Do not use the semantic UI so basically like if you are working on to the Volto and if you want to create your own team or a style the blocks and Semantic UI component it is not an easy thing. You have to find like all the particulars IDs Particular selector then you have to make it a long one and then you have to put the important and everything to override it
19:24
So basically we thought that like why not we move from semantic UI to some our new Invention which is going on in our community like the headless UI which you get the default default component and based on that you can style it and we provide you an easy method like you just go to the
19:41
CSS write the same selector and it overrides the default CSS which we are provided by the Volto light theme So in Volto light theme we introduced like a three new layout for the three new layout basically in the current Volto if you see like we have only one containers and
20:04
Using the hack you we are like Getting ahead of the container with or if you want like shorter you Based on the media query and the viewport with you is generally a style it But after the introduction of the container queries from the
20:21
Start of this year. We really wanted to like utilize this layout structure and we first like introduce internally like how we can refresh that and then we come out with the three layout with like which is like a 4040 a pixel like the maximum layout which I have Volto light theme or any block or any
20:42
Paste can get is like a 4040 pixel and after that will snap it, right? So nothing will go above the 4040 pixels. So even if you have bigger screen, you will get like nice layout then we have like another one which is the default width so if you see the current the modern design like the content and the images are like
21:02
Not like very coupled So you you'll see like the image has some bigger features and everything and the content is readable, right? So we generally wanted to like make the same thing So we come with another default width like which is like 90 40 pixel So based on the viewport with and based on the your like blocks and the team structure
21:24
you can define you can use this a width and apply to your Block and you get a nice teaming Structure like which which is presented by your designer of work or what you want to implement So how we are like achieving that
21:41
So it's not like a rocket science or anything. So basically we are using the mixing of the SCSS so you just have to define like a mix scene and like the narrow container weight and then you do write the Logic which you want and you just call it for every block. So it's basically you write it once use it everywhere Right. So if you have different block which has the same UI which is defined
22:04
you can just write a mix scene and based on your viewport with you can get desires layout for that the one major problem like which we face during the teaming is the the structure or the viewport
22:21
Alignment based on the edit mode. So once the editor is login We have like a toolbar and then we have the sidebar and making our blocks Consistent into the edit mode and the view mode. We are we always have to calculate the what is the toolbar? what is the sidebar do the minus plus and everything and then we structure the
22:41
container for both the edit mode and the view mode But after we move to the container layouts, like it's like a breeze like we do not have to do anything we just written a simple mix in which do which calculate the width of the Remaining part after the toolbar and the sidebar and based on that
23:01
We just applied our CSS like you can do anything like if the viewport is like 40 40 pixel or 720 or whatever it is, you can just do that, right? So this is like a simple things like which we wanted to introduce for each block so that we can have a Sensible like you can define a sensible layout and you can use it for each and every block which you wanted
23:24
Also like same as the our like Volto light theme we do not want to make it everything from the scratch We want to use our community developed add-ons and the add-ons which is related for this team So that we can have a possible product, right? so this is defined as the peer dependency if you want you can use it if you do not want you cannot use it if
23:46
You want just define the? Particular add-ons in your project and it's a label out of the box So basically we are using like accordion block button block like this give you a line like Banner then the heading introduction separator and the slider block
24:03
So basically this we wanted to make a team like which we can use in our coming projects So we basically like need these add-ons and we try to not create like everything from the scratch So we are you going to use this add-ons for this one?
24:23
Yeah, we also have in their Volto sensible default so We override vanilla Volto configurations to meet The this feedback that we've got from our client. So yeah, I don't know for example One small example is the listing block the it allows you to choose between h2 or h3
24:44
Depending on on what what's the structure of of your page? Yeah, we can the conclusion that maybe our clients really only need one and then remove these These option from the listing block things like that, right? So
25:01
we are Touching here and there but small things not not every not everything But yeah for for improving usability and and UX or editor experience. We did these kind of things Then we had to come up with an enhanced style wrapper using
25:23
One feature that is in there that it is this style class name extenders So, you know that the style wrapper allows you to inject into your your block HTML some classes
25:40
given given properties in your block, right so you you put properties like I don't know background color or or Text font or I don't know Margin, so you put some style wrapper properties in your block that goes into an object and even the content of the text this object the style wrapper adds these
26:02
CSS properties to your block either in edit mode or in view mode, but I don't know you know it But we have this style class name extenders thing that you can pass a function That you can even further extend it and allowing custom classes that
26:23
That will help you with with what you are trying to achieve So we did this for as I said to be aware of which blocks are behind which ones are coming and we're injecting this special classes that will later help us with
26:40
constructing these harmonious vertical spacing that I told you about it all it's all it also tell us if it has the same background color as the the block that is behind me on the block that is Coming after things like that or which type of lock is the one that is coming after or the one that I had behind and
27:01
Yeah, I need it helps. It's Generated the class is giving this information and We use it we find out that it was quite useful and then the CSS became far far far more Simpler initially we were doing this using
27:21
sibling selectors and and contain selectors things like that, but it ended up by being impossible and Yeah, we had the patent selector around but it's not there yet in every major browser and it There were situation edge cases that that wouldn't work either. So we found out that by doing this is
27:44
It was more easier far far better Then what is the future the future is that We wanted We will want also to jump into the headless system Components, so now I told you we don't have any semantic on it. We are they are all
28:06
custom or very basic Components using basic tax. We are not doing anything of another world But it will be great if we put in there white level components
28:21
Library, I told you during my other talk that we had identified these react area components, which is very nice and we think It's this is this head headless You are a headless. Yes new new trendy word again
28:40
So this white level components library that will allow us to build components in that are not tied to any design system and Eventually use blown components. Why not that will be based on this kind of idea Yeah, I think that's it
29:01
At the end I will I will I would like also to mention something I Don't know if anybody has already tried I think I know that Piero has built the yokomune theme Following the same ideas But I I know that people are building things around the light theme already. I have a very
29:25
Good friend of mine He's a crack in Python and everything. But yeah, she says man And he's everywhere doing a lot of things and I know that he did already more than four websites with it and he he's
29:42
Yeah Yeah, it's very happy and and with the how easy is to build themes around it and Finally, yeah, I will leave this in the air but at some point both of my theme also bore was was born because we wanted to
30:01
Yeah have this polished theming story in blown in Volta So could be that this is the embryo of the new theming system that we want to push for upcoming versions of blown blown 7 who knows Yeah, so let's let's continue iterating over it. And yeah, thanks for attending
30:30
Any questions Okay, I have this most likely a stupid question for you but using SCSS
30:43
Is that still necessary today with all the enhancement that CSS has seen lately? The answer is it could be that no and This is something that yet. We have to explore. Yeah, but this happened in summer, right?
31:01
when the nesting Support was was finally added to all major browsers We have custom properties since long time ago, so For we can substitute all the interpolate variable interpolations with that as well Although there are some edge cases that you can still use
31:22
CSS properties inside depending what things Especially media queries and in container queries, so there's still some kind of limitations in there But yeah, it's totally worth exploring the new all the new capabilities in the new browsers about
31:40
Because at the end we are not doing that crazy things in the CSS side, right? But yeah seen it's it's there and we know how Yeah, also one thing like everybody is not like have the new updated Chrome like if you ever do not have that So it does not have those features. So this preprocessor already had those
32:03
All the styles like in older ways so we can make it a stable for if you even have like not a good New browser it is still works in your so that's one feature like which community highlights Why we should use the preprocessor thing. Otherwise, we do not also have the mixing and the new things, right? So
32:24
Otherwise you have to write everything at the one place. Alright, so these are there are still some benefits of using like CSS so still the community is using it, but once everything is back putted to the CSS with all like hundred percent working because we still have to do all lots of
32:45
Like finding like hey, this is not working in Chrome. This is not working in Firefox. This is not in Safari and We know that we have a client like which Check it's everywhere right like Safari and we have to do a lot of things so They still need this as CSS I guess
33:01
Yeah, but was it was growing yes How stable is it? So early this year we were thinking about basing a project on it And it seemed like there were still a lot of moving parts If we if you build something on that is likely To have major breaking changes because it's basically than the dependency for you. Yeah
33:26
No, we release 1.0.0 before coming here During Making the presentation. I already spotted a few things but their box visual things here and there
33:41
We'll continue working on that because it will be our base for all the power projects from now on. I Don't expect to have Breaking changes, but if we do so we will issue the proper measure and provide information about that
34:03
But I Don't think so, I mean it's yeah That they will all have because more or less it will be visual Fixies CSS Here and there nothing big And and the theme is basically CSS and a few not that much customizations
34:24
So we they will be using semantic version always, you know, sure So basically like we put lots of effort like to make it like The reusable so that you can put it everywhere without thinking like, okay So do we need to do all those I press and everything? So basically we wanted to make a product which is like
34:45
Looks good from the start. So we took all the measures like what should we do into the team? Right and we introduced like those like layout structure like which is like happening for all the clients So we put all those things So if there is anything breaking it should be into the Volto if Volto changes, right?
35:04
So something has changes and we are doing something like very much less customization on anything then we might have to change the theme but otherwise it is pretty stable like we Check almost all the things like before coming to the conference Right and we have like all the measures to like checking all the blocks all the component vertical spacing with all the like
35:24
Excel sheet and everything to maintain that what is happening? Like what's it left? What is not with all our designers and everything? So I think that is pretty stable. You can use it like right away like We'll maintain also the matrix of the all the things like the peer dependencies and also the minimum
35:45
plumb version for both of our version That requires it Here Why do you choose only three checkpoints and instead of for example for in the
36:03
Configuration in the layouts three what three are three weeks. Yes So the first thing like which we have like we have like 13 inch or 15 inch of screen Generally, we use like when you travel so we have a sensor sensible default like 940 pixel
36:22
so we want to give you a good experience like when you are using like the smaller screen like which we all have and then we went to the 40 40 pixel because generally 40 40 pixel has Like once your MacBook is like you have external Display, then you have like greater than 40 40 pixel of the view layout and we do not want to expand like since we
36:44
Have like highlight block or slider block if you expand like the full width of the external monitor like a big image So we thought that let's just snap everything as the 40 40 pixel So that we have like consistent view like what do you see into like a smaller screen? It's almost
37:00
similar to that and For the default one like the narrow width so we generally think it will be like 80 characters of words so that's the one thing like when you have like a Content because like lots of like the news item content and the base content type or anything which you are publishing that we should have Retention of the eyes like when you move to the new line
37:22
And we do not have to let go like once to the side and then you have to find like where I am So that's the thing like we put this three part Okay, thank you Any more questions?
37:42
Okay, thank you. Victor and Alec