|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 7 | + <link |
| 8 | + rel="icon" |
| 9 | + href="https://cdn.glitch.com/debd1c70-ac8e-4e71-8734-0f5c6b32b1f2%2Fpixil-frame-0%20(6).ico?v=1610406373086" |
| 10 | + type="image/x-icon" |
| 11 | + /> |
| 12 | + <title>Docs</title> |
| 13 | + |
| 14 | + <!-- import the webpage's stylesheet --> |
| 15 | + <link rel="stylesheet" href="https://hypercss.glitch.me/dev/hyper.css" /> |
| 16 | + <link rel="stylesheet" href="https://hypercss.glitch.me/css/config.css" /> |
| 17 | + |
| 18 | + <!-- import the webpage's javascript file --> |
| 19 | + <script src="/js/main.js" defer></script> |
| 20 | + </head> |
| 21 | + <body class="t-monospace b-grey-10 t-grey-100"> |
| 22 | + <div class="nav pos-sticky"> |
| 23 | + <h1 |
| 24 | + class="t-center t-en hover-t-grey-90 crs-pointer" |
| 25 | + onclick="window.location = '/'" |
| 26 | + > |
| 27 | + HyperCSS docs |
| 28 | + </h1> |
| 29 | + </div> |
| 30 | + <div class="grid c-bw-2 bd-grey-100"> |
| 31 | + <div |
| 32 | + class="grid-md-10 grid-lg-10 sm-hidden xs-hidden c-bw-1 bd-grey-100 p-sm" |
| 33 | + > |
| 34 | + <h2> |
| 35 | + Contents |
| 36 | + </h2> |
| 37 | + <a href="../docs" class="t-plain t-bold">Getting Started</a> |
| 38 | + <br /> |
| 39 | + <br /> |
| 40 | + <a href="../docs/classes-and-terms" class="t-plain t-bold " |
| 41 | + >Classes and Terms</a |
| 42 | + > |
| 43 | + <br /> |
| 44 | + <br /> |
| 45 | + <a href="../docs/grid-setup" class="t-plain t-bold t-italic" |
| 46 | + >Grid Setup</a |
| 47 | + > |
| 48 | + <br> |
| 49 | + <br> |
| 50 | + <a href="../docs/customization" class="t-plain t-bold">Customization</a> |
| 51 | + </div> |
| 52 | + |
| 53 | + <div class="grid-md-50 grid-lg-50 grid-sm-60 grid-xs-60 p-sm"> |
| 54 | + <div class="p-md t-ml"> |
| 55 | + <h1> |
| 56 | + Grid Setup |
| 57 | + </h1> |
| 58 | + <h2> |
| 59 | + 60 Columns |
| 60 | + </h2> |
| 61 | + <p> |
| 62 | + The Hyper grid system has 60 columns. This allows you to have 1 |
| 63 | + grids, 2 grids, 3 grids, 4 grids, 5 grids, 6 grids, 10 grids, 12 |
| 64 | + grids, and more. The syntax is pretty easy. |
| 65 | + </p> |
| 66 | + <h2> |
| 67 | + Syntax |
| 68 | + </h2> |
| 69 | + <p> |
| 70 | + The grid system uses 4 sizes: xs (phones), sm (tablets), md (pc's), |
| 71 | + and lg (desktop large screens). Using these, you can choose how the |
| 72 | + grid works on all devices. |
| 73 | + </p> |
| 74 | + <br /> |
| 75 | + <p> |
| 76 | + Since the grid has 60 columns, make sure your columns for each row |
| 77 | + add up to 60. To add a grid, add each grid using the grid class for |
| 78 | + the container. Then, each piece of the grid has a class |
| 79 | + grid-<device>-<length> So let's take our HTML document, |
| 80 | + and try this out. |
| 81 | + </p> |
| 82 | + <div class="p-sm b-grey-50 t-grey-0 t-monospace rd-ms t-break"> |
| 83 | + <p><html></p> |
| 84 | + <p> <head></p> |
| 85 | + <p> |
| 86 | + <title>My First HyperCSS |
| 87 | + Document</title> |
| 88 | + </p> |
| 89 | + <p> |
| 90 | + <link |
| 91 | + rel="stylesheet" |
| 92 | + href="https://hypercss.glitch.me/archives/hyper.css"> |
| 93 | + </p> |
| 94 | + <p> </head></p> |
| 95 | + <p> <body class="t-sans-serif"></p> |
| 96 | + <p> |
| 97 | + <div class="grid"> |
| 98 | + </p> |
| 99 | + <p> |
| 100 | + <div class="t-hg grid-md-20 grid-lg-20 grid-sm-30 grid-xs-30">This is |
| 101 | + my first HyperCSS document</div> |
| 102 | + </p> |
| 103 | + <p> |
| 104 | + <div class="t-ms grid-md-40 grid-lg-40 grid-sm-30 grid-xs-30">Isn't |
| 105 | + that cool?</div> |
| 106 | + </p> |
| 107 | + <p> </body></p> |
| 108 | + <p></html></p> |
| 109 | + </div> |
| 110 | + <p> |
| 111 | + <a href="https://codepen.io/bluephoenix37/pen/eYdLogW" target="_blank">View Codepen Demo</a> |
| 112 | + </p> |
| 113 | + <h2> |
| 114 | + Other things to do with the grid |
| 115 | + </h2> |
| 116 | + <p> |
| 117 | + If you want the same grid for all device sides, and you don't want to have to type out everything, simply use grid-length without |
| 118 | + the device inbetween, and that will stay the same grid for every device; |
| 119 | + </p> |
| 120 | + <p> |
| 121 | + Also, if you want to hide or show certain items on devices, use <device>-hidden or <device>-show. |
| 122 | + </p> |
| 123 | + <a href="../docs/grid-setup">Getting Started with grid</a> |
| 124 | + </div> |
| 125 | + </div> |
| 126 | + </div> |
| 127 | + </body> |
| 128 | +</html> |
0 commit comments