Missguided homepage, boosted performance using lazySizes.
+ //these elements have been redacted
- .imgContainer
- .title-below
These instructions will get you a copy of the homepage up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the homepages on Magento.
You will need Node.js for this step.
# clone the repo
$ git clone
# install NPM dependencies
$ npm install
# start gulp & browsersync
$ npm start
├── css
| ├── slick-theme.css
| └── style.css
├── index.html
├── js
| └── index.js
├── sass
| └── style.scss
├── views
| └── your-html.html
├── base-2.css
├── base.css
├── gulpfile.js
├── index.html
├── layout.xml
├── main.js
├── package.json
└── README.md
base*.css
both stylesheets are lifted from Magento and not maintained by us.style.scss
These are our styles, we have created these and maintain the code but, as they are just base styles, therefore are not updated regularly. They are compliled intocss/style.css
on save. This stylehseet is hosted on the server, therefore, any amends to this would require uploading/replacing
//static.missguided.co.uk/media/upload/HOMEPAGE/lazy/style.css
index.html
is a replica of the magento wrapper, and includes scripts & stylesheets just like the real thing.your-html.html
is where our custom code is added, this is injected intoindex.html
on line 384.main.js
injectsyour-html.html
intoindex.html
on load.
# start gulp & browsersync
$ npm start
Amend any of the SCSS, HTML or JS files and see the browser update with your changes live in browser.
Please see Project structure/files and what they do.
To see amends live in the browser, you will need to comment out the link and un-comment the link to our local, compiled stylesheet. Please be aware any amends would need to be uploaded/replaced on the server.
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" type="text/css" href="//static.missguided.co.uk/media/upload/HOMEPAGE/lazy/stylesheet.css"> -->
├── base-2.css
├── base.css
These styles are lifted from the live homepage, we do not maintain this code, but it is neccesary to create an accurate local homepage. Leave it!
├── css
| └── slick-theme.css
These come from Slick, they are not used in the current project, but come in handy for testing. No need to maintain.
├── css
| └── style.css
├── sass
| └── style.scss
If you do amend this code, we would need to replace the file on the server. Email adam.jacques@missguided.com.
Code good to go? OK, copy all the code within your-html.html and paste into the 'Content' tab of the CMS page on Magento.
See layout.xml for necceasry code to be inserted within Design > Layout Update XML
This project is licensed under the MIT License - see the LICENSE.md file for details