Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Emmanuel Pire
@lipsumar
No, that's too much to change. will not be in 0.5
BUT!
you can already do tests displaying many times the same component
by simply creating a component called Test/Button containing this:
<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>
it's obviously not a "real" component, it's only going to be used in the UI, but it's a decent workaround for the time being.
Maxime Laforet
@Macxim
I see.
Yes, it’s helpful. Thanks!
Emmanuel Pire
@lipsumar
To go further (and to be faster) i think a plugin should be creating the Test/ components
but that must be based on the way you want to work, not what a tools allows you to
a plugin for instance could detect states from your css classes and compose itself the Test/ component
would that make sense to you ?
Maxime Laforet
@Macxim

a plugin for instance could detect states from your css classes and compose itself the Test/ component

That would be awesome!

Emmanuel Pire
@lipsumar
it's not that hard
the easiest to read for a plugin i think would be javadoc
stuff like 
/** 
* i am a javadoc
* @foo bar
*/
Emmanuel Pire
@lipsumar
Lots of bugfixes, get 0.5.4
npm i --save design-system-framework@0.5.4
Emmanuel Pire
@lipsumar
5.5 and fix for dsf-export-static also out
Emmanuel Pire
@lipsumar
i have gregorian.io :sparkles:
Maxime Laforet
@Macxim
You’re on fire :fire: :clap:
Emmanuel Pire
@lipsumar
This https://www.smashingmagazine.com/2016/05/content-first-prototyping/#systems-thinking-beyond-the-web I strongly believe in this (that's a core idea of Gregorian actually)
Maxime Laforet
@Macxim
The second paragraph is very accurate.
Emmanuel Pire
@lipsumar

New feature: variations
you can have multiple html file per component

Atom/Button/Button.hbs
Atom/Button/primary.hbs
Atom/Button/fancyplusplus.hbs

you just need 

    dsf.onLoad(function(){
        dsf.getComponents().forEach(function(component){
            var componentName = component.id.split('/').pop();

            component.getResourcePaths('html', function(err, files){

                if(files.length > 1){
                    files.forEach(function(f){
                        var lastPart = f.split('/').pop();
                        if(lastPart === componentName+'.hbs'){
                            // index.html
                            component.registerVariation('html', 'index', f);
                        }else{
                            // variation
                            var name = lastPart.replace('.hbs', '');
                            component.registerVariation('html', name, f);
                        }
                    });
                    component.cacheHtml(); // won't be needed soon
                }
            });
        });
    });

and use

{{> Atom/Button}}
{{> Atom/Button/primary}}
{{> Atom/Button/fancyplusplus}}

the server can also serve variations
http://localhost:3000/build/Atom/Button/?__variation=primary

Maxime Laforet
@Macxim
Nice feature :) thanks!
Have a look at this —> https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
Emmanuel Pire
@lipsumar
Its in the air!
Maxime Laforet
@Macxim
@lipsumar Definitely http://atomicdocs.io/
Emmanuel Pire
@lipsumar
PHP hah. So 2010
Maxime Laforet
@Macxim
Surprising choice, isn’t it?
Emmanuel Pire
@lipsumar
Gregor beats that by being static
The docs
Also I think it's not a good idea to put together the doc & edition features
That only works for tiny projects with 1 dev and a FTP
And even then, it's asking for troubles to be able to edit the source online
Where did you find that ?
Maxime Laforet
@Macxim
Good question.
Reddit. https://www.reddit.com/r/web_design/comments/4juch8/atomic_docs_is_a_front_end_style_guide_generator/
Emmanuel Pire
@lipsumar
Did you have time to start on that example project ?
Maxime Laforet
@Macxim
Unfortunately I haven’t.
Emmanuel Pire
@lipsumar
As i'm making the website - using the UI of course i noted the following painpoints:
  • no auto reload of main config file
  • need to create so many files/folders
  • doesn't handle css dependencies
  • no mobile version of ui
  • could not plug-in my own ui easily
  • no font support ?
  • no fullscreen component ui
Emmanuel Pire
@lipsumar
for which the features/fix will be:
  • UI plugin: 1-click create component: opens a form with name, and 2 fields: html, css -> creates component for you
  • "css dependencies": no idea yet
  • UI plugin: fullscreen mode
  • "font support": gregor install --font Foobar sounds nice... maybe as a plugin as well
also: when saving CSS of a CSS only component, UI should not reload
Emmanuel Pire
@lipsumar
and the watch is oddly slow
Maxime Laforet
@Macxim
The other day I had the same thought about the font.
But I didn’t really experience it yet.
Emmanuel Pire
@lipsumar
New UI feature: quick create :sparkles:
quick-create.gif
Emmanuel Pire
@lipsumar
I fixed the issue where defining you own UI would not work. Now you can just copy the folder plugins/dsf-ui somewhere in your project and add it as a plugin like so:
{
  "plugins":[
    "./path/to/my-ui"
  ]
}
Maxime Laforet
@Macxim
😮 Wow 😮