Hexo/Jekyll theme using hack.css

[egoist]

It would be cool if I can use this as my blog theme

• [ ] Hexo port
• [x] Jekyll port : thank to the work by @sobolevn
• [x] Hugo port : thank to the work by @jhabdas

[ghost]

Working on Hexo theme: https://github.com/dyzajash/hexo-theme-hackcss

[egoist]

@dyzajash Awesome, can't wait to use it.

[sobolevn]

I totally love this project! Started to work on Jekyll theme: https://github.com/wemake-services/jekyll-theme-hackcss

[sobolevn]

@egoist I am almost done, but I am experiencing a strange issue on iOS (with flexbox I guess), I would really appreciate any help: https://github.com/wemake-services/jekyll-theme-hackcss/issues/1

[egoist]

@sobolevn it should be fixed by this commit https://github.com/egoist/hack/commit/90d8407f466b4f3593955a834f33713f0726c3f8

[sobolevn]

@egoist I guess I'm done: https://github.com/wemake-services/jekyll-theme-hackcss

I would really appreciate your feedback.

[egoist]

@sobolevn

• for blog maybe single column is enough
• maybe you can set markdown as the default theme mode

I also think hack.css needs something like bootstrap navigation

[sobolevn]

Yeap, markdown mode is better to be the default one.

Despite the fact I like 2-columns layout, I would really like to see something like this (rather than bootstrap navigation) as a core functionality.

[namiwang]

A rough port for Jekyll: https://github.com/nanowang/jekyll-theme-with-hack-css

[ghost]

I'm just about finished creating a fresh Hugo theme using Hack I'm calling After Dark, replete with flying toasters. Just a little more polish and I'll be submitting it to the Hugo theme gallery. Feel free to grab it early but beware I'm force pushing to master until I hit 1.0.0.

[egoist]

@jhabdas it's exactly how I would use hack.css, nice done!

[ghost]

@egoist thinking of writing a small script to swap themes and allow theme updates from NPM. Any ideas of a minimal approach? I was thinking of using sed but from what I was reading on SO sed is pretty unforgiving in terms of clobbering files.

[egoist]

Maybe I missed something, why inline the css? https://github.com/comfusion/after-dark/blob/master/layouts/partials/critical-vendor.css.html

[ghost]

Great question! I touch on inlining a little on my post explaining how to hit PageSpeed 100 with Jekyll and S3. Michael Rose also has some related reading, with additional links as to the why.

That said the best approach really depends on the number of repeat visitors to a site, the amount of CSS, the number of pages visited per user, caching rules and user agent(s) targeted. For good UX and page speed rankings, and to avoid a flash of unstyled content (FOUC) when pages load - especially perceptible between page turns with a dark theme - inlining critical CSS ensures base styles are ready to display immediately upon page load.

[ghost]

Submitted After Dark to the Hugo gallery just a short while ago. README added at above link, with feature list to drool on. Initial benchmarks have the site building in milliseconds (whereas Jekyll is hundreds of times slower). PageSpeed reports 100 from Ngrok for desktop and mobile. And the entire page (including favicon) is served up in a single http request, for a 100-200ms page load.

[egoist]

Thanks to the work by @sobolevn & @jhabdas , already added to README 😊

[ghost]

Oh wonderful! Thank you!! This surpurb library makes vaporwave look out of style. 😎

[egoist]

@jhabdas glad to hear that 😄

[t94xr]

https://github.com/t94xr/phileThemeHackCSS

I did one for PhileCMS. About to do one for Statamic.