Why pwa? Similar to our internal presentation
A PWA needs to be responsive
- Responsive images - srcset, picture element
- meta viewport tag
- media queries
Matt Greenfield mattgreenfield
mattgreenfield
/ country-compare.js
Created
February 10, 2021 11:33
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (()=>{var n={705:n=>{"use strict";n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t=function(n,e){var t,r,o,l=n[1]||"",i=n[3];if(!i)return l;if(e&&"function"==typeof btoa){var _=(t=i,r=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),o="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(r),"/*# ".concat(o," */")),a=i.sources.map((function(n){return"/*# sourceURL=".concat(i.sourceRoot||"").concat(n," */")}));return[l].concat(a).concat([_]).join("\n")}return[l].join("\n")}(e,n);return e[2]?"@media ".concat(e[2]," {").concat(t,"}"):t})).join("")},e.i=function(n,t,r){"string"==typeof n&&(n=[[null,n,""]]);var o={};if(r)for(var l=0;l<this.length;l++){var i=this[l][0];null!=i&&(o[i]=!0)}for(var _=0;_<n.length;_++){var a=[].concat(n[_]);r&&o[a[0]]||(t&&(a[2]?a[2]="".concat(t," and ").concat(a[2]):a[2]=t),e.push(a))}},e}},860:(n,e,t)=>{(e=t(705)(!1)).push([n.id,"/* @tailwind base; */\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgba(255, |
mattgreenfield
/ PWAtraining.md
Last active
November 13, 2017 16:28
Notes from my 2 days of PWA training with Google, to share with my team at gene.co.uk
mattgreenfield
/ bad-css
Last active
September 18, 2017 15:44
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .block-bundle-summary .bundle-info .page-layout-checkout .authentication-wrapper .product-price-main, | |
| .block-reviews-dashboard .page-layout-checkout .authentication-wrapper .darwin-review-summary, | |
| .block-reviews-dashboard .page-layout-checkout .authentication-wrapper .rating-result, | |
| .block-reviews-dashboard .page-layout-checkout .authentication-wrapper .review-description, | |
| .bluefoot-product-list.products-grid .cart.table-wrapper .actions.product-item .page-layout-checkout .authentication-wrapper .action, | |
| .bluefoot-product-list.products-grid .cart.table-wrapper .item.product-item .tablet-actions .page-layout-checkout .authentication-wrapper .action, | |
| .bluefoot-product-list.products-grid .cart.table-wrapper .qty.product-item .page-layout-checkout .authentication-wrapper .control.qty, | |
| .cart-gift-item .gift-item-block .content .page-layout-checkout .authentication-wrapper .actions-toolbar, | |
| .cart-gift-item .page-layout-checkout .authentication-wrapper .gift-message-summary, | |
| .cart.table-wrapper .actions.product-info |
mattgreenfield
/ sass-utility-class.scss
Created
June 20, 2016 09:52
Sass mixin to create a load of utility spacing classes and a function for spacing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Sass mixin to create a load of utility spacing classes (padding and/or margin) and a function for spacing. | |
| // Function to output a spacing pixel value | |
| @function spacing($amount){ | |
| @return $amount * 4px; | |
| } | |
| // Mixin for creating utility spacing classes based on the "spacing()" function | |
| @mixin utility-spacer($property, $amount, $position: null){ |
mattgreenfield
/ SassMeister-input-HTML.html
Last active
April 14, 2016 09:19
— forked from Gmattgreenfield/SassMeister-input-HTML.html
Product Summaries - Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <span class="one"> | |
| <li class="grid__item hproduct h-product product-summary product-summary--has-image product-summary--has-basket"> | |
| <span class="product-summary__sale-banner">SALE</span> | |
| <a class="url u-url product-summary__body link-complex" href="/ourshop/prod_3718473-DW-Broken-Glass.html" rel="product" style="border-color:#d1cab6"> | |
| <div class="product-summary__image image-tile"> |
mattgreenfield
/ index.html
Last active
April 1, 2016 08:39
— forked from anonymous/index.html
Image Gallery Centring - JS Bin// source https://jsbin.com/jevigubacu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .grid__item { | |
| width: 25%; | |
| height: 0; |
mattgreenfield
/ SassMeister-input-HTML.html
Created
November 30, 2015 17:09
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div>Home Is where the heart is</div> |
mattgreenfield
/ SassMeister-input-HTML.html
Created
August 3, 2015 10:51
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <p data-text="gfdgkhdsfgkljenbdek;jbnerbjeargjhaerjnadbknjdfbknjdfkjenrghkjnbkdjfngkjgeljrbnekrjbnalerghidzg;kjlhsdgfmn,.dbf.com">gfdgkhdsfgkljenbdek;jbnerbjeargjhaerjnadbknjdfbknjdfkjenrghkjnbkdjfngkjgeljrbnekrjbnalerghidzg;kjlhsdgfmn,.dbf.com</p> | |
| </div> |
mattgreenfield
/ SassMeister-input-HTML.html
Created
July 31, 2015 16:44
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <p data-text="gfdgkhdsfgkljenbdek;jbnerbjeargjhaerjnadbknjdfbknjdfkjenrghkjnbkdjfngkjgeljrbnekrjbnalerghidzg;kjlhsdgfmn,.dbf.com">gfdgkhdsfgkljenbdek;jbnerbjeargjhaerjnadbknjdfbknjdfkjenrghkjnbkdjfngkjgeljrbnekrjbnalerghidzg;kjlhsdgfmn,.dbf.com</p> | |
| </div> |
mattgreenfield
/ SassMeister-input-HTML.html
Created
June 30, 2015 09:49
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="xsml"> | |
| <h1 class="alpha">This is a heading</h1> | |
| <h2 class="beta">This is a heading</h2> | |
| <h3 class="gamma">This is a heading</h3> | |
| <h4 class="delta">This is a heading</h4> | |
| <h5 class="epsilon">This is a heading</h5> | |
| <h6 class="zeta">This is a heading</h6> | |
| </div> | |
| <div class="sml"> |
NewerOlder