Website (including online linter) about stylelint

[jeddy3]

Continuing on from #7...

On that same train ride, I also had some time to play with a possible prototype of the website. I've knocked up two example pages:

• A rule page
• The guidelines page

Again, like the logo, it's very simple. The stylised logo seems to contrast well with the formality of the rest of the page. The page is set in PT Sans, Serif and Mono (all open license). Going with one family was the quickest way I could think of for achieving typographic consistency.

The red and green colours come from, erm, the pass/fail linter output. Not a very imaginative reason I know, but I think the limegreen has punch :)

The prototype is rough around the edges, but it does work across different viewport sizes. It is also very zoom-friendly.

I've just dump the CSS at the top of the file at moment (I've tried to keep the CSS code as small/simple as possible while still making the site work across viewport sizes). Likewise, the main content was ripped unchanged from github.

I suggest we just have, especially in these early days, a one-to-one mapping of content between the website and the markdown docs in the repo. I think that's the best maintenance approach in terms of time and effort. The website is then just a stylised (and branded) version of the markdown docs, with the addition of some navigation (multi-page, as @MoOx wanted) to get around.

Do either of you know of a tool that will allow us to convert the markdown into html and then wrap these in layout HTML? @MoOx would metalsmith work here?

Any thoughts on the prototype?

[MoOx]

Really nice start.
I will cook you something from that with metalsmith and react template from docs. Maybe tomorrow or monday morning.
I am not a fan of the single S for avatar but the typo looks good.

[davidtheclark]

Looks nice. Hadn't heard of metalsmith before ---it's interesting, and I'd like to get to know it.

[tunnckoCore]

@davidtheclark haha. it is old. try khaos - built with metalsmith.

About the website... nah, dont like it. That green, and at all..

[MoOx]

@tunnckoCore what's funny about not knowing a "old" project ? (jquery is old, metalsmith, not that old).
khaos is a project scaffolder, using metalsmith directly make more sense for us.

About the website... nah, dont like it. That green, and at all..

If you don't provide real feedback, arguments or fresh ideas, this comment is just useless.

[tunnckoCore]

khaos is a project scaffolder, using metalsmith directly make more sense for us.

I'm not saying to use khaos for this project or whatever, just @davidtheclark to try it also. :)

If you don't provide real feedback, arguments

that's my real feedback. just dont like exactly that green. maybe some landing page would be better, like Babel.

or fresh ideas

I'm not a designer.

[MoOx]

stylelint.io works for you guys ?

[MoOx]

.style is out. What about lint.style ? Not sure it make sense.
stylelint.style is maybe a bit verbose.

[jeddy3]

stylelint.io works for you guys ?

Yeap it does. :)

[davidtheclark]

Sure!

[tunnckoCore]

stylelint.style is maybe a bit verbose.

yea. it would be great one day to have .lint tld lol :D style.lint - would looks pretty cool.

👍 for stylelint.io

[MoOx]

FYI, stylelint.io is alive and point to github ip. We might add a CNAME in the right place now :)

[jeddy3]

FYI, stylelint.io is alive and point to github ip.

Awesome. Thanks for that :)

We might add a CNAME in the right place now

Done :)

[MoOx]

What do you think (to make the website easier to maintain/update) to get the sources under the docs folder and using gh-pages on this repo directly? Like I made for cssnext https://github.com/cssnext/cssnext/tree/master/docs

[davidtheclark]

I'm fine with that.

[jeddy3]

SGTM.

Btw, I've put the temporary website at http://stylelint.io/ for now :)

[MoOx]

Yeah I saw that. It's cool for now.

[MoOx]

FYI, I am currently enhancing a fancy engine to handle a simple website with react and md. Main modification are:

• allow client side react too
• drop metalsmith (webpack + loaders instead).

This allow to have a real react implementation on the client side (not just some html like it was on cssnext website for example). Obviously, there will be a static fallback (seo...) to allow to render on the "server" (in our case, as static html in order to build a "static" website).

The idea is md -> json + react/redux + fetch. Work is almost done too but I will probably won't push anything in the next few days, maybe more in 2/3 weeks to be realistic (that said, I plan to use this engine on 2/3 websites so I will push "asap" (relatively to my free time)).

[jeddy3]

Sounds great!

[davidtheclark]

Ok, seems like a good idea. Looking forward to it.

[MoOx]

I pushed yesterday the early stage of this project https://github.com/MoOx/statinamic
But I will probably make some small changes and document it before pushing a skeleton here. Stay tuned.

[jeddy3]

Looking forward to it!

[jeddy3]

For everyone's reference, this conversation is continued in the stylelint.github.io issue tracker. This issue will remain open, until the website is done, to point people in right direction.

[jeddy3]

Additions to and issues with the website are now tracked in the stylelint.io repo. Closing.