index.html: make the header follow what html5-boilerplate does
[experiments/scss-responsive-toggle-menu.git] / README
1 An SCSS mixin for pure CSS responsive toggle menus without hacks.
2
3 The selectors name follows the BEM scheme, the file structure follows SMACSS.
4
5 Inspired by:
6   - http://bradfrost.com/blog/web/responsive-nav-patterns/
7   - http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800
8   - https://gist.github.com/joesnellpdx/4151902
9   - https://codepen.io/joesnellpdx/pen/ktGdx
10
11
12 Dependencies:
13   - sassc, pysassc, or ruby-sass
14
15
16 Demo:
17   1. Install 'sassc', on Debian systems:
18     $ sudo apt-get install sassc
19   2. Download this code.
20   3. Run 'make' to build the final css style.
21   4. Load the page:
22     $ xdg-open index.html
23
24
25 How it works
26 ============
27
28 In HTML, linking to an element using its fragment id allows to pass some state
29 info to the page via the URL and then capture it in the CSS :target selector.
30
31 Moreover HTML specifies the behavior of scrolling when navigating to
32 a fragment id, in particular the specification says: "if the destination is
33 not being rendered the User Agent must do nothing", see also
34 https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid
35
36 So, according to the specification linking to an hidden element using its
37 fragment id does not cause any scrolling.
38
39 This behavior is to use a simple link as a mechanism to set the states of the
40 menu (show, hide) and style them in CSS.