├── .gitignore ├── BUILDING.md ├── CNAME ├── LICENSE ├── README.md ├── coffee └── index.coffee ├── comparisons ├── components │ ├── image_slider │ │ ├── a11y.txt │ │ ├── caniuse.txt │ │ ├── codepen.html │ │ ├── demo.html │ │ ├── html.html │ │ ├── resources.txt │ │ └── scss.scss │ ├── modal │ │ ├── a11y.txt │ │ ├── codepen.html │ │ ├── demo.html │ │ ├── html.html │ │ ├── resources.txt │ │ └── scss.scss │ └── view_switcher │ │ ├── a11y.txt │ │ ├── caniuse.txt │ │ ├── codepen.html │ │ ├── demo.html │ │ ├── html.html │ │ ├── resources.txt │ │ └── scss.scss ├── forms │ ├── color_picker │ │ ├── a11y.txt │ │ ├── caniuse.txt │ │ ├── codepen.html │ │ ├── demo.html │ │ └── html.html │ ├── file_upload │ │ ├── a11y.txt │ │ ├── codepen.html │ │ ├── demo.html │ │ └── html.html │ ├── form_validation │ │ ├── a11y.txt │ │ ├── caniuse.txt │ │ ├── codepen.html │ │ ├── demo.html │ │ ├── html.html │ │ └── resources.txt │ └── resources.txt ├── interactions │ └── scroll_indicator │ │ ├── a11y.txt │ │ ├── caniuse.txt │ │ ├── codepen.html │ │ ├── demo.html │ │ ├── html.html │ │ ├── resources.txt │ │ └── scss.scss └── navigation │ ├── accordion │ ├── a11y.txt │ ├── caniuse.txt │ ├── codepen.html │ ├── demo.html │ ├── html.html │ ├── resources.txt │ └── scss.scss │ ├── lightbox │ ├── a11y.txt │ ├── codepen.html │ ├── demo.html │ ├── html.html │ ├── resources.txt │ └── scss.scss │ └── tabs │ ├── a11y.txt │ ├── codepen.html │ ├── demo.html │ ├── html.html │ ├── resources.txt │ └── scss.scss ├── css ├── index.css └── prism.css ├── gulpfile.coffee ├── gulpfile.js ├── index.html ├── jade ├── _caniuse.jade ├── _resources.jade └── index.jade ├── js ├── index.js └── prism.js ├── package.json ├── readTree.coffee ├── shareimg.jpg └── styl └── index.styl /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /BUILDING.md: -------------------------------------------------------------------------------- 1 | Building YMNNJQ requires Node.js 2 | 3 | - Run: `npm install -g gulp` 4 | - In the project directory, run `npm install` 5 | - To build/watch, run `gulp` 6 | 7 | Please make all changes in the jade, coffee, styl, and comparisons folders, the rest are built files. 8 | 9 | To add a new section, just create a folder for it, and add `jquery.js`, and `ie8.js`, `ie9.js` and `ie10.js` as needed. For example, if you have `ie8.js` and `ie9.js`, the ie9 version will be shown to people looking for a solution that works in ie9 or 10. 10 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | youmightnotneedjs.com 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 HubSpot, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # You Might Not Need JavaScript 2 | 3 | A fork of [YouMightNotNeedjQuery.com](http://youmightnotneedjquery.com). You might not need scripts at all. 4 | 5 | ### [YouMightNotNeedJs.com](http://youmightnotneedjs.com) 6 | 7 | To contribute, please open an issue and/or submit a Pull Request referencing the issue. 8 | 9 | File Structure: 10 | 11 | - `index.jade` = Jade code layout 12 | - `index.styl` = Stylus styling 13 | - `comparisons/` = folder containing comparison items and topics 14 | - Individual subtopics are inside of comparisons. Each has: 15 | - `html.html` = markup 16 | - `scss.scss` or `css.css` = css 17 | - `resources.txt` = resource list -------------------------------------------------------------------------------- /coffee/index.coffee: -------------------------------------------------------------------------------- 1 | showFirst = (els...) -> 2 | found = false 3 | 4 | for el in els 5 | if el and not found 6 | found = true 7 | el.style.display = 'block' 8 | else if el 9 | el.style.display = 'none' 10 | 11 | hide = (els...) -> 12 | for el in els when el 13 | el.style.display = 'none' 14 | 15 | filter = (term) -> 16 | visibleIndex = 0 17 | 18 | allEmpty = true 19 | 20 | for section in document.querySelectorAll('section') 21 | empty = true 22 | 23 | for comp in section.querySelectorAll('.comparison') 24 | if not term or comp.textContent.toLowerCase().indexOf(term.toLowerCase()) isnt -1 25 | empty = false 26 | comp.classList.remove 'hidden' 27 | else 28 | comp.classList.add 'hidden' 29 | 30 | if empty 31 | section.classList.add 'hidden' 32 | else 33 | allEmpty = false 34 | 35 | section.classList.remove 'hidden' 36 | 37 | if ++visibleIndex % 2 38 | section.classList.add 'odd' 39 | else 40 | section.classList.remove 'odd' 41 | 42 | comparisons = document.querySelector('.comparisons') 43 | if allEmpty 44 | comparisons.classList.add 'empty' 45 | else 46 | comparisons.classList.remove 'empty' 47 | 48 | document.addEventListener 'DOMContentLoaded', -> 49 | search = document.querySelector('input[type="search"]') 50 | 51 | search.addEventListener 'input', -> 52 | filter search.value -------------------------------------------------------------------------------- /comparisons/components/image_slider/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Presentational, Option to read or be skipped by screen reader, no user control over images. -------------------------------------------------------------------------------- /comparisons/components/image_slider/caniuse.txt: -------------------------------------------------------------------------------- 1 | CSS Animation: http://caniuse.com/#feat=css-animation 2 | Will Change: http://caniuse.com/#feat=will-change 3 | Transform: http://caniuse.com/#feat=transforms2d -------------------------------------------------------------------------------- /comparisons/components/image_slider/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen CSS-Only Slider: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/components/image_slider/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 86 | 87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | 96 | -------------------------------------------------------------------------------- /comparisons/components/image_slider/html.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
content1
4 |
content2
5 |
content3
6 |
7 |
8 | -------------------------------------------------------------------------------- /comparisons/components/image_slider/resources.txt: -------------------------------------------------------------------------------- 1 | CSS Slider Builder: http://cssslider.com/ 2 | 12 CSS Slider Examples: http://xdesigns.net/2013/08/css-slider/ 3 | CSS Gallery: http://benschwarz.github.io/gallery-css/ -------------------------------------------------------------------------------- /comparisons/components/image_slider/scss.scss: -------------------------------------------------------------------------------- 1 | #slider { 2 | width: $slide-width; 3 | height: $slide-height; 4 | overflow: hidden; 5 | } 6 | 7 | .slide { 8 | width: $slide-width; 9 | height: $slide-height; 10 | float: left; 11 | position: relative; 12 | } 13 | 14 | #slide-holder { 15 | // wide enough to fit all the slides 16 | width: 400%; 17 | position: relative; 18 | left: 0; 19 | will-change: transform; 20 | animation: scroller 10s infinite; 21 | } 22 | 23 | // need a step for each slide 24 | @keyframes scroller { 25 | 0% { transform: translateX(0); } 26 | 33% { transform: translateX(-$slide-width); } 27 | 66% { transform: translateX(-$slide-width*2); } 28 | 100% { transform: translateX(0); } 29 | } 30 | -------------------------------------------------------------------------------- /comparisons/components/modal/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Safe for production with caveat (see scss) — Shoutout to Marcy Sutton -------------------------------------------------------------------------------- /comparisons/components/modal/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen CSS-Only Modal: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

2 | -------------------------------------------------------------------------------- /comparisons/components/modal/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 94 | 95 | 96 | 97 |
98 | × 99 |

Hello Beautiful!

100 |
101 | 102 | -------------------------------------------------------------------------------- /comparisons/components/modal/html.html: -------------------------------------------------------------------------------- 1 | 3 | Open dialog 4 | 5 | 6 | 8 |
9 | 10 | × 11 | 12 |

Hello Beautiful!

13 |
14 | 15 | -------------------------------------------------------------------------------- /comparisons/components/modal/resources.txt: -------------------------------------------------------------------------------- 1 | Austin Lord's CodePen: http://codepen.io/ohnoitsaustin/pen/zGmJjz 2 | Simple Example by Daniel Griffith: http://codepen.io/danielgriffiths/pen/AXGOym -------------------------------------------------------------------------------- /comparisons/components/modal/scss.scss: -------------------------------------------------------------------------------- 1 | // Modal hidden until it matches an anchor target 2 | // Note: you can't close it with the escape key 3 | // or trap focus inside of it. 4 | .modal { 5 | opacity: 0; 6 | visibility: hidden; 7 | } 8 | 9 | // modal fades in when it matches 10 | // an anchor link (i.e. clicked on) 11 | #modalDialog:target { 12 | opacity: 1; 13 | visibility: hidden; 14 | } -------------------------------------------------------------------------------- /comparisons/components/view_switcher/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Presentational: keyboard navigable, not screen reader accessible. -------------------------------------------------------------------------------- /comparisons/components/view_switcher/caniuse.txt: -------------------------------------------------------------------------------- 1 | Transition: http://caniuse.com/#feat=css-transitions -------------------------------------------------------------------------------- /comparisons/components/view_switcher/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen CSS-Only Image Switcher: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/components/view_switcher/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 81 | 82 | 83 |
84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 97 |
98 | 99 | -------------------------------------------------------------------------------- /comparisons/components/view_switcher/html.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | img description 5 | img description 6 | img description 7 | img description 8 | 9 | 10 | 16 |
17 | -------------------------------------------------------------------------------- /comparisons/components/view_switcher/resources.txt: -------------------------------------------------------------------------------- 1 | CSS Image Switcher Tutorial: http://css3.bradshawenterprises.com/cfimg/ 2 | Tiffany Tse CSS Slider: http://codepen.io/tiffanytse/pen/BnDlb -------------------------------------------------------------------------------- /comparisons/components/view_switcher/scss.scss: -------------------------------------------------------------------------------- 1 | #slider { 2 | img { 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | width: 300px; 7 | height: 200px; 8 | 9 | &:target { 10 | transition: all .5s ease-in-out; 11 | } 12 | 13 | &:not(:target), 14 | &:target ~ img#slide-4 { 15 | position: relative; 16 | opacity: 0; 17 | } 18 | 19 | // set initially visible 20 | &#slide-4 { 21 | position: absolute; 22 | opacity: 1; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /comparisons/forms/color_picker/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Safe for production. -------------------------------------------------------------------------------- /comparisons/forms/color_picker/caniuse.txt: -------------------------------------------------------------------------------- 1 | Color Input Type: http://caniuse.com/#feat=input-color -------------------------------------------------------------------------------- /comparisons/forms/color_picker/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

2 | -------------------------------------------------------------------------------- /comparisons/forms/color_picker/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 29 | 30 | 31 |
32 | 33 | 34 |
35 | 36 | -------------------------------------------------------------------------------- /comparisons/forms/color_picker/html.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /comparisons/forms/file_upload/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Safe for production. -------------------------------------------------------------------------------- /comparisons/forms/file_upload/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/forms/file_upload/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 29 | 30 | 31 |
32 | 33 | 34 |
35 | 36 | -------------------------------------------------------------------------------- /comparisons/forms/file_upload/html.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /comparisons/forms/form_validation/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Safe for production. -------------------------------------------------------------------------------- /comparisons/forms/form_validation/caniuse.txt: -------------------------------------------------------------------------------- 1 | Pattern Attribute: http://caniuse.com/#feat=input-pattern -------------------------------------------------------------------------------- /comparisons/forms/form_validation/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen HTML Form Validation: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/forms/form_validation/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 29 | 30 | 31 |
32 | 33 |
34 | 35 | 36 |
37 | 38 | 39 |
40 | 41 | 42 |
43 | 44 | 45 |
46 | 47 | 48 |
49 | 50 | 51 |
52 |
53 | 54 |
55 | 56 | 57 |
58 | 59 | -------------------------------------------------------------------------------- /comparisons/forms/form_validation/html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 |
-------------------------------------------------------------------------------- /comparisons/forms/form_validation/resources.txt: -------------------------------------------------------------------------------- 1 | MDN Data Form Validation: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation 2 | Phone Number Validation by SitePoint: https://codepen.io/SitePoint/pen/Eambf -------------------------------------------------------------------------------- /comparisons/forms/resources.txt: -------------------------------------------------------------------------------- 1 | HTML Form Guide: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms -------------------------------------------------------------------------------- /comparisons/interactions/scroll_indicator/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Presentational, no screen reader support. Not recommended for production (mobile) -------------------------------------------------------------------------------- /comparisons/interactions/scroll_indicator/caniuse.txt: -------------------------------------------------------------------------------- 1 | Linear Gradient: http://caniuse.com/#feat=css-gradients 2 | Viewport Units: http://caniuse.com/#feat=viewport-units -------------------------------------------------------------------------------- /comparisons/interactions/scroll_indicator/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen CSS Only Scroll Indicator: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/interactions/scroll_indicator/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 52 | 53 | 54 |
55 |
56 |

Content Must Be Longer Than The Viewport Height or This Makes No Sense.

57 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum a natus, praesentium nesciunt recusandae excepturi qui debitis optio enim eligendi iusto quos animi. Soluta neque ad eos itaque debitis.
58 |
Quidem minus deserunt reiciendis temporibus quisquam! Eaque illum eligendi, perspiciatis ea animi pariatur dolores necessitatibus aliquam quos esse autem rerum possimus culpa neque sit sapiente accusantium odio! Dicta, facilis, earum.
59 |
Sequi, doloribus tempora sit odit dolorum, aliquam inventore. Qui libero ea iure velit iste impedit, corrupti est. Recusandae, est inventore explicabo quis accusamus ipsam repellendus nostrum soluta ad. Enim, voluptatem.
60 |
Eum beatae placeat voluptate. Iste pariatur aspernatur expedita voluptates, eius exercitationem nisi ratione sapiente sunt sint quo nihil sit repellendus veniam provident ea debitis atque similique iure vitae fugiat. Pariatur!
61 |
Dolores sunt voluptatibus qui maxime distinctio, repellendus iure animi assumenda, perferendis minima amet doloribus odit recusandae, magnam doloremque dolorum quae quas expedita ab laborum rerum mollitia. Commodi voluptatum, deleniti fugiat.
62 |
Minima voluptate ut facere officiis, perferendis rem beatae et tempore aperiam debitis, vel sequi asperiores placeat repellendus fuga? Dolorem, maxime eveniet, inventore excepturi fugit molestias sed minus natus placeat numquam?
63 |
Quam dignissimos saepe vero omnis quidem, voluptatum nisi consequatur fugiat, veniam quo, ea. Fuga ut ducimus, libero doloremque corporis labore voluptas nulla modi qui voluptate, alias fugit dignissimos quibusdam odit!
64 |
Nisi totam nesciunt error magnam fugit enim possimus earum commodi! Nesciunt provident deserunt totam officiis cumque consequatur ex dolorem! Accusantium mollitia laboriosam beatae perferendis ab quibusdam dolor veniam nobis amet.
65 |
Voluptatem voluptates officiis fuga, dolore eveniet ab praesentium doloremque numquam cum magni sapiente quaerat ea voluptatum quae explicabo similique cumque veniam id blanditiis velit itaque quidem temporibus. Illo, consequatur, doloremque.
66 |
Nam, omnis. Sit, dolore quia, sunt consequatur commodi alias quo repudiandae ab, rem accusantium, in molestiae. Voluptate possimus quas fugiat totam esse dignissimos! Odit quasi accusamus, iure laudantium id corporis?
67 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum a natus, praesentium nesciunt recusandae excepturi qui debitis optio enim eligendi iusto quos animi. Soluta neque ad eos itaque debitis.
68 |
Quidem minus deserunt reiciendis temporibus quisquam! Eaque illum eligendi, perspiciatis ea animi pariatur dolores necessitatibus aliquam quos esse autem rerum possimus culpa neque sit sapiente accusantium odio! Dicta, facilis, earum.
69 |
Sequi, doloribus tempora sit odit dolorum, aliquam inventore. Qui libero ea iure velit iste impedit, corrupti est. Recusandae, est inventore explicabo quis accusamus ipsam repellendus nostrum soluta ad. Enim, voluptatem.
70 |
Eum beatae placeat voluptate. Iste pariatur aspernatur expedita voluptates, eius exercitationem nisi ratione sapiente sunt sint quo nihil sit repellendus veniam provident ea debitis atque similique iure vitae fugiat. Pariatur!
71 |
Dolores sunt voluptatibus qui maxime distinctio, repellendus iure animi assumenda, perferendis minima amet doloribus odit recusandae, magnam doloremque dolorum quae quas expedita ab laborum rerum mollitia. Commodi voluptatum, deleniti fugiat.
72 |
Minima voluptate ut facere officiis, perferendis rem beatae et tempore aperiam debitis, vel sequi asperiores placeat repellendus fuga? Dolorem, maxime eveniet, inventore excepturi fugit molestias sed minus natus placeat numquam?
73 |
Quam dignissimos saepe vero omnis quidem, voluptatum nisi consequatur fugiat, veniam quo, ea. Fuga ut ducimus, libero doloremque corporis labore voluptas nulla modi qui voluptate, alias fugit dignissimos quibusdam odit!
74 |
Nisi totam nesciunt error magnam fugit enim possimus earum commodi! Nesciunt provident deserunt totam officiis cumque consequatur ex dolorem! Accusantium mollitia laboriosam beatae perferendis ab quibusdam dolor veniam nobis amet.
75 |
Voluptatem voluptates officiis fuga, dolore eveniet ab praesentium doloremque numquam cum magni sapiente quaerat ea voluptatum quae explicabo similique cumque veniam id blanditiis velit itaque quidem temporibus. Illo, consequatur, doloremque.
76 |
Nam, omnis. Sit, dolore quia, sunt consequatur commodi alias quo repudiandae ab, rem accusantium, in molestiae. Voluptate possimus quas fugiat totam esse dignissimos! Odit quasi accusamus, iure laudantium id corporis?
77 |
78 | 79 | -------------------------------------------------------------------------------- /comparisons/interactions/scroll_indicator/html.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | content must be longer than 100vh 4 |
-------------------------------------------------------------------------------- /comparisons/interactions/scroll_indicator/resources.txt: -------------------------------------------------------------------------------- 1 | Example by Mike Riethmuller: http://codepen.io/MadeByMike/pen/ZOrEmr -------------------------------------------------------------------------------- /comparisons/interactions/scroll_indicator/scss.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: linear-gradient(to right top, 3 | $scroller-color 50%, 4 | $scroller-background 50%); 5 | background-size: 100% calc(100% - 100vh + #{$scroller-height}); 6 | background-repeat: no-repeat; 7 | } 8 | 9 | body:before { 10 | content:''; 11 | position: fixed; 12 | top: $scroller-height; 13 | bottom: 0; 14 | width: 100%; 15 | z-index: -1; 16 | background: $body-background; 17 | } 18 | -------------------------------------------------------------------------------- /comparisons/navigation/accordion/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Not keyboard navigable, inability to focus. -------------------------------------------------------------------------------- /comparisons/navigation/accordion/caniuse.txt: -------------------------------------------------------------------------------- 1 | Transition: http://caniuse.com/#feat=css-transitions -------------------------------------------------------------------------------- /comparisons/navigation/accordion/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen CSS Only Accordion: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/navigation/accordion/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 54 | 55 | 56 |
57 | 58 | 59 |
60 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ea veritatis cumque unde dolore quasi hic praesentium, in consequatur, incidunt alias iure illum facilis qui odit excepturi tenetur, error eligendi.Accusamus quasi eveniet dolorem, nihil cupiditate, facilis id quas consectetur mollitia quod minima excepturi maiores. A, molestias suscipit sunt provident libero magnam quas dolores aspernatur totam tenetur vel quis. Officia?

61 |
62 | 63 | 64 | 65 |
66 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tempora quia fugit eveniet nostrum amet quod aliquid repellendus sint. Adipisci voluptas ratione doloremque delectus vel nemo cumque autem beatae minus.

67 |
68 | 69 | 70 | 71 |
72 | 73 |
74 |
75 | 76 | -------------------------------------------------------------------------------- /comparisons/navigation/accordion/html.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 |

Content for the first accordion

6 |
7 | 8 | 9 | 10 |
11 |

Content for the second accordion

12 |
13 | 14 | 15 | 16 |
17 |

Content for the third accordion

18 |
19 |
-------------------------------------------------------------------------------- /comparisons/navigation/accordion/resources.txt: -------------------------------------------------------------------------------- 1 | 4 Ways to Create CSS Accordions: http://www.hongkiat.com/blog/css-only-accordion/ 2 | CodePen Example by Oliver Knoblich: http://codepen.io/oknoblich/pen/tKfab -------------------------------------------------------------------------------- /comparisons/navigation/accordion/scss.scss: -------------------------------------------------------------------------------- 1 | // Visually hide radio buttons 2 | input[type="radio"] { 3 | position: absolute; 4 | opacity: 0; 5 | 6 | &:focus + label { 7 | color: black; 8 | background-color: wheat; 9 | } 10 | } 11 | 12 | // Style label/entry for accordion 13 | label { 14 | position: relative; 15 | display: block; 16 | cursor: pointer; 17 | } 18 | 19 | // Style accordion content 20 | section { 21 | height: 0; 22 | transition: .3s all; 23 | overflow: hidden; 24 | } 25 | 26 | // Open content when clicking label 27 | #toggle1:checked ~ #content1, 28 | #toggle2:checked ~ #content2, 29 | #toggle3:checked ~ #content3, 30 | #toggle4:checked ~ #content4 { 31 | // set height for transition duration to work 32 | // (also can set to auto without transition) 33 | height: 200px; 34 | } -------------------------------------------------------------------------------- /comparisons/navigation/lightbox/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Not keyboard navigable. -------------------------------------------------------------------------------- /comparisons/navigation/lightbox/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen CSS Only Lightbox: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/navigation/lightbox/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /comparisons/navigation/lightbox/html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /comparisons/navigation/lightbox/resources.txt: -------------------------------------------------------------------------------- 1 | Gregory Schier's Codepen: http://codepen.io/gschier/pen/HCoqh -------------------------------------------------------------------------------- /comparisons/navigation/lightbox/scss.scss: -------------------------------------------------------------------------------- 1 | $thumbnail-size: 40px; 2 | $background-color: black; 3 | 4 | .thumbnail { 5 | max-width: $thumbnail-size; 6 | } 7 | 8 | .lightbox { 9 | // Hide lightbox image 10 | display: none; 11 | 12 | // Position/style of lightbox 13 | position: fixed; 14 | z-index: 999; 15 | width: 100%; 16 | height: 100%; 17 | text-align: center; 18 | top: 0; 19 | left: 0; 20 | background: $background-color; 21 | } 22 | 23 | .lightbox img { 24 | /// Pad the lightbox image 25 | max-width: 90%; 26 | max-height: 80%; 27 | margin-top: 2%; 28 | } 29 | 30 | .lightbox:target { 31 | // Remove default outline and unhide lightbox 32 | outline: none; 33 | display: block; 34 | } -------------------------------------------------------------------------------- /comparisons/navigation/tabs/a11y.txt: -------------------------------------------------------------------------------- 1 | Usage: Not keyboard navigable. -------------------------------------------------------------------------------- /comparisons/navigation/tabs/codepen.html: -------------------------------------------------------------------------------- 1 |

See the Pen KgRzRE by Una Kravets (@una) on CodePen.

-------------------------------------------------------------------------------- /comparisons/navigation/tabs/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 67 | 68 | 69 |
70 |
71 | 72 | 73 |
74 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum debitis dignissimos velit quasi vel! Ipsum illo vero amet cumque voluptatem accusamus dignissimos nisi quam adipisci aperiam! Temporibus necessitatibus deleniti excepturi.

75 |
76 |
77 | 78 |
79 | 80 | 81 |
82 |

Hi there! Fancy seeing you here!

83 |
84 |
85 | 86 |
87 | 88 | 89 |
90 |

Tempora minima itaque officia aliquid, facilis, enim atque. Quibusdam velit quo alias, laboriosam non nobis, dolorem itaque commodi ullam, corporis tempore sapiente doloribus libero cupiditate doloremque tempora. Reiciendis, ab, modi.

91 |
92 |
93 |
94 | 95 | -------------------------------------------------------------------------------- /comparisons/navigation/tabs/html.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 5 |
6 |

Tab One Content

7 |
8 |
9 | 10 |
11 | 12 | 13 |
14 |

Tab Two Content

15 |
16 |
17 | 18 |
19 | 20 | 21 |
22 |

Tab Three Content

23 |
24 |
25 |
-------------------------------------------------------------------------------- /comparisons/navigation/tabs/resources.txt: -------------------------------------------------------------------------------- 1 | Functional CSS Tabs Revisited: https://css-tricks.com/functional-css-tabs-re-revisited/ 2 | Material Design CSS Tabs: http://codepen.io/mildrenben/pen/bdGdOb -------------------------------------------------------------------------------- /comparisons/navigation/tabs/scss.scss: -------------------------------------------------------------------------------- 1 | .tabs { 2 | position: relative; 3 | // set height to be even for all tab groups 4 | min-height: 200px; 5 | } 6 | 7 | .tab { 8 | float: left; 9 | } 10 | 11 | .tab label { 12 | // set label height 13 | top: 1em; 14 | } 15 | 16 | // Visually hide radio buttons 17 | .tab [type=radio] { 18 | position: absolute; 19 | height: 0; 20 | width: 0; 21 | overflow: hidden; 22 | clip: rect(0, 0, 0, 0); 23 | 24 | &:focus + label { 25 | outline: 2px dotted black; 26 | } 27 | } 28 | 29 | .content { 30 | position: absolute; 31 | top: 1em; left: 0; right: 0; bottom: 0; 32 | opacity: 0; 33 | } 34 | 35 | [type=radio]:checked ~ label { 36 | z-index: 2; 37 | } 38 | 39 | [type=radio]:checked ~ label ~ .content { 40 | z-index: 1; 41 | opacity: 1; 42 | } -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:after, 3 | *:before { 4 | -webkit-box-sizing: border-box; 5 | -moz-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | html { 9 | overflow-y: scroll; 10 | } 11 | a { 12 | cursor: pointer; 13 | color: #006da0; 14 | } 15 | ::-webkit-input-placeholder { 16 | color: rgba(0,0,0,0.5); 17 | } 18 | :-moz-placeholder { 19 | color: rgba(0,0,0,0.5); 20 | } 21 | ::-moz-placeholder { 22 | color: rgba(0,0,0,0.5); 23 | } 24 | :-ms-input-placeholder { 25 | color: rgba(0,0,0,0.5); 26 | } 27 | input[type="search"][required] { 28 | -webkit-border-radius: 0; 29 | border-radius: 0; 30 | position: relative; 31 | padding: 0.1rem 1.1rem 0.1rem 0.25rem; 32 | } 33 | input[type="search"][required]::-ms-clear { 34 | display: none; 35 | } 36 | input[type="search"][required]::-webkit-search-cancel-button { 37 | -webkit-appearance: none; 38 | } 39 | input[type="search"][required]::-webkit-search-cancel-button:after { 40 | font-family: Arial, sans-serif; 41 | content: "\00D7"; 42 | display: block; 43 | position: absolute; 44 | right: 0; 45 | top: 0; 46 | bottom: 0; 47 | width: 0.85rem; 48 | font-size: 0.8rem; 49 | text-align: left; 50 | cursor: pointer; 51 | } 52 | input[type="search"][required]:valid::-webkit-search-cancel-button:after { 53 | opacity: 1; 54 | -ms-filter: none; 55 | filter: none; 56 | } 57 | input[type="search"][required]:invalid::-webkit-search-cancel-button:after { 58 | opacity: 0; 59 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 60 | filter: alpha(opacity=0); 61 | } 62 | body { 63 | font-family: "Lato", "Helvetica Neue", Helvetica, arial, sans-serif; 64 | color: #444; 65 | margin: 0; 66 | -webkit-font-smoothing: antialiased; 67 | } 68 | .page { 69 | background: #fff; 70 | } 71 | header.page-header { 72 | width: 44em; 73 | max-width: 100%; 74 | padding: 3em 0 2em; 75 | margin: 0 auto; 76 | text-align: center; 77 | } 78 | @media (max-width: 840px) { 79 | header.page-header { 80 | font-size: 12px; 81 | } 82 | } 83 | @media (max-width: 540px) { 84 | header.page-header { 85 | font-size: 8px; 86 | padding-top: 0; 87 | width: 100%; 88 | } 89 | } 90 | header.page-header .inner { 91 | padding: 3em 2em 2.4em; 92 | background: #c69; 93 | max-height: 178px; 94 | } 95 | header.page-header .inner h1 { 96 | font-size: 2.3em; 97 | font-weight: 200; 98 | margin: 0; 99 | color: #fff; 100 | text-transform: uppercase; 101 | letter-spacing: 0.01em; 102 | line-height: 1; 103 | } 104 | .explanation { 105 | width: 40em; 106 | max-width: 100%; 107 | padding: 0 1em; 108 | margin: auto; 109 | text-align: justify; 110 | } 111 | .explanation .inner { 112 | font-size: 1.1em; 113 | } 114 | .share-buttons { 115 | zoom: 1; 116 | max-width: 250px; 117 | margin: 2em auto 0; 118 | height: 2em; 119 | } 120 | .share-buttons:before, 121 | .share-buttons:after { 122 | content: ""; 123 | display: table; 124 | } 125 | .share-buttons:after { 126 | clear: both; 127 | } 128 | .share-buttons .twitter-share-button { 129 | float: left; 130 | width: 90px; 131 | height: 1em; 132 | } 133 | .share-buttons .github-stars-button { 134 | float: left; 135 | height: 1em; 136 | } 137 | .old-ie-message { 138 | display: none; 139 | } 140 | html.old-ie .old-ie-message { 141 | display: block; 142 | background-color: #ffaeae; 143 | padding: 10px; 144 | color: #fff; 145 | } 146 | .empty-message { 147 | display: none; 148 | } 149 | .comparisons.empty .empty-message { 150 | display: block; 151 | padding: 1em 0; 152 | font-size: 1.5em; 153 | text-align: center; 154 | } 155 | .comparison { 156 | zoom: 1; 157 | } 158 | .comparison:before, 159 | .comparison:after { 160 | content: ""; 161 | display: table; 162 | } 163 | .comparison:after { 164 | clear: both; 165 | } 166 | .comparison h3 { 167 | text-align: center; 168 | font-size: 2em; 169 | font-weight: normal; 170 | } 171 | .comparison h3 a { 172 | position: relative; 173 | color: inherit; 174 | text-decoration: none; 175 | } 176 | .comparison h3 a:hover:before { 177 | content: '§'; 178 | position: absolute; 179 | right: 100%; 180 | padding-right: 0.3em; 181 | } 182 | .comparison h4 { 183 | font-weight: 200; 184 | color: #666; 185 | letter-spacing: 0.07em; 186 | font-size: 1.4em; 187 | text-transform: uppercase; 188 | margin-bottom: 0; 189 | line-height: 1; 190 | display: inline-block; 191 | } 192 | header.search { 193 | zoom: 1; 194 | max-width: 40em; 195 | margin: 2em auto 0; 196 | padding: 0 1em; 197 | } 198 | header.search:before, 199 | header.search:after { 200 | content: ""; 201 | display: table; 202 | } 203 | header.search:after { 204 | clear: both; 205 | } 206 | header.search input[type="search"] { 207 | height: 3em; 208 | border: 0; 209 | font-family: inherit; 210 | font-size: 1.5em; 211 | font-weight: 200; 212 | letter-spacing: 0.08em; 213 | padding-left: 0.52em; 214 | margin: 0; 215 | color: inherit; 216 | opacity: 0.5; 217 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 218 | filter: alpha(opacity=50); 219 | width: 50%; 220 | background: rgba(0,0,0,0.1); 221 | margin-bottom: 4px; 222 | width: 100%; 223 | padding: 1em; 224 | margin-bottom: 1em; 225 | } 226 | header.search input[type="search"]::-webkit-search-cancel-button:after { 227 | position: absolute; 228 | top: 0; 229 | bottom: 0; 230 | margin: auto; 231 | height: 1em; 232 | font-size: 1em; 233 | line-height: 1; 234 | font-weight: normal; 235 | padding-right: 1em; 236 | cursor: pointer; 237 | } 238 | header.search input[type="search"]:focus { 239 | background: rgba(0,0,0,0.05); 240 | opacity: 1; 241 | -ms-filter: none; 242 | filter: none; 243 | outline: none; 244 | } 245 | header.search .field { 246 | position: relative; 247 | } 248 | header.search .field label { 249 | padding-right: 10em; 250 | font-size: 1.1em; 251 | line-height: 1.2em; 252 | padding-top: 0em; 253 | padding-bottom: 3em; 254 | display: block; 255 | } 256 | header.search .field .slider { 257 | position: absolute; 258 | top: 0; 259 | right: 0; 260 | width: 10em; 261 | height: 2em; 262 | } 263 | .hidden { 264 | display: none; 265 | } 266 | .resources-block { 267 | text-align: center; 268 | } 269 | .resources-block h4 { 270 | font-size: 1.1em; 271 | display: inline-block; 272 | font-weight: 200; 273 | color: #666; 274 | letter-spacing: 0.07em; 275 | font-size: 1.4em; 276 | text-transform: uppercase; 277 | margin-bottom: 0; 278 | line-height: 1; 279 | } 280 | .resources-block ul { 281 | display: inline-block; 282 | list-style: none; 283 | padding: 0; 284 | } 285 | .resources-block ul li { 286 | display: inline-block; 287 | padding-left: 10px; 288 | } 289 | section { 290 | /* Hide section titles when they're empty */ 291 | position: relative; 292 | overflow: hidden; 293 | background: #fff; 294 | padding: 5.5em 0; 295 | } 296 | section.odd { 297 | background: #eee; 298 | } 299 | section.odd :not(pre) > code[class*="language-"], 300 | section.odd pre[class*="language-"] { 301 | background: #fff; 302 | } 303 | section .inner { 304 | width: 1200px; 305 | max-width: 100%; 306 | margin: 0 auto; 307 | padding: 0 1em; 308 | } 309 | section .comparison { 310 | padding-top: 40px; 311 | padding-bottom: -40px; 312 | } 313 | section h2 { 314 | font-size: 3em; 315 | font-weight: 100; 316 | letter-spacing: 0.3em; 317 | text-transform: uppercase; 318 | color: #888; 319 | text-align: center; 320 | margin: 0; 321 | } 322 | @media (max-width: 840px) { 323 | section h2 { 324 | font-size: 2em; 325 | } 326 | } 327 | input[type='range'] { 328 | -webkit-appearance: none !important; 329 | margin: 0; 330 | background-color: #f0f0f0; 331 | height: 30px; 332 | width: 100%; 333 | padding: 4px; 334 | } 335 | input[type='range']::-webkit-slider-thumb { 336 | -webkit-appearance: none !important; 337 | height: 20px; 338 | width: 20px; 339 | border: 2px solid #ccc; 340 | -webkit-border-radius: 5px; 341 | border-radius: 5px; 342 | background-color: #fcfcfc; 343 | } 344 | .range-label { 345 | float: left; 346 | width: 33%; 347 | text-align: center; 348 | padding: 0 4px; 349 | } 350 | .range-label:first-of-type { 351 | text-align: left; 352 | } 353 | .range-label:last-of-type { 354 | text-align: right; 355 | } 356 | footer { 357 | margin: 3em auto; 358 | text-align: center; 359 | } 360 | footer a { 361 | color: #c69; 362 | } 363 | .comparison-group { 364 | display: -webkit-box; 365 | display: -moz-box; 366 | display: -webkit-flex; 367 | display: -ms-flexbox; 368 | display: box; 369 | display: flex; 370 | -webkit-box-lines: multiple; 371 | -moz-box-lines: multiple; 372 | -o-box-lines: multiple; 373 | -webkit-flex-wrap: wrap; 374 | -ms-flex-wrap: wrap; 375 | flex-wrap: wrap; 376 | } 377 | .comparison-group .code { 378 | -webkit-box-flex: 1; 379 | -moz-box-flex: 1; 380 | -o-box-flex: 1; 381 | box-flex: 1; 382 | -webkit-flex: 1; 383 | -ms-flex: 1; 384 | flex: 1; 385 | margin: 10px; 386 | -webkit-flex-basis: 400px; 387 | flex-basis: 400px; 388 | overflow: auto; 389 | } 390 | .native-example iframe { 391 | background: #fff; 392 | border: 1px solid #eee; 393 | height: 200px; 394 | margin: 15px 0; 395 | width: 100%; 396 | } 397 | .usage-note { 398 | text-align: center; 399 | } 400 | -------------------------------------------------------------------------------- /css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss&plugins=show-language */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | background: none; 12 | text-shadow: 0 1px white; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #a67f59; 109 | background: hsla(0, 0%, 100%, .5); 110 | } 111 | 112 | .token.atrule, 113 | .token.attr-value, 114 | .token.keyword { 115 | color: #07a; 116 | } 117 | 118 | .token.function { 119 | color: #DD4A68; 120 | } 121 | 122 | .token.regex, 123 | .token.important, 124 | .token.variable { 125 | color: #e90; 126 | } 127 | 128 | .token.important, 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.entity { 137 | cursor: help; 138 | } 139 | 140 | div.prism-show-language { 141 | position: relative; 142 | } 143 | 144 | div.prism-show-language > div.prism-show-language-label { 145 | color: black; 146 | background-color: #CFCFCF; 147 | display: inline-block; 148 | position: absolute; 149 | bottom: auto; 150 | left: auto; 151 | top: 0; 152 | right: 0; 153 | width: auto; 154 | height: auto; 155 | font-size: 0.9em; 156 | border-radius: 0 0 0 5px; 157 | padding: 0 0.5em; 158 | text-shadow: none; 159 | z-index: 1; 160 | box-shadow: none; 161 | -webkit-transform: none; 162 | -moz-transform: none; 163 | -ms-transform: none; 164 | -o-transform: none; 165 | transform: none; 166 | } 167 | 168 | -------------------------------------------------------------------------------- /gulpfile.coffee: -------------------------------------------------------------------------------- 1 | gulp = require('gulp') 2 | stylus = require('gulp-stylus') 3 | jade = require('gulp-jade') 4 | coffee = require('gulp-coffee') 5 | 6 | readTree = require('./readTree') 7 | 8 | CAPS_WORDS = ['JSON', 'HTML', 'AJAX'] 9 | titleCase = (str) -> 10 | str = str.replace /(^|\b)([a-z])([a-z]+)/g, (match, space, first, rest) -> 11 | "#{ space }#{ first.toUpperCase() }#{ rest }" 12 | 13 | str = str.replace new RegExp("(?:^|\b)(#{ CAPS_WORDS.join('|') })(?:$|\b)", 'ig'), (match, word) -> 14 | word.toUpperCase() 15 | 16 | str 17 | 18 | getNamePart = (str) -> 19 | str.split('.')[0] 20 | 21 | fullLanguage = (ext) -> 22 | LANGS = 23 | js: 'javascript' 24 | css: 'css' 25 | scss: 'scss' 26 | html: 'markup' 27 | 28 | LANGS[ext] 29 | 30 | gulp.task 'coffee', -> 31 | gulp.src('./coffee/*') 32 | .pipe(coffee()) 33 | .pipe(gulp.dest('./js/')) 34 | 35 | gulp.task 'stylus', -> 36 | gulp.src('./styl/index.styl') 37 | .pipe(stylus({use: ['nib']})) 38 | .pipe(gulp.dest('./css/')) 39 | 40 | gulp.task 'jade', -> 41 | readTree (err, comparisons) -> 42 | if err 43 | console.error "Error loading comparisons tree", err 44 | return 45 | 46 | comps = [] 47 | for title, comparison of comparisons 48 | comps.push {title, comparison} 49 | 50 | comps.sort (a, b) -> 51 | a.title.localeCompare b.title 52 | 53 | gulp.src('./jade/**/index.jade') 54 | .pipe(jade({pretty: true, data: {comparisons: comps, titleCase, getNamePart, fullLanguage}})) 55 | .pipe(gulp.dest('./')) 56 | 57 | gulp.task 'default', -> 58 | 59 | gulp.run 'coffee', 'stylus', 'jade' 60 | 61 | gulp.watch './coffee/*', -> 62 | gulp.run 'coffee' 63 | 64 | gulp.watch './styl/*', -> 65 | gulp.run 'stylus' 66 | 67 | gulp.watch ['./jade/**/*.jade', './comparisons/**/*'], -> 68 | gulp.run 'jade' 69 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | require('coffee-script') 2 | require('./gulpfile.coffee') 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | You Might Not Need JavaScript 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 37 | 38 | 39 |
40 |
41 |
42 |

You might not need JavaScript

43 |
44 |
45 |
46 |
47 |

JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy.

48 |

49 | Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you're only targeting more modern browsers, 50 | you might not need anything more than what the browser ships with. 51 |

52 |

53 | This site is fully copied from youmightnotneedjquery.com, an excellent resource for vanilla JavaScript created by @adamfschwartz and @zackbloom. 54 | But this time, we take a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not need scripts for that task at all! 55 |

56 |

57 | 58 | (Note: Some of these demos may not be accessible and work on all browsers. Please take a moment to review the usage notes and to test them in your project before using in production) 59 |

60 |
61 |
62 |
63 | 66 | 69 |
70 |
71 | 72 |
73 |
74 |
Your search didn't match any comparisons.
75 |
76 |
77 |

Components

78 |
79 |

Image Slider

80 |
81 |

resources:

82 | 87 |
88 | 96 |
97 |

CODEPEN

See the Pen CSS-Only Slider: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

98 |
99 |
Usage: Presentational, Option to read or be skipped by screen reader, no user control over images. 100 |
101 |
102 |
103 |

HTML

104 |
105 | 
<div id="slider">
106 |   <div id="slide-holder">
107 |     <div class="slide">content1</div>
108 |     <div class="slide">content2</div>
109 |     <div class="slide">content3</div>
110 |   </div>
111 | </div>
112 |
113 |
114 |
115 |
116 |

SCSS

117 |
118 | 
#slider {
119 | 	width: $slide-width;
120 | 	height: $slide-height;
121 | 	overflow: hidden;
122 | }
123 | 
124 | .slide {
125 | 	width: $slide-width;
126 | 	height: $slide-height;
127 | 	float: left;
128 | 	position: relative;
129 | }
130 | 
131 | #slide-holder {
132 |   // wide enough to fit all the slides
133 | 	width: 400%;
134 | 	position: relative;
135 | 	left: 0;
136 | 	will-change: transform;
137 | 	animation: scroller 10s infinite;
138 | }
139 | 
140 | // need a step for each slide
141 | @keyframes scroller {
142 |   0% { transform: translateX(0); }
143 |   33% { transform: translateX(-$slide-width); }
144 |   66% { transform: translateX(-$slide-width*2); }
145 |   100% { transform: translateX(0); }
146 | }
147 |
148 |
149 |
150 |
151 |
152 |

can i use:

153 | 158 |
159 |
160 | 225 |
226 |

View Switcher

227 |
228 |

resources:

229 | 233 |
234 | 242 |
243 |

CODEPEN

See the Pen CSS-Only Image Switcher: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

244 |
245 |
Usage: Presentational: keyboard navigable, not screen reader accessible. 246 |
247 |
248 |
249 |

HTML

250 |
251 | 
<div id="slider">
252 | 
253 |   	<!-- Slide Images -->
254 | 	<img id="slide-1" src="img1.jpg" alt="img description"/>
255 |   	<img id="slide-2" src="img2.jpg" alt="img description"/>
256 |   	<img id="slide-3" src="img3.jpg" alt="img description"/>
257 |   	<img id="slide-4" src="img4.jpg" alt="img description"/>
258 | 	
259 | 	<!-- Navigation for the slides -->
260 | 	<ul>
261 | 		<li><a href="#slide-1" aria-label="Image 1">1</a></li>
262 | 		<li><a href="#slide-2" aria-label="Image 2">2</a></li>
263 | 		<li><a href="#slide-3" aria-label="Image 3">3</a></li>
264 | 		<li><a href="#slide-4" aria-label="Image 4">4</a></li>
265 | 	</ul>
266 | </div>
267 |
268 |
269 |
270 |
271 |

SCSS

272 |
273 | 
#slider {
274 |   img {
275 |     position: absolute;
276 |     top: 0;
277 |     left: 0;
278 |     width: 300px;
279 |     height: 200px;
280 |     
281 |     &:target {
282 |       transition: all .5s ease-in-out;
283 |     }
284 |     
285 |     &:not(:target), 
286 |     &:target ~ img#slide-4  {
287 |       position: relative;
288 |       opacity: 0;
289 |     }
290 | 
291 |     // set initially visible
292 |     &#slide-4 {
293 |       position: absolute;
294 |       opacity: 1;
295 |      }
296 |   }
297 | }
298 |
299 |
300 |
301 |
302 |

can i use:

303 | 306 |
307 |
308 |
309 |
310 |
311 |
312 |

Forms

313 |
314 |

resources:

315 | 318 |
319 |
320 |

Color Picker

321 | 329 |
330 |

CODEPEN

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

331 | 332 |
333 |
Usage: Safe for production. 334 |
335 |
336 |
337 |

HTML

338 |
339 | 
<form>
340 |   <input type="color" aria-label="Select a color" />
341 | </form>
342 |
343 |
344 |
345 |
346 |
347 |

can i use:

348 | 351 |
352 |
353 |
354 |

File Upload

355 | 363 |
364 |

CODEPEN

See the Pen HTML File Upload: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

365 |
366 |
Usage: Safe for production. 367 |
368 |
369 |
370 |

HTML

371 |
372 | 
<form>
373 |   <input type="file" accept="image/*" aria-label="select file to upload">
374 |   <input type="submit">
375 | </form>
376 |
377 |
378 |
379 |
380 |
381 |
382 |

Form Validation

383 |
384 |

resources:

385 | 389 |
390 | 398 |
399 |

CODEPEN

See the Pen HTML Form Validation: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

400 |
401 |
Usage: Safe for production. 402 |
403 |
404 |
405 |

HTML

406 |
407 | 
<!-- A few examples from links above -->
408 | 
409 | <form>
410 |   <!-- Case insensitive binary choice -->
411 |   <label for="item1">Would you prefer a banana or a cherry?</label>
412 |   <input id="item1" pattern="[Bb]anana|[Cc]herry">
413 | 
414 |   <!-- Email validation -->
415 |   <label for="item2">What's your e-mail?</label>
416 |   <input id="item2" type="email" name="email">
417 | 
418 |   <!-- Max length validation -->
419 |   <label for="item3">Leave a short message</label>
420 |   <textarea id="item3" name="msg" maxlength="140" rows="5"></textarea>
421 | 
422 |   <!-- Numeric + Symbol pattern as required field -->
423 |   <label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
424 |   <input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >
425 | 
426 |   <button>Submit</button>
427 | </form>
428 |
429 |
430 |
431 |
432 |

can i use:

433 | 436 |
437 |
438 |
439 |
440 |
441 |
442 |

Interactions

443 |
444 |

Scroll Indicator

445 |
446 |

resources:

447 | 450 |
451 | 459 |
460 |

CODEPEN

See the Pen CSS Only Scroll Indicator: youmightnotneedjs.com by Una Kravets (@una) on CodePen.

461 |
462 |
Usage: Presentational, no screen reader support. Not recommended for production (mobile) 463 |
464 |
465 |
466 |

HTML

467 |
468 | 
<header class="scroller"></header>
469 | <main>
470 | 	content must be longer than 100vh
471 | </main>
472 |
473 |
474 |
475 |

SCSS

476 |
477 | 
body {	
478 | 	background: linear-gradient(to right top, 
479 | 	$scroller-color 50%, 
480 | 	$scroller-background 50%);
481 | 	background-size: 100% calc(100% - 100vh + #{$scroller-height}); 
482 | 	background-repeat: no-repeat;
483 | }
484 | 
485 | body:before {
486 | 	content:'';
487 | 	position: fixed;
488 | 	top: $scroller-height;
489 | 	bottom: 0;
490 | 	width: 100%;
491 | 	z-index: -1;
492 | 	background: $body-background;
493 | }
494 |
495 |
496 |
497 |
498 |
499 |

can i use:

500 | 504 |
505 |
506 |
507 |
508 | 786 |
787 | 790 |
791 |
792 | -------------------------------------------------------------------------------- /jade/_caniuse.jade: -------------------------------------------------------------------------------- 1 | mixin caniuse(list) 2 | - var alts = list.split('\n') 3 | 4 | div.resources-block 5 | h4 can i use: 6 | 7 | ul.resources 8 | 9 | for alt in alts 10 | - var name = alt.substring(0, alt.indexOf(':')) 11 | - var url = alt.substring(alt.indexOf(':') + 1) 12 | 13 | if name 14 | li 15 | a(href=url, target="_blank")= name 16 | -------------------------------------------------------------------------------- /jade/_resources.jade: -------------------------------------------------------------------------------- 1 | mixin resources(list) 2 | - var alts = list.split('\n') 3 | 4 | .resources-block 5 | h4 resources: 6 | 7 | ul.resources 8 | 9 | for alt in alts 10 | - var name = alt.substring(0, alt.indexOf(':')) 11 | - var url = alt.substring(alt.indexOf(':') + 1) 12 | 13 | if name 14 | li 15 | a(href=url, target="_blank")= name 16 | -------------------------------------------------------------------------------- /jade/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | //- This will go into the HTML file to let people know to edit this file instead: 4 | // Please edit the index.jade or the files in comparisons/, this file is generated 5 | 6 | include _resources 7 | include _caniuse 8 | 9 | 10 | 11 | head 12 | meta(charset='utf-8') 13 | meta(http-equiv='X-UA-Compatible', content='chrome=1') 14 | meta(name='viewport', content='width=device-width, initial-scale=1') 15 | meta(name='description', content='Examples of common UI elements and interactions with HTML and CSS alone.') 16 | meta(name='twitter:card', content='summary_large_image') 17 | meta(name='twitter:site', content='@una') 18 | meta(name='twitter:creator', content='@una') 19 | meta(name='twitter:title', content='You Might Not Need JavaScript') 20 | meta(name='twitter:description', content='Examples of common UI elements and interactions with HTML and CSS alone.') 21 | meta(name='twitter:image' content='http://youmightnotneedjs.com/shareimg.jpg') 22 | meta(name='og:image' content='http://youmightnotneedjs.com/shareimg.jpg') 23 | meta(name='og:title', content='You Might Not Need JavaScript') 24 | 25 | title You Might Not Need JavaScript 26 | 27 | link(rel='stylesheet', href='css/prism.css') 28 | link(rel='stylesheet', href='css/index.css') 29 | 30 | link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Lato') 31 | 32 | script(type='text/javascript'). 33 | try{Typekit.load();}catch(e){} 34 | 35 | script(src='js/prism.js') 36 | script(src='js/index.js') 37 | script(src='https://assets.codepen.io/assets/embed/ei.js') 38 | 39 | script. 40 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 41 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 42 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 43 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 44 | ga('create', 'UA-36758177-10', 'auto'); 45 | ga('send', 'pageview'); 46 | 47 | body 48 | .page 49 | header.page-header 50 | .inner 51 | h1 52 | | You might not need JavaScript 53 | 54 | .explanation 55 | .inner 56 | p 57 | | JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy. 58 | 59 | p 60 | | Maybe you can include a few lines of utility code, or a mixin, and forgo the requirement. If you're only targeting more modern browsers, 61 | | you might not need anything more than what the browser ships with. 62 | 63 | p 64 | | This site is fully copied from youmightnotneedjquery.com, an excellent resource for vanilla JavaScript created by @adamfschwartz and @zackbloom. 65 | | But this time, we take a look at the power of modern native HTML and CSS as well as some of the syntactic sugar of Sass. Because, you might not need scripts for that task at all! 66 | 67 | p 68 | | (Note: Some of these demos may not be accessible and work on all browsers. Please take a moment to review the usage notes and to test them in your project before using in production) 69 | 70 | .share-buttons 71 | 72 | .share-button.twitter-share-button 73 | iframe(src='https://platform.twitter.com/widgets/tweet_button.html?size=l&url=http%3A%2F%2Fyoumightnotneedjs.com&text=You%20might%20not%20need%20JavaScript!', sharecount=true, frameborder=0, scrolling=0, width="90px", title="Tweet button") 74 | 75 | .share-button.github-stars-button 76 | iframe(src="https://ghbtns.com/github-btn.html?user=una&repo=YouMightNotNeedJS&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px" title="View on Github" ) 77 | 78 | header.search 79 | 80 | input(type="search", placeholder="Search...", required, aria-label="Search") 81 | 82 | .comparisons 83 | 84 | .empty-message 85 | | Your search didn't match any comparisons. 86 | 87 | - var i = 0 88 | for comp in comparisons 89 | section(id=comp.title, class=(++i % 2 ? 'odd' : '')) 90 | .inner 91 | h2= titleCase(comp.title) 92 | 93 | if comp.comparison._resources 94 | +resources(comp.comparison._resources) 95 | 96 | if comp.comparison._caniuse 97 | +caniuse(comp.comparison._caniuse) 98 | 99 | for co, name in comp.comparison 100 | - if (name[0] === '_') continue; 101 | 102 | .comparison(id=name.replace(' ', '-').toLowerCase()) 103 | h3 104 | a(href='#' + name.replace(' ', '-'))= titleCase(name.replace(/_/g, ' ')) 105 | 106 | if co.resources 107 | +resources(co.resources.txt) 108 | 109 | noscript 110 | div.native-example 111 | 112 | for code in ['demo'] 113 | if co[code] 114 | h4= code.toUpperCase() 115 | 116 | for lang in ['html', 'markup'] 117 | if co[code][lang] 118 | div 119 | iframe(src='comparisons/' + comp.title + '/' + name + '/demo.html') 120 | 121 | div.codpen-example 122 | 123 | for code in ['codepen'] 124 | if co[code] 125 | h4= code.toUpperCase() 126 | 127 | for lang in ['html', 'markup'] 128 | if co[code][lang] 129 | !{co[code][lang]} 130 | 131 | div.usage-note 132 | 133 | if co.a11y 134 | strong !{co.a11y.txt} 135 | 136 | div.comparison-group 137 | 138 | for code in ['html', 'css', 'scss', 'markup'] 139 | if co[code] 140 | .code(data-code=getNamePart(code), class=getNamePart(code)) 141 | 142 | h4= code.toUpperCase() 143 | 144 | for lang in ['html', 'scss', 'css', 'markup'] 145 | if co[code][lang] 146 | .code-block(class='language-' + fullLanguage(lang), data-lang=fullLanguage(lang)) 147 | pre 148 | code= co[code][lang] 149 | 150 | if co.caniuse 151 | +caniuse(co.caniuse.txt) 152 | 153 | footer 154 | p made by @una based on youmightnotneedjquery.com | contribute on github 155 | 156 | div(style='-webkit-transform: translateZ(0);') 157 | 158 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var filter, hide, showFirst, 3 | __slice = [].slice; 4 | 5 | showFirst = function() { 6 | var el, els, found, _i, _len, _results; 7 | els = 1 <= arguments.length ? __slice.call(arguments, 0) : []; 8 | found = false; 9 | _results = []; 10 | for (_i = 0, _len = els.length; _i < _len; _i++) { 11 | el = els[_i]; 12 | if (el && !found) { 13 | found = true; 14 | _results.push(el.style.display = 'block'); 15 | } else if (el) { 16 | _results.push(el.style.display = 'none'); 17 | } else { 18 | _results.push(void 0); 19 | } 20 | } 21 | return _results; 22 | }; 23 | 24 | hide = function() { 25 | var el, els, _i, _len, _results; 26 | els = 1 <= arguments.length ? __slice.call(arguments, 0) : []; 27 | _results = []; 28 | for (_i = 0, _len = els.length; _i < _len; _i++) { 29 | el = els[_i]; 30 | if (el) { 31 | _results.push(el.style.display = 'none'); 32 | } 33 | } 34 | return _results; 35 | }; 36 | 37 | filter = function(term) { 38 | var allEmpty, comp, comparisons, empty, section, visibleIndex, _i, _j, _len, _len1, _ref, _ref1; 39 | visibleIndex = 0; 40 | allEmpty = true; 41 | _ref = document.querySelectorAll('section'); 42 | for (_i = 0, _len = _ref.length; _i < _len; _i++) { 43 | section = _ref[_i]; 44 | empty = true; 45 | _ref1 = section.querySelectorAll('.comparison'); 46 | for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { 47 | comp = _ref1[_j]; 48 | if (!term || comp.textContent.toLowerCase().indexOf(term.toLowerCase()) !== -1) { 49 | empty = false; 50 | comp.classList.remove('hidden'); 51 | } else { 52 | comp.classList.add('hidden'); 53 | } 54 | } 55 | if (empty) { 56 | section.classList.add('hidden'); 57 | } else { 58 | allEmpty = false; 59 | section.classList.remove('hidden'); 60 | if (++visibleIndex % 2) { 61 | section.classList.add('odd'); 62 | } else { 63 | section.classList.remove('odd'); 64 | } 65 | } 66 | } 67 | comparisons = document.querySelector('.comparisons'); 68 | if (allEmpty) { 69 | return comparisons.classList.add('empty'); 70 | } else { 71 | return comparisons.classList.remove('empty'); 72 | } 73 | }; 74 | 75 | document.addEventListener('DOMContentLoaded', function() { 76 | var search; 77 | search = document.querySelector('input[type="search"]'); 78 | return search.addEventListener('input', function() { 79 | return filter(search.value); 80 | }); 81 | }); 82 | 83 | }).call(this); 84 | -------------------------------------------------------------------------------- /js/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss&plugins=line-highlight+line-numbers */ 2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(g?b[1].length:0),_=b.index+b[0].length,A=m,S=y,P=r.length;P>A&&_>S;++A)S+=(r[A].matchedStr||r[A]).length,w>=S&&(++m,y=S);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,S),b.index-=y}if(b){g&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),j=[m,k];x&&j.push(x);var N=new a(l,c?n.tokenize(b,c):b,d,b,h);j.push(N),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=(o?" ":"")+s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 3 | Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; 7 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-_\w]+/,variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.scss.property={pattern:/(?:[\w-]|\$[-_\w]+|#\{\$[-_\w]+\})+(?=\s*:)/i,inside:{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}},Prism.languages.insertBefore("scss","important",{variable:/\$[-_\w]+|#\{\$[-_\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-_\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.util.clone(Prism.languages.scss); 8 | !function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function t(e,t){return t=" "+t+" ",(" "+e.className+" ").replace(/[\n\t]/g," ").indexOf(t)>-1}function n(e,n,i){for(var o,a=n.replace(/\s+/g,"").split(","),l=+e.getAttribute("data-line-offset")||0,d=r()?parseInt:parseFloat,c=d(getComputedStyle(e).lineHeight),s=0;o=a[s++];){o=o.split("-");var u=+o[0],m=+o[1]||u,h=document.createElement("div");h.textContent=Array(m-u+2).join(" \n"),h.setAttribute("aria-hidden","true"),h.className=(i||"")+" line-highlight",t(e,"line-numbers")||(h.setAttribute("data-start",u),m>u&&h.setAttribute("data-end",m)),h.style.top=(u-l-1)*c+"px",t(e,"line-numbers")?e.appendChild(h):(e.querySelector("code")||e).appendChild(h)}}function i(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var i=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(i&&!document.getElementById(t)){var r=t.slice(0,t.lastIndexOf(".")),o=document.getElementById(r);o&&(o.hasAttribute("data-line")||o.setAttribute("data-line",""),n(o,i,"temporary "),document.querySelector(".temporary.line-highlight").scrollIntoView())}}if("undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector){var r=function(){var e;return function(){if("undefined"==typeof e){var t=document.createElement("div");t.style.fontSize="13px",t.style.lineHeight="1.5",t.style.padding=0,t.style.border=0,t.innerHTML=" 
 ",document.body.appendChild(t),e=38===t.offsetHeight,document.body.removeChild(t)}return e}}(),o=0;Prism.hooks.add("complete",function(t){var r=t.element.parentNode,a=r&&r.getAttribute("data-line");r&&a&&/pre/i.test(r.nodeName)&&(clearTimeout(o),e(".line-highlight",r).forEach(function(e){e.parentNode.removeChild(e)}),n(r,a),o=setTimeout(i,1))}),window.addEventListener&&window.addEventListener("hashchange",i)}}(); 9 | !function(){"undefined"!=typeof self&&self.Prism&&self.document&&Prism.hooks.add("complete",function(e){if(e.code){var t=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(t&&/pre/i.test(t.nodeName)&&(s.test(t.className)||s.test(e.element.className))&&!e.element.querySelector(".line-numbers-rows")){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s,"")),s.test(t.className)||(t.className+=" line-numbers");var n,a=e.code.match(/\n(?!$)/g),l=a?a.length+1:1,r=new Array(l+1);r=r.join(""),n=document.createElement("span"),n.setAttribute("aria-hidden","true"),n.className="line-numbers-rows",n.innerHTML=r,t.hasAttribute("data-start")&&(t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)),e.element.appendChild(n)}}})}(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "youmightnotneedjquery", 3 | "version": "0.1.0", 4 | "description": "You might not need jQuery", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/HubSpot/youmightnotneedjquery.git" 8 | }, 9 | "author": "", 10 | "license": "MIT", 11 | "bugs": { 12 | "url": "https://github.com/HubSpot/youmightnotneedjquery/issues" 13 | }, 14 | "devDependencies": { 15 | "readfiletree": "0.0.1", 16 | "gulp-util": "~2.2.9", 17 | "gulp": "~3.3.4", 18 | "gulp-coffee": "~1.2.5", 19 | "gulp-jade": "~0.3.0", 20 | "gulp-stylus": "0.0.7", 21 | "coffee-script": "~1.6.3", 22 | "nib": "~1.0.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /readTree.coffee: -------------------------------------------------------------------------------- 1 | fs = require('fs') 2 | 3 | readFileTree = require('readfiletree') 4 | 5 | get = (cb) -> 6 | readFileTree 'comparisons/', (err, tree) -> 7 | if err 8 | cb(err) 9 | return 10 | 11 | out = {} 12 | 13 | for title, comps of tree 14 | out[title] = {} 15 | 16 | for name, comp of comps 17 | if name is 'resources.txt' 18 | name = '_resources' 19 | 20 | out[title][name] = {} 21 | 22 | if typeof comp isnt 'string' 23 | for filename, code of comp 24 | [version, ext] = filename.split '.' 25 | 26 | out[title][name][version] ?= {} 27 | out[title][name][version][ext] = code 28 | else 29 | out[title][name] = comp 30 | 31 | cb null, out 32 | 33 | module.exports = get 34 | -------------------------------------------------------------------------------- /shareimg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/una/YouMightNotNeedJS/17589d6950fa3c639221a7f2554b79a1fad2ee60/shareimg.jpg -------------------------------------------------------------------------------- /styl/index.styl: -------------------------------------------------------------------------------- 1 | @import 'nib' 2 | 3 | *, *:after, *:before 4 | box-sizing border-box 5 | 6 | html 7 | overflow-y scroll 8 | 9 | a 10 | cursor pointer 11 | color #006da0 12 | 13 | ::-webkit-input-placeholder 14 | color rgba(0, 0, 0, .5) 15 | 16 | :-moz-placeholder 17 | color rgba(0, 0, 0, .5) 18 | 19 | ::-moz-placeholder 20 | color rgba(0, 0, 0, .5) 21 | 22 | :-ms-input-placeholder 23 | color rgba(0, 0, 0, .5) 24 | 25 | input[type="search"][required] 26 | border-radius 0 27 | position relative 28 | padding .1rem 1.1rem .1rem .25rem 29 | 30 | &::-ms-clear 31 | display none 32 | 33 | &::-webkit-search-cancel-button 34 | -webkit-appearance none 35 | 36 | &::-webkit-search-cancel-button:after 37 | font-family Arial, sans-serif 38 | content "\00D7" 39 | display block 40 | position absolute 41 | right 0 42 | top 0 43 | bottom 0 44 | width .85rem 45 | font-size .8rem 46 | text-align left 47 | cursor pointer 48 | 49 | &:valid::-webkit-search-cancel-button:after 50 | opacity 1 51 | 52 | &:invalid::-webkit-search-cancel-button:after 53 | opacity 0 54 | 55 | body 56 | font-family "Lato", "Helvetica Neue", Helvetica, arial, sans-serif 57 | color #444 58 | margin 0 59 | -webkit-font-smoothing antialiased 60 | 61 | .page 62 | background #fff 63 | 64 | header.page-header 65 | width 44em 66 | max-width 100% 67 | padding 3em 0 2em 68 | margin 0 auto 69 | text-align center 70 | 71 | @media (max-width: 840px) 72 | font-size 12px 73 | 74 | @media (max-width: 540px) 75 | font-size 8px 76 | padding-top 0 77 | width 100% 78 | 79 | .inner 80 | padding 3em 2em 2.4em 81 | background #c69 82 | 83 | max-height 178px // Prevent font FOUC 84 | 85 | h1 86 | font-size 2.3em 87 | font-weight 200 88 | margin 0 89 | color #fff 90 | text-transform uppercase 91 | letter-spacing .01em 92 | line-height 1 93 | 94 | .explanation 95 | width 40em 96 | max-width 100% 97 | padding 0 1em 98 | margin auto 99 | text-align justify 100 | 101 | .inner 102 | font-size 1.1em 103 | 104 | .share-buttons 105 | clearfix() 106 | max-width 250px 107 | margin 2em auto 0 108 | height 2em 109 | 110 | .twitter-share-button 111 | float left 112 | width 90px 113 | height 1em 114 | 115 | .github-stars-button 116 | float left 117 | height 1em 118 | 119 | .old-ie-message 120 | display none 121 | 122 | html.old-ie & 123 | display block 124 | 125 | background-color #ffaeae 126 | padding 10px 127 | color white 128 | 129 | .empty-message 130 | display none 131 | 132 | .comparisons.empty & 133 | display block 134 | 135 | padding 1em 0 136 | font-size 1.5em 137 | text-align center 138 | 139 | .comparison 140 | clearfix() 141 | 142 | h3 143 | text-align center 144 | font-size 2em 145 | font-weight normal 146 | 147 | a 148 | position relative 149 | color inherit 150 | text-decoration none 151 | 152 | &:hover:before 153 | content '§' 154 | position absolute 155 | right 100% 156 | padding-right .3em 157 | 158 | h4 159 | font-weight 200 160 | color #666 161 | letter-spacing 0.07em 162 | font-size 1.4em 163 | text-transform uppercase 164 | margin-bottom 0 165 | line-height 1 166 | display inline-block 167 | 168 | header.search 169 | clearfix() 170 | max-width 40em 171 | margin 2em auto 0 172 | padding 0 1em 173 | 174 | input[type="search"] 175 | height 3em 176 | border 0 177 | font-family inherit 178 | font-size 1.5em 179 | font-weight 200 180 | letter-spacing .08em 181 | padding-left .52em 182 | margin 0 183 | color inherit 184 | opacity .5 185 | width 50% 186 | background rgba(0, 0, 0, .1) 187 | margin-bottom 4px 188 | width 100% 189 | padding 1em 190 | margin-bottom 1em 191 | 192 | &::-webkit-search-cancel-button:after 193 | position absolute 194 | top 0 195 | bottom 0 196 | margin auto 197 | height 1em 198 | font-size 1em 199 | line-height 1 200 | font-weight normal 201 | padding-right 1em 202 | cursor pointer 203 | 204 | &:focus 205 | background rgba(0, 0, 0, .05) 206 | opacity 1 207 | outline none 208 | 209 | .field 210 | position relative 211 | 212 | label 213 | padding-right 10em 214 | font-size 1.1em 215 | line-height 1.2em 216 | padding-top 0em 217 | padding-bottom 3em 218 | display block 219 | 220 | .slider 221 | position absolute 222 | top 0 223 | right 0 224 | width 10em 225 | height 2em 226 | 227 | .hidden 228 | display none 229 | 230 | .resources-block 231 | text-align: center 232 | 233 | h4 234 | font-size: 1.1em 235 | display: inline-block 236 | font-weight: 200 237 | color: hsl(0, 0%, 40%) 238 | letter-spacing: 0.07em 239 | font-size: 1.4em 240 | text-transform: uppercase 241 | margin-bottom: 0 242 | line-height: 1 243 | 244 | ul 245 | display: inline-block 246 | list-style: none 247 | padding: 0 248 | 249 | li 250 | display: inline-block 251 | padding-left: 10px 252 | 253 | section 254 | /* Hide section titles when they're empty */ 255 | position relative 256 | overflow hidden 257 | background #fff 258 | padding 5.5em 0 259 | 260 | &.odd 261 | background #eee 262 | 263 | :not(pre) > code[class*="language-"], pre[class*="language-"] 264 | background #fff 265 | 266 | .inner 267 | width 1200px 268 | max-width 100% 269 | margin 0 auto 270 | padding 0 1em 271 | 272 | .comparison 273 | padding-top 40px 274 | padding-bottom -40px 275 | 276 | h2 277 | font-size 3em 278 | font-weight 100 279 | letter-spacing .3em 280 | text-transform uppercase 281 | color #888 282 | text-align center 283 | margin 0 284 | 285 | @media (max-width: 840px) 286 | font-size 2em 287 | 288 | input[type='range'] 289 | -webkit-appearance none !important 290 | 291 | margin 0 292 | background-color #F0F0F0 293 | height 30px 294 | width 100% 295 | padding 4px 296 | 297 | input[type='range']::-webkit-slider-thumb 298 | -webkit-appearance none !important 299 | 300 | height 20px 301 | width 20px 302 | border 2px solid #ccc 303 | border-radius 5px 304 | background-color #fcfcfc 305 | 306 | .range-label 307 | float left 308 | width 33% 309 | text-align center 310 | padding 0 4px 311 | 312 | .range-label:first-of-type 313 | text-align left 314 | 315 | .range-label:last-of-type 316 | text-align right 317 | 318 | footer 319 | margin 3em auto 320 | text-align center 321 | 322 | a 323 | color #c69 324 | 325 | .comparison-group 326 | display flex 327 | flex-wrap wrap 328 | 329 | .code 330 | flex 1 331 | margin 10px 332 | flex-basis 400px 333 | overflow: auto 334 | 335 | .native-example 336 | iframe 337 | background: #fff; 338 | border: 1px solid rgb(238, 238, 238); 339 | height: 200px; 340 | margin: 15px 0; 341 | width: 100%; 342 | 343 | .usage-note 344 | text-align center --------------------------------------------------------------------------------