PageRenderTime 36ms CodeModel.GetById 9ms RepoModel.GetById 1ms app.codeStats 0ms

/deploy/node_modules/material-design-lite/src/footer/README.md

https://gitlab.com/nVySin/Mo_Grabber
Markdown | 406 lines | 390 code | 16 blank | 0 comment | 0 complexity | 522d77363663546b6c7fa5050bc6da61 MD5 | raw file
  1. ## Introduction
  2. The Material Design Lite (MDL) **footer** component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called "footer", it may be placed at any appropriate location on a device screen, either before or after other content.
  3. An MDL footer component takes two basic forms: *mega-footer* and *mini-footer*. As the names imply, mega-footers contain more (and more complex) content than mini-footers. A mega-footer presents multiple sections of content separated by horizontal rules, while a mini-footer presents a single section of content. Both footer forms have their own internal structures, including required and optional elements, and typically include both informational and clickable content, such as links.
  4. Footers, as represented by this component, are a fairly new feature in user interfaces, and allow users to view discrete blocks of content in a coherent and consistently organized way. Their design and use is an important factor in the overall user experience.
  5. ## Basic use
  6. To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
  7. ### To include an MDL **mega-footer** component:
  8. &nbsp;1a. Code a `<footer>` element. Inside the footer, include one `<div>` element for each content section, typically three: *top*, *middle*, and *bottom*.
  9. ```html
  10. <footer>
  11. <div>
  12. ...
  13. </div>
  14. <div>
  15. ...
  16. </div>
  17. <div>
  18. ...
  19. </div>
  20. </footer>
  21. ```
  22. &nbsp;1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
  23. ```html
  24. <footer class="mdl-mega-footer">
  25. <div class="mdl-mega-footer__top-section">
  26. ...
  27. </div>
  28. <div class="mdl-mega-footer__middle-section">
  29. ...
  30. </div>
  31. <div class="mdl-mega-footer__bottom-section">
  32. ...
  33. </div>
  34. </footer>
  35. ```
  36. &nbsp;2a. Inside the top section div, code two sibling "inner" divs for the *left* and *right* content sections.
  37. ```html
  38. <footer class="mdl-mega-footer">
  39. <div class="mdl-mega-footer__top-section">
  40. <div>
  41. ...
  42. </div>
  43. <div>
  44. ...
  45. </div>
  46. </div>
  47. <div class="mdl-mega-footer__middle-section">
  48. ...
  49. </div>
  50. <div class="mdl-mega-footer__bottom-section">
  51. ...
  52. </div>
  53. </footer>
  54. ```
  55. &nbsp;2b. Add the appropriate MDL classes to the two "inner" left and right divs using the `class` attribute.
  56. ```html
  57. <footer class="mdl-mega-footer">
  58. <div class="mdl-mega-footer__top-section">
  59. <div class="mdl-mega-footer__left-section">
  60. ...
  61. </div>
  62. <div class="mdl-mega-footer__right-section">
  63. ...
  64. </div>
  65. </div>
  66. <div class="mdl-mega-footer__middle-section">
  67. ...
  68. </div>
  69. <div class="mdl-mega-footer__bottom-section">
  70. ...
  71. </div>
  72. </footer>
  73. ```
  74. &nbsp;3a. Inside the middle section div, code one or more sibling "inner" divs for the *drop-down* content sections. That is, for two drop-down sections, you would code two divs.
  75. ```html
  76. <footer class="mdl-mega-footer">
  77. <div class="mdl-mega-footer__top-section">
  78. <div class="mdl-mega-footer__left-section">
  79. ...
  80. </div>
  81. <div class="mdl-mega-footer__right-section">
  82. ...
  83. </div>
  84. </div>
  85. <div class="mdl-mega-footer__middle-section">
  86. <div>
  87. ...
  88. </div>
  89. <div>
  90. ...
  91. </div>
  92. </div>
  93. <div class="mdl-mega-footer__bottom-section">
  94. ...
  95. </div>
  96. </footer>
  97. ```
  98. &nbsp;3b. Add the appropriate MDL classes to the two "inner" drop-down divs using the `class` attribute.
  99. ```html
  100. <footer class="mdl-mega-footer">
  101. <div class="mdl-mega-footer__top-section">
  102. <div class="mdl-mega-footer__left-section">
  103. ...
  104. </div>
  105. <div class="mdl-mega-footer__right-section">
  106. ...
  107. </div>
  108. </div>
  109. <div class="mdl-mega-footer__middle-section">
  110. <div class="mdl-mega-footer__drop-down-section">
  111. ...
  112. </div>
  113. <div class="mdl-mega-footer__drop-down-section">
  114. ...
  115. </div>
  116. </div>
  117. <div class="mdl-mega-footer__bottom-section">
  118. ...
  119. </div>
  120. </footer>
  121. ```
  122. &nbsp;4a. Inside the bottom section div, code an "inner" div for the section heading and a sibling unordered list for the bottom section links.
  123. ```html
  124. <footer class="mdl-mega-footer">
  125. <div class="mdl-mega-footer__top-section">
  126. <div class="mdl-mega-footer__left-section">
  127. ...
  128. </div>
  129. <div class="mdl-mega-footer__right-section">
  130. ...
  131. </div>
  132. </div>
  133. <div class="mdl-mega-footer__middle-section">
  134. <div class="mdl-mega-footer__drop-down-section">
  135. ...
  136. </div>
  137. <div class="mdl-mega-footer__drop-down-section">
  138. ...
  139. </div>
  140. </div>
  141. <div class="mdl-mega-footer__bottom-section">
  142. <div>
  143. ...
  144. </div>
  145. <ul>
  146. ...
  147. </ul>
  148. </div>
  149. </footer>
  150. ```
  151. &nbsp;4b. Add the appropriate MDL classes to the "inner" div heading and list using the `class` attribute.
  152. ```html
  153. <footer class="mdl-mega-footer">
  154. <div class="mdl-mega-footer__top-section">
  155. <div class="mdl-mega-footer__left-section">
  156. ...
  157. </div>
  158. <div class="mdl-mega-footer__right-section">
  159. ...
  160. </div>
  161. </div>
  162. <div class="mdl-mega-footer__middle-section">
  163. <div class="mdl-mega-footer__drop-down-section">
  164. ...
  165. </div>
  166. <div class="mdl-mega-footer__drop-down-section">
  167. ...
  168. </div>
  169. </div>
  170. <div class="mdl-mega-footer__bottom-section">
  171. <div class="mdl-logo">
  172. </div>
  173. <ul class="mdl-mega-footer__link-list">
  174. ...
  175. </ul>
  176. </div>
  177. </footer>
  178. ```
  179. &nbsp;5. Add content to the top (left and right), middle (drop-downs), and bottom (text and links) sections of the footer; include any appropriate MDL classes using the `class` attribute.
  180. ```html
  181. <footer class="mdl-mega-footer">
  182. <div class="mdl-mega-footer__top-section">
  183. <div class="mdl-mega-footer__left-section">
  184. <button class="mdl-mega-footer__social-btn"></button>
  185. <button class="mdl-mega-footer__social-btn"></button>
  186. <button class="mdl-mega-footer__social-btn"></button>
  187. </div>
  188. <div class="mdl-mega-footer__right-section">
  189. <a href="">Link 1</a>
  190. <a href="">Link 2</a>
  191. <a href="">Link 3</a>
  192. </div>
  193. </div>
  194. <div class="mdl-mega-footer__middle-section">
  195. <div class="mdl-mega-footer__drop-down-section">
  196. <h1 class="mdl-mega-footer__heading">Drop-down 1 Heading</h1>
  197. <ul class="mdl-mega-footer__link-list">
  198. <li><a href="">Link A</a></li>
  199. <li><a href="">Link B</a></li>
  200. <li><a href="">Link C</a></li>
  201. <li><a href="">Link D</a></li>
  202. </ul>
  203. </div>
  204. <div class="mdl-mega-footer__drop-down-section">
  205. <h1 class="mdl-mega-footer__heading">Drop-down 2 Heading</h1>
  206. <ul class="mdl-mega-footer__link-list">
  207. <li><a href="">Link A</a></li>
  208. <li><a href="">Link B</a></li>
  209. <li><a href="">Link C</a></li>
  210. </ul>
  211. </div>
  212. </div>
  213. <div class="mdl-mega-footer__bottom-section">
  214. <div class="mdl-logo">
  215. Mega-Footer Bottom Section Heading
  216. </div>
  217. <ul class="mdl-mega-footer__link-list">
  218. <li><a href="">Link A</a></li>
  219. <li><a href="">Link B</a></li>
  220. </ul>
  221. </div>
  222. </footer>
  223. ```
  224. The mega-footer component is ready for use.
  225. #### Examples
  226. A mega-footer component with three sections and two drop-down sections in the middle section.
  227. ```html
  228. <footer class="mdl-mega-footer">
  229. <div class="mdl-mega-footer__top-section">
  230. <div class="mdl-mega-footer__left-section">
  231. <button class="mdl-mega-footer__social-btn"></button>
  232. <button class="mdl-mega-footer__social-btn"></button>
  233. <button class="mdl-mega-footer__social-btn"></button>
  234. </div>
  235. <div class="mdl-mega-footer__right-section">
  236. <a href="#">Introduction</a>
  237. <a href="#">App Status Dashboard</a>
  238. <a href="#">Terms of Service</a>
  239. </div>
  240. </div>
  241. <div class="mdl-mega-footer__middle-section">
  242. <div class="mdl-mega-footer__drop-down-section">
  243. <h1 class="mdl-mega-footer__heading">Learning and Support</h1>
  244. <ul class="mdl-mega-footer__link-list">
  245. <li><a href="#">Resource Center</a></li>
  246. <li><a href="#">Help Center</a></li>
  247. <li><a href="#">Community</a></li>
  248. <li><a href="#">Learn with Google</a></li>
  249. <li><a href="#">Small Business Community</a></li>
  250. <li><a href="#">Think Insights</a></li>
  251. </ul>
  252. </div>
  253. <div class="mdl-mega-footer__drop-down-section">
  254. <h1 class="mdl-mega-footer__heading">Just for Developers</h1>
  255. <ul class="mdl-mega-footer__link-list">
  256. <li><a href="#">Google Developers</a></li>
  257. <li><a href="#">AdWords API</a></li>
  258. <li><a href="#">AdWords Scipts</a></li>
  259. <li><a href="#">AdWords Remarketing Tag</a></li>
  260. </ul>
  261. </div>
  262. </div>
  263. <div class="mdl-mega-footer__bottom-section">
  264. <div class="mdl-logo">
  265. More Information
  266. </div>
  267. <ul class="mdl-mega-footer__link-list">
  268. <li><a href="#">Help</a></li>
  269. <li><a href="#">Privacy and Terms</a></li>
  270. </ul>
  271. </div>
  272. </footer>
  273. ```
  274. ### To include an MDL **mini-footer** component:
  275. &nbsp;1a. Code a `<footer>` element. Inside the footer, code two `<div>` elements, one for the *left* section and one for the *right* section.
  276. ```html
  277. <footer>
  278. <div>
  279. ...
  280. </div>
  281. <div>
  282. ...
  283. </div>
  284. </footer>
  285. ```
  286. &nbsp;1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
  287. ```html
  288. <footer class="mdl-mini-footer">
  289. <div class="mdl-mini-footer__left-section">
  290. ...
  291. </div>
  292. <div class="mdl-mini-footer__right-section">
  293. ...
  294. </div>
  295. </footer>
  296. ```
  297. &nbsp;2a. Inside the left section div, code an "inner" div for the section heading and a sibling unordered list for the left section links.
  298. ```html
  299. <footer class="mdl-mini-footer">
  300. <div class="mdl-mini-footer__left-section">
  301. <div>
  302. ...
  303. </div>
  304. <ul>
  305. ...
  306. </ul>
  307. </div>
  308. <div class="mdl-mini-footer__right-section">
  309. ...
  310. </div>
  311. </footer>
  312. ```
  313. &nbsp;2b. Add the appropriate MDL classes to the "inner" div and list using the `class` attribute.
  314. ```html
  315. <footer class="mdl-mini-footer">
  316. <div class="mdl-mini-footer__left-section">
  317. <div class="mdl-logo">
  318. ...
  319. </div>
  320. <ul class="mdl-mini-footer__link-list">
  321. ...
  322. </ul>
  323. </div>
  324. <div class="mdl-mini-footer__right-section">
  325. ...
  326. </div>
  327. </footer>
  328. ```
  329. &nbsp;3. Add content to the left (text and links) and right (text or decoration) sections of the footer; include any appropriate MDL classes using the `class` attribute.
  330. ```html
  331. <footer class="mdl-mini-footer">
  332. <div class="mdl-mini-footer__left-section">
  333. <div class="mdl-logo">
  334. Mini-footer Heading
  335. </div>
  336. <ul class="mdl-mini-footer__link-list">
  337. <li><a href="">Link 1</a></li>
  338. <li><a href="">Link 2</a></li>
  339. <li><a href="">Link 3</a></li>
  340. </ul>
  341. </div>
  342. <div class="mdl-mini-footer__right-section">
  343. <button class="mdl-mini-footer__social-btn"></button>
  344. <button class="mdl-mini-footer__social-btn"></button>
  345. <button class="mdl-mini-footer__social-btn"></button>
  346. </div>
  347. </footer>
  348. ```
  349. The mini-footer component is ready for use.
  350. #### Examples
  351. A mini-footer with left and right sections.
  352. ```html
  353. <footer class="mdl-mini-footer">
  354. <div class="mdl-mini-footer__left-section">
  355. <div class="mdl-logo">
  356. More Information
  357. </div>
  358. <ul class="mdl-mini-footer__link-list">
  359. <li><a href="#">Help</a></li>
  360. <li><a href="#">Privacy and Terms</a></li>
  361. <li><a href="#">User Agreement</a></li>
  362. </ul>
  363. </div>
  364. <div class="mdl-mini-footer__right-section">
  365. <button class="mdl-mini-footer__social-btn"></button>
  366. <button class="mdl-mini-footer__social-btn"></button>
  367. <button class="mdl-mini-footer__social-btn"></button>
  368. </div>
  369. </footer>
  370. ```
  371. ## Configuration options
  372. The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.
  373. | MDL class | Effect | Remarks |
  374. |-----------|--------|---------|
  375. | `mdl-mega-footer` | Defines container as an MDL mega-footer component | Required on footer element |
  376. | `mdl-mega-footer__top-section` | Defines container as a footer top section | Required on top section "outer" div element |
  377. | `mdl-mega-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
  378. | `mdl-mega-footer__social-btn` | Defines a decorative square within mega-footer | Required on button element (if used) |
  379. | `mdl-mega-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
  380. | `mdl-mega-footer__middle-section` | Defines container as a footer middle section | Required on middle section "outer" div element |
  381. | `mdl-mega-footer__drop-down-section` | Defines container as a drop-down (vertical) content area | Required on drop-down "inner" div elements |
  382. | `mdl-mega-footer__heading` | Defines a heading as a mega-footer heading | Required on h1 element inside drop-down section |
  383. | `mdl-mega-footer__link-list` | Defines an unordered list as a drop-down (vertical) list | Required on ul element inside drop-down section |
  384. | `mdl-mega-footer__bottom-section` | Defines container as a footer bottom section | Required on bottom section "outer" div element |
  385. | `mdl-logo` | Defines a container as a styled section heading | Required on "inner" div element in mega-footer bottom-section or mini-footer left-section |
  386. | `mdl-mini-footer` | Defines container as an MDL mini-footer component | Required on footer element |
  387. | `mdl-mini-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
  388. | `mdl-mini-footer__link-list` | Defines an unordered list as an inline (horizontal) list | Required on ul element sibling to "mdl-logo" div element |
  389. | `mdl-mini-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
  390. | `mdl-mini-footer__social-btn` | Defines a decorative square within mini-footer | Required on button element (if used) |