Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Maxime Laforet
@Macxim
Thanks for the invitation on GitHub.
I see you have some ideas
Didn’t know about October, looks very nice.
Maxime Laforet
@Macxim
I’m testing Gregor with one real project but it’s still very early, I was thinking it would be good to have a real and better showcase project, something more complete than dsf-example-project, this good have more appeal.
Emmanuel Pire
@lipsumar
yup, i think so too
actually i was starting to convert Bootstrap into components
Maxime Laforet
@Macxim
Or other frameworks
Emmanuel Pire
@lipsumar
sure
Maxime Laforet
@Macxim
But yeah =)
Emmanuel Pire
@lipsumar
bootstrap seems the most popular
but in the end i'd like to have at least 3 or 4 of them converted to components
i don't care so much which one is the first
Maxime Laforet
@Macxim
Definitely and maybe unfortunately
Totally :)
Emmanuel Pire
@lipsumar
i think now it's starting to be functional enough to do something like that by actually using the UI
Maxime Laforet
@Macxim
I can help with that. This could help with debugging too, you know real-life situations.
Emmanuel Pire
@lipsumar
exactly
it would help all fronts: spot bugs and missing features, as well as provide the first starting blocks for most projects
i'd say pick a cool framework and see how it goes
don't be afraid to open issues each time something
A. doesn't work
B. could work better
that's what i do when i'm working - slowly - on the first use of Gregor at work:
publish a UI with 1 component (our glorious button) and make it easy for non-dev people to access and update the doc.
Maxime Laforet
@Macxim
Alright, I see.
I have a question about a component.
Let’s say we have a button, default background is red.
When displaying a component do you handle other states such as button-success, button-error, etc.?
And, let’s say, there is another state with a different background-color when the button is located in another block.
Emmanuel Pire
@lipsumar
that's a good question
handling such thing is part of the v1.0
Maxime Laforet
@Macxim
Emmanuel Pire
@lipsumar
i'm almost sure Gregor should not be handling it, it should be either a plugin or left to the user
great examples, it's not only about the component itself but what surrounds it
your second example has a dark bg
it's not that simple because we want to have a very clean template
in this case something like
<button class="ns-btn" type="{{type}}">{{text}}</button>
now you need to be able to produce different kind of buttons
a primary, a secondary, etc
here i believe you have 2 options:
  1. make a new template for a primary button
.2. add a variable to the base template
Emmanuel Pire
@lipsumar
that means either:
<button class="ns-btn ns-btn--primary" type="{{type}}">{{text}}</button>
or
<button class="ns-btn {{className}}" type="{{type}}">{{text}}</button>
it's repetition over complexity
sometimes it's better to duplicate some code in order to keep things readable
sometimes it's not worth duplicating because adding 1 var is really manageable
so that's my take on that, wdyt ?
Emmanuel Pire
@lipsumar

But let's say we go with the simplest option: n°2 (simplest because we don't handle multiple HTML files for 1 component yet).
You still have to show it in the UI at the same time. It has always been the point: to show (and work on) all modifiers_ and/or _states to make testing easier.

For that I think all you need is a document. A document (currently PreviewDocument) is how you put component(s) on a page. Something like this:

{{> Atom/Button text="Default button"}}
{{> Atom/Button text="Primary button" className="ns-btn--primary"}}
That document would only be used by the UI, so you can do stuff like:
<h2>Normal background</h2>
{{> Atom/Button text="Default button"}}
{{> Atom/Button text="Primary button" className="ns-btn--primary"}}

<h2>Dark background</h2>
<div style="background-color:#333">
  {{> Atom/Button text="Default button"}}
  {{> Atom/Button text="Primary button" className="ns-btn--primary"}}
</div>
The only issue is that it's currently unusable because not ready yet. But maybe i can squeeze that in 0.5
but more to the point: does that answer your question ?
Emmanuel Pire
@lipsumar
No, that's too much to change. will not be in 0.5