For this Frontend Code review I did a check for Strich.io. The code can be checked here:
- Don't check-in the "node_modules", and "dist" folder. Add it to the .gitignore file. If people will use this repository, the must run Gulp by default, so it's gonna be overwritten. Instead check-in the package.json.
-
I'm not a big fan of huge Grid libraries like Bootstrap, so Bluegrid is kinda cool, small and the best is the are using Flexbox!
-
I would separate your Sass files into more different folders and files. That gives more structure and smaller files, so you don't have to scroll that much. I created a proposal: https://github.com/raymonschouwenaar/stritch-new-stylesheet-structure
-
There is a normalize.scss and an h5bp.scss. I would recommend choosing 1. Because the are mostly for the same thing, and now the are overwriting each other.
-
In general about your CSS. It is a very clean BEM setup! I guess you took inspiration off CSSWizardry http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ Really good!
- I would recommend you to concat all your JavaScript into 1 file. For example, modernizr can be included in your app.js.
- It is very cool to see, how you use inline SVG for as much as you can!
-
I would recommend you to use a lazyload script for your images. Because now your images of the slider are slowing down the time your website needs to be completely loaded. I'm a big fan of bLazy.js http://dinbror.dk/blog/blazy/
-
If you want to spice up the Performance. Please consider to use a web safe font, or if you want to have a custom font. Go for a locally hosted web font with @fontface. I tested the difference on a client website, and it's a big difference for Performance.
In general, your website is performing quite good! But Google is suggesting some things to optimize further. And WebPageTest.org gives a super nice result!