For the past four years we've been using and creating our own SCSS frameworks at Matise. We've had different versions, but the core idea has remained the same; it has to make the translation from design to development easier.
The frameworks therefore weren't only implemented by our development team but the philosophy was also adopted by our designers. The latest version of our framework is called Matise Gryd. It's composed mostly of functions but also provides Foundation-like column classes.
All our past and present frameworks have been based on a 24 column grid. This grid is implemented in our designs by our designers, which makes it much faster to develop. This grid also makes our elements scalable over many screen sizes.
The evolution
As I said before, we've had multiple versions of this framework, it all started with Matise Grid created by our former senior frontend developer and SCSS magician Sil van Diepen. Sil then created Henris, after Henri Matisse ;), because he wanted to make it bigger and better. This proved too big to maintain after he left Matise, and it also did a lot more than we actually needed so I recycled some of Henris functions and created Matise Gryd.
In this version I really went back to the basics and only added what we actually use. You can read all about it in our documentation
Why we created it
1. It makes developing faster and easier
Because of the SCSS functions and the fact that our designers design on the same grid we work with in development we spend a lot less time for example on setting widths for different screen sizes. Almost all sizes we use are flexible viewport widths (vw) until tablet or mobile screens, even our font sizes.
2. It creates more consistent development
Using a grid as a designer is always a good idea, it helps keep designs more consistent. It also really helps us keep the same look and feel on different sections and pages.
3. It's completely customisable to your needs
If we decided to start working with a 32 columned grid tomorrow we could. When we find a bug we can fix it ourselves and don't have to create an issue or pull request.
If we find that we use a certain piece of code often we can add it easily.
Bonus
We also created two NPM packages to create an automatise (sounds like the Dutch word automatisch which means automatic which is in my top ten puns of all time) Vue/Nuxt or Wordpress project with Matise Gryd installed and ready. This saves us a lot of start up time in projects, and also when we've learned something from a previous project it's really easy to update the package to implement it in all future versions!✨
Please let me know if you have any questions about creating a SCSS framework
Top comments (0)