Skip to content

Commit

Permalink
Removed noscript and IE-specific code (#3245)
Browse files Browse the repository at this point in the history 
Removed no-JS requirement from the contribution guidelines

Remove CSS and no-js-only HTML

add JS class to <html>

remove noscript css selectors

Update README
  • Loading branch information
@lhoffbeck
lhoffbeck authored Mar 15, 2024
1 parent f907e3d commit 609435a
Show file tree
Hide file tree
Showing 47 changed files with 193 additions and 1,242 deletions.
10 changes: 0 additions & 10 deletions .github/CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,16 +63,6 @@ We relentlessly and continuously optimize code within the constraint of being We

Themes must be built with purpose. They shouldn’t support each and every feature in Shopify.

### JavaScript not required, fails gracefully

_NoJS is our baseline._

We extract every bit of speed and functionality out of HTTP, semantic HTML, and CSS before writing our first line of JavaScript.

JavaScript can only be used to progressively enhance features. JavaScript cannot be required to find or purchase products. And the little JavaScript that we use must always fail gracefully, such that every browser gets the most “enhanced” experience that it can within the capabilities that it has.

>:information_source: We do so not because we expect buyers to experience our storefronts with JavaScript disabled, but because it keeps us aligned with the other principles: writing fast, server-rendered, Web-native code.
### Server-rendered

_Our main constraint._
Expand Down
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme develo

* **Web-native in its purest form:** Themes run on the [evergreen web](https://www.w3.org/2001/tag/doc/evergreen-web/). We leverage the latest web browsers to their fullest, while maintaining support for the older ones through progressive enhancement—not polyfills.
* **Lean, fast, and reliable:** Functionality and design defaults to “no” until it meets this requirement. Code ships on quality. Themes must be built with purpose. They shouldn’t support each and every feature in Shopify.
* **JavaScript not required, fails gracefully:** We extract every bit of speed and functionality out of HTTP, semantic HTML, and CSS before writing our first line of JavaScript. JavaScript can only be used to progressively enhance features.
* **Server-rendered:** HTML must be rendered by Shopify servers using Liquid. Business logic and platform primitives such as translations and money formatting don’t belong on the client. Async and on-demand rendering of parts of the page is OK, but we do it sparingly as a progressive enhancement.
* **Functional, not pixel-perfect:** The Web doesn’t require each page to be rendered pixel-perfect by each browser engine. Using semantic markup, progressive enhancement, and clever design, we ensure that themes remain functional regardless of the browser.

Expand Down
74 changes: 3 additions & 71 deletions assets/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,26 +73,6 @@

/* base */

.no-js:not(html) {
display: none !important;
}

html.no-js .no-js:not(html) {
display: block !important;
}

.no-js-inline {
display: none !important;
}

html.no-js .no-js-inline {
display: inline-block !important;
}

html.no-js .no-js-hidden {
display: none !important;
}

.page-width {
max-width: var(--page-width);
margin: 0 auto;
Expand Down Expand Up @@ -714,19 +694,12 @@ summary::-webkit-details-marker {
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused,
.no-js *:focus {
.focused {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: 0.3rem;
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Negate the fallback side-effect for browsers that support :focus-visible */
.no-js *:focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
}

/*
Focus ring - inset
*/
Expand All @@ -737,18 +710,12 @@ summary::-webkit-details-marker {
box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset,
.no-js .focus-inset:focus {
.focused.focus-inset {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: -0.2rem;
box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.no-js .focus-inset:focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
}

/*
Focus ring - none
*/
Expand All @@ -765,18 +732,12 @@ summary::-webkit-details-marker {
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused,
.no-js .focus-offset:focus {
.focus-offset.focused {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: 1rem;
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.no-js .focus-offset:focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
}

/* component-title */
.title,
.title-wrapper-with-link {
Expand Down Expand Up @@ -2037,34 +1998,14 @@ product-info .loading__spinner:not(.hidden) ~ *,
list-style-type: none;
}

.no-js details[open] .modal__toggle {
position: absolute;
z-index: 5;
}

.modal__toggle-close {
display: none;
}

.no-js details[open] svg.modal__toggle-close {
display: flex;
z-index: 1;
height: 1.7rem;
width: 1.7rem;
}

.modal__toggle-open {
display: flex;
}

.no-js details[open] .modal__toggle-open {
display: none;
}

.no-js .modal__close-button.link {
display: none;
}

.modal__close-button.link {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -2638,10 +2579,6 @@ menu-drawer + .header__search {
}
}

.no-js .predictive-search {
display: none;
}

details[open] > .search-modal {
opacity: 1;
animation: animateMenuOpen var(--duration-default) ease;
Expand All @@ -2661,11 +2598,6 @@ details[open] .modal-overlay::after {
height: 100vh;
}

.no-js details[open] > .header__icon--search {
top: 1rem;
right: 0.5rem;
}

.search-modal {
opacity: 0;
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
Expand Down
3 changes: 1 addition & 2 deletions assets/component-cart-items.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,8 +337,7 @@ cart-remove-button .icon-remove {
@media screen and (min-width: 750px) {
.cart-items .cart-items__heading--quantity,
.cart-item .cart-item__quantity,
.cart-item__quantity--info quantity-popover > *,
.no-js .cart-item .cart-item__quantity--info {
.cart-item__quantity--info quantity-popover > * {
padding-left: 5rem;
}

Expand Down
2 changes: 1 addition & 1 deletion assets/component-cart.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ cart-items {
width: 100%;
}

.cart__ctas > *:not(noscript:first-child) + * {
.cart__ctas > * + * {
margin-top: 1rem;
}

Expand Down
68 changes: 4 additions & 64 deletions assets/component-facets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,7 @@
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.mobile-facets__sort .select__select.focused,
.no-js .mobile-facets__sort .select__select:focus {
.mobile-facets__sort .select__select.focused {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: 0.3rem;
box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
Expand All @@ -147,19 +146,12 @@
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.facet-filters__sort.focused,
.no-js .facet-filters__sort:focus {
.facet-filters__sort.focused {
outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
outline-offset: 1rem;
box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.no-js .facet-filters__sort:focus:not(:focus-visible),
.no-js .mobile-facets__sort .select__select:focus:not(:focus-visible) {
outline: 0;
box-shadow: none;
}

.facets {
display: block;
grid-column-start: span 2;
Expand Down Expand Up @@ -506,10 +498,6 @@
display: flex;
}

.no-js .facet-checkbox input[type='checkbox'] {
z-index: 0;
}

.facet-checkbox > svg {
background-color: rgb(var(--color-background));
margin-right: 1.2rem;
Expand Down Expand Up @@ -569,10 +557,6 @@ button.facets__button {
padding-bottom: 1.4rem;
}

.facets__button-no-js {
transform: translateY(-0.6rem);
}

.active-facets {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -675,8 +659,7 @@ a.active-facets__button:focus-visible {
outline: transparent solid 1px;
}
}
a.active-facets__button.focused,
.no-js a.active-facets__button:focus {
a.active-facets__button.focused {
outline: none;
box-shadow: none;
}
Expand All @@ -687,8 +670,7 @@ a.active-facets__button:focus-visible .active-facets__button-inner {
outline: none;
}

a.active-facets__button.focused .active-facets__button-inner,
.no-js a.active-facets__button:focus .active-facets__button-inner {
a.active-facets__button.focused .active-facets__button-inner {
box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2), 0 0 0 0.2rem rgb(var(--color-background)),
0 0 0 0.4rem rgb(var(--color-foreground));
outline: none;
Expand Down Expand Up @@ -921,10 +903,6 @@ details.menu-opening .mobile-facets__close svg {
grid-column-start: 2;
}

.no-js .mobile-facets__close-button {
display: none;
}

.mobile-facets__close-button .icon-arrow {
transform: rotate(180deg);
margin-right: 1rem;
Expand All @@ -944,10 +922,6 @@ details.menu-opening .mobile-facets__close svg {
transform: rotate(180deg);
}

.no-js .mobile-facets__details {
border-bottom: 1px solid rgba(var(--color-foreground), 0.04);
}

.mobile-facets__highlight {
position: absolute;
top: 0px;
Expand Down Expand Up @@ -1078,10 +1052,6 @@ input.mobile-facets__checkbox {
width: 50%;
}

.mobile-facets__footer noscript .button {
width: 100%;
}

.mobile-facets__sort {
display: flex;
justify-content: space-between;
Expand All @@ -1095,11 +1065,6 @@ input.mobile-facets__checkbox {
width: auto;
}

.no-js .mobile-facets__sort .select {
position: relative;
right: -1rem;
}

.mobile-facets__sort .select .icon-caret {
right: 0;
}
Expand Down Expand Up @@ -1191,10 +1156,6 @@ input.mobile-facets__checkbox {
display: none;
}

.no-js .facets-vertical .facets-wrapper--no-filters {
display: block;
}

.facets-vertical .product-grid-container {
width: 100%;
}
Expand All @@ -1213,17 +1174,6 @@ input.mobile-facets__checkbox {
margin-bottom: 2rem;
}

.facets-vertical .no-js .facets__button-no-js {
transform: none;
margin-left: 0;
}

.facets-vertical .no-js .facet-filters__field {
justify-content: flex-start;
padding-bottom: 1rem;
padding-top: 2rem;
}

.facets-vertical .facets__price {
padding: 0.5rem 0.5rem 0.5rem 0;
}
Expand All @@ -1236,20 +1186,10 @@ input.mobile-facets__checkbox {
margin-bottom: 1.5rem;
}

.no-js .facets-vertical .facet-filters.sorting {
padding-left: 0;
flex-direction: column;
}

.facets-vertical .facet-checkbox input[type='checkbox'] {
z-index: 0;
}

.no-js .facets-vertical .facets-container {
display: flex;
flex-direction: column;
}

.facets-vertical .active-facets facet-remove:last-of-type {
margin-bottom: 1rem;
}
Expand Down
Loading

0 comments on commit 609435a

Please sign in to comment.