matejlatin/Gutenberg

Code improvement / clean up

donysukardi opened this issue · 8 comments

donysukardi commented

Awesome work!

I'm trying to incorporate Gutenberg into my own framework, heavily influenced by Inuit CSS by the great Harry Roberts. Took me a while to figure out what is what.

Here are some suggestions on how we could improve Gutenberg,

  • Remove superfluous interpolations
    There are so many redundant interpolations, i.e. #{ $interpolate-me } that make the code barely legible.
  • Modularize the framework, i.e. create partials for headings, figures, etc
  • Nest media-query / responsive code inside the components themselves
    Tests showed that the performance impact gained grouping media-queries together seems to be very minimal. Doing otherwise will greatly improve the readability and extensibility of the code. Furthermore, there are PostCSS plugins that could perform the clean up / sorting / grouping upon compilation.
  • Use of new lines more sparsely, notably with background-image where the values can run very long

And perhaps we could incorporate some PostCSS plugins,

  • postcss-vertical-rhythm
    It allows us to use 'vr' unit to represent the leading magnitude, e.g. instead of @include margin-top(1), we can now say margin-top: 1vr
  • postcss-short
    Another awesome plugin that allows us to simplify our source code. Instead of typing
    margin-top: $leading; margin-left: $leading;, we could use shorthand that we are already familiar with, margin: $leading * * $leading, where an asterisk indicates that an edge is skipped.
matejlatin commented

@donysukardi thanks for the suggestions. I'm not a front-end developer, this project was also a way for me to learn Sass a bit better. Could you explain better / give me examples for your 4 suggestions please?

marcobiedermann commented

@matejlatin If you like to, I could help you. I really like this project and would love to help you out :)

matejlatin commented

@marcobiedermann that'd be awesome :)

marcobiedermann commented

In progress…

marcobiedermann commented
  • Modularize the framework, i.e. create partials for headings, figures, etc
  • Nest media-query / responsive code inside the components themselves
  • 🎉2
marcobiedermann commented

@matejlatin Hey Matej, sorry for the delay but my computer got broken and I had to study for my final.
Unfortunately all my changes are gone.
I am going to redo my improvements and send each change in it's own pull request :)

  • 👍1
matejlatin commented

@marcobiedermann hey, no worries. Been pretty busy as well. Working on something else and I'll get back to Gutenberg in a few weeks.

Deleted user commented

I can help with this. I like this project so I'm considering to integrate it with Concise, and in the meantime improving it would be a good investment I think :)

By the way, I created a better replacement for postcss-vertical-rhythm mentioned by @donysukardi here https://github.com/KolceThompsonCo/postcss-lh.