Infrastructure

• Move out vertical, horizontal, grid style generators to styles

Architecture

• Defaults via react context
• Consolidate defaults into a single consumer / provider
• Export a single provider, internal useThemeCarefully
• @design {icon} - svg 24x24 icons for components

GLS Props

• border radius
• styles
• flex
• tagProps

Components

• Position relative style components
• Responsive
• Responsive Props Cascade
• IDEA : Create a core flex box component.

Docs / Demos

• Replicate TypeStyle Flex Docs
• Document defaults overriding
• GLS Props
• Each component
• Alignment for horizontal and vertical
• Common UIs as Examples (https://typestyle.github.io/#/flex)
• Flex ratio

Release

• 0.1.0

Future

• styles for animations

Just as the title.

const fragment = <>
  <Vertical width={300} scroll="both">{[...Array(20)].map((_, i) => <p key={i}>{short_text}</p>)}</Vertical>
  <Vertical sizing="flex" scroll="both">{[...Array(100)].map((_, i) => <p key={i}>{long_text}</p>)}</Vertical>
  <Vertical width={200} scroll="both">{[...Array(20)].map((_, i) => <p key={i}>{short_text}</p>)}</Vertical>
</>

// [email protected]
const gls_011 = <div id="root">
  <Horizontal height="100%">
    {fragment}
  </Horizontal>
</div>

// [email protected]
const gls_110 = <div id="root">
  <Horizontal width="100%">
    {fragment}
  </Horizontal>
</div>

const fragment = <>
  <label>
    用户名: <input type="text" name="username" />
  </label>
  <label>
    密 码: <input type="password" name="password" />
  </label>
  <button type="submit">登录</button>
</>

// [email protected]
const gls_011 = <div id="root">
  <Vertical height="100%" verticalAlign="center" horizontalAlign="center">
    {fragment}
  </Vertical>
</div>

// [email protected]
const gls_110 = <div id="root">
  <Vertical width="100%" verticalAlign="center" horizontalAlign="center">
    {fragment}
  </Vertical>
</div>

In both two examples, gls_011 behaves like gls_110, and it seems that code of gls_110 is not simpler than gls_011.

So, why should we have a flex root?

IMO Horizontal should flexWrap: "wrap" by default or at the very least it should have a prop to set this.

Thoughts?

Hi Basrat,

This is a fantastic lib and I use it for all my projects. I am just working on redoing my blog using NextJS and ofcourse im using GLS.

Im having an issue however that seems to be causing a reflow. I think its caused by styles being embedded in the JS which is loaded late.

I noticed your Gist here 14 months ago, I tried to implement it but im still getting the reflow issue.

You can see what I mean by going to the build URL: https://next-mikecann.vercel.app/

You will see the page is rendered okay but you get a flicker once the JS loads, this is evident if you open the inspector:

Im not sure whats causing this, do you know?

Incase you are interested the src is here: https://github.com/mikecann/next-mikecann

Cheers

Just as the title.

With baseFix (trim bottom) and heightFix (trim top). Rough version:

transform: `translateY(${baseFix})`

&:before: {
  content: "''",
  display: 'block',
  height: 0, 
  marginTop: -heightFix,
}

Needs to be tested for reliability (text wrapping, different font faces, units of text, wrapping). I've seen it go wrong (see screenshot), but a useful idea to share nonetheless.

There are also plans to add native support to CSS for this that will work more reliably (hopefully)

https://codesandbox.io/s/reverent-cdn-te2xm?fontsize=14

well, I know, it's not gls's bug. But can gls make scroll more compatible with flex container?

e.g. Content should wrap its children in a span, ensuring that flexbox sees only a single child and flex-direction doesn't impact how the children are layed out.