royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Carlos Rovira <>
Subject CSS Layouts - About Gaps
Date Tue, 19 Jun 2018 09:07:35 GMT

I committed some hours ago my work on Jewel Layouts that are based on CSS.
This work is in a point that while is working for most cases it shows some
flaw points that need to be solved and others that need to be discussed to
reach to the best shape.

The motivation:

Get layouts that use the flexbox model in the browsers without not
Javascript layout computation. This means using css class selector rules.
No styles in tags. (Notice: that this layouts are not developed in SWF,
there's some code left from Basic versions, but will need to be developed
at some time later)

How this is done:

We have a layout class selector that set up flex (SASS code to make it most

    display: flex
    position: relative

Vertical layout is

/* Vertical */
    flex-flow: column nowrap
    align-items: flex-start

Horizontal is

/* Horizontal */
    flex-flow: row nowrap
    align-items: flex-start

How can we get things like gaps working? In Flex we had a "gap" property
and we can put any number we want

For what I see in all css layout frameworks out there, the framework
defines a gap, and then all css layouts work with that. This can be a bit
limiting, but in the other way it can get your layouts to something more
consistent. If people can use only a particular gap, all layouts will have
the same space between elements.

In the other hand, I think other CSS frameworks do this in order to avoid
CSS long file sizes, since this method requires to "bake" all options you

In Jewel I tried to have best of both worlds:

- Have some pre bake styles for gap
- Have some configuration options: Instead of let the user choose *all*
possible numbers from 1 to ... what he wants. I set up for HorizontalLayout
and VerticalLayout 10 styles that steps 3px one from the next one.

So we the possible gaps are (a part from 0px): 3px 6px 9px 12px 15px 18px
21px 24px 27px 30px

In Jewel we have for VerticalLayout (for example):

@for $i from 1 through $gaps
            > *:first-child
                margin: 0px
            > *
                margin: ($gap + $i * $gap-step) 0px 0px

This generates this two rules : > *:first-child {
margin: 0px;
} > * {
margin: 0px 0px 0px 3px;

Notice that in AS3 code and in JewelTheme, there's two variables that
handle this, so a user can change this to its needs in its build.

But I want to discuss here what do you think about this way. I must say
that what I'm presenting is not in its final shape so we can discuss here
how to improve it.

For example:

* We can generate this kind of rules in AS3, instead of baking it in the
Jewel main css (this is not part of a theme).
* If we generate a rule to use, we don't need "gap steps" and can left the
user set the number he wants (but this will make the user not to be forced
to use a "consistent" gap with the rest of the layouts in his application,
and people can set 4px, then 6px, then 7px, then 5px, and so on...

A word of caution here, I think what I'm exposing here is something
subjective and don't think there's a good or wrong way to do this, but I
think more visions of what you expect from layout when using this will be
very useful to get the final shape of this classes.

Layouts are key piece and must be enough flexible, easy to write, and easy
to plug in other components. So this is one of the most important pieces.

Finaly, there's so much related things that we need to discuss, but I'll
put those in other email threads since the topic is huge, I'll say that one
thing is about the new Grid and grid layouts that let us make responsive
"mobile-first" applications. I have this working, but we can see if is the
best way to write. More on this soon. The other important thing is that I
find problem with states that seems not to store class names and includeIn
can mess things...more on this soon too :)

I think enough for now :)


Carlos Rovira

  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message