├── LICENSE.txt ├── README.md ├── bower.json ├── fukol-demo.gif ├── fukol.css ├── logo.png └── tweet.png /LICENSE.txt: -------------------------------------------------------------------------------- 1 | ._ , 2 | (`).. ,.-') 3 | (',.)-.. ,.-(..`) 4 | (,.' ,.)-.. ,.-(. `.. ) 5 | (,.' ..' .)-.. ,.-( `.. `.. ) 6 | (,.' ,.' ..')-. ,.-( `. `.. `.. ) 7 | (,.' ,.' ,.' )-.-(' `. `.. `.. ) 8 | ( ,.' ,.' _== ==_ `.. `.. ) 9 | ( ,.' _==' ~ ~ `==_ `.. ) 10 | \ _==' ----..---- `==_ ) 11 | ,.-: ,----___. .___----. -.. 12 | ,.-' ( _--====_ \/ _====--_ ) `-.. 13 | ,.-' .__.'`. `-_I0_-' `-_0I_-' .'`.__. `-.. 14 | ,.-'.' .' ( | | ) `. `.-.. 15 | ,.-' : `___--- '`.__. / __ \ .__.' `---___' : `-.. 16 | -'_________`-____________'__ \ (O) (O) / __`____________-'________`- 17 | \ . _ __ _ . / 18 | \ `V-' `-V' | 19 | | \ \ | / / 20 | V \ ~| ~/V 21 | | \ /| 22 | \~ | V 23 | \ | 24 | VV 25 | 26 | _ _ _ _ _ _ 27 | | | | | | | (_) | | 28 | __| | ___ __ _ ___ | |_| |__ ___ _ _ __ ___| | |_ 29 | / _` |/ _ \ / _` / __| | __| '_ \ / _ \| | | | \ \ /\ / / | | __| 30 | | (_| | (_) | | (_| \__ \ | |_| | | | (_) | |_| | \ V V /| | | |_ 31 | \__,_|\___/ \__,_|___/ \__|_| |_|\___/ \__,_| \_/\_/ |_|_|\__| 32 | 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ![Fukol Grid System](logo.png) 2 | 3 | **Fukol™** is a lightweight, breakpoint free, completely responsive, element query driven\*, progressive enhancement based CSS grid framework. It exists in this `README.md` file, in the section titled **The CSS** (below). It is **93 bytes** minified, fitting comfortably inside a tweet: 4 | 5 | Fukol minified and in a tweet 6 | 7 | Just edit the lines marked 'edit me!' to your requirements and write an HTML structure like the one illustrated in the section titled **The HTML** (also below). 8 | 9 | (\* Not really, but kind of. See **3** under **Notes**, below.) 10 | 11 | ## The CSS 12 | 13 | ```css 14 | .fukol-grid { 15 | display: flex; /* 1 */ 16 | flex-wrap: wrap; /* 2 */ 17 | margin: -0.5em; /* 5 (edit me!) */ 18 | } 19 | 20 | .fukol-grid > * { 21 | flex: 1 0 5em; /* 3 (edit me!) */ 22 | margin: 0.5em; /* 4 (edit me!) */ 23 | } 24 | ``` 25 | 26 | ## The HTML 27 | 28 | ```html 29 |
30 | 40 |
41 | ``` 42 | 43 | ## Notes 44 | 45 | 1. **Fukol™** is a Flexbox based grid system. Even Opera Mini supports Flexbox. Older user agents that don't support Flexbox ignore the `display: flex` declaration, degrading to a single column layout. No harm done. 46 | 2. This line determines how items are handled. The `wrap` value means items will start a new row if there's not enough room on the current one. 47 | 3. This is the 'element query' part. Instead of setting an arbitrary number of columns and using breakpoints, we decide roughly how wide we want the item to be (`5em` in the example — the flex basis) and make sure items can grow to use the available space (`1`) but not shrink (`0`). So only change the `5em` value and leave `1 0` as it is. 48 | 4. This is for gutters. A `0.5em` margin here means gutters of `1em` (the margins double up). 49 | 5. This should always be a negative version of **4**. It compensates for the margins created by the items. It makes sure the outside of the `.fukol-grid` container remains flush horizontally and no additional margin is added to the vertical flow. 50 | 6. The `class="fukol"` container in the HTML snippet enables you to add positive margins around the grid — not possible with just `.fukol-grid` because this uses negative margins (see **5**). It also suppresses horizontal scrolling issues which occur under certain circumstances. 51 | 52 | ## Demos 53 | 54 | ### Here's a gif 55 | 56 | ![Grid items as boxes, collapsing into fewer columns at smaller viewports automatically](fukol-demo.gif) 57 | 58 | ### Play around on CodePen 59 | 60 | [codepen.io/heydon/pen/dpzwVd](http://codepen.io/heydon/pen/dpzwVd) 61 | 62 | ## Items with different widths 63 | 64 | Sometimes you want certain items to be narrower or wider. Maybe you want the fifth item to always be approximately twice the size of a regular item (where space permits). If the regular `flex-basis` is `5em`, then… 65 | 66 | ```css 67 | .fukol-grid > *:nth-child(5) { 68 | flex-basis: 10em; 69 | } 70 | ``` 71 | 72 | Don't worry, flexbox will make sure there aren't any gaps. 73 | 74 | ### Percentage widths 75 | 76 | You can choose a percentage based width for individual items, but remember to adjust for the gutter margin width by subtracting it using `calc`. For example, to make the first item 100% in width when the gutter width is `1em`, use: 77 | 78 | ```css 79 | .fukol-grid > *:first-child { 80 | flex-basis: calc(100% - 1em); 81 | } 82 | ``` 83 | 84 | **Warning:** Internet Explorer [does not respect `box-sizing`](https://github.com/philipwalton/flexbugs/issues/3#issuecomment-69036362) on `flex-basis` items. In which case, if you use percentage widths, you cannot pad the flex item directly. You will need to insert child nodes inside flex items and pad them instead. 85 | 86 | ```html 87 |
88 | 93 |
94 | ``` 95 | 96 | ## RTL Grids 97 | 98 | Flexbox supports `rtl` already. Just add `dir="rtl"` to the `.fukol-grid` element and the flex direction will automatically be reversed. 99 | 100 | ## FAQs 101 | 102 | 1. *How do I install Fukol™? Is it on bower/npm?* You install it by copy/pasting it from this `README.md` file. See the **The CSS** section above. 103 | 2. *How do I pronounce Fukol?* Fukol is pronounced "the square root of fuck all". 104 | 3. *Is Fukol™ the answer to all my grid system hopes and dreams?* No. Fukol™ is just a servicable solution, written with very little code. 105 | 4. *Why are there a load of old dicks in the Fukol™ logo? Are you some sort of misogynist?* No, fuck the patriarchy. There are a load of old dicks in Fukol™'s logo because grid systems are a load of old dicks. 106 | 5. *Is there a Sass version?* Yes: inside your head. 107 | 108 | ## That's it 109 | 110 | That's it. 111 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fukol-grids", 3 | "homepage": "https://github.com/Heydon/fukol-grids", 4 | "authors": [ 5 | "Heydon Pickering " 6 | ], 7 | "description": "A tiny, automatic, breakpoint free, 'element query' based grid system.", 8 | "main": "fukol.css", 9 | "keywords": [ 10 | "flexbox", 11 | "css", 12 | "minimal" 13 | ], 14 | "license": "see LICENSE.txt", 15 | "ignore": [ 16 | "**/.*", 17 | "node_modules", 18 | "bower_components", 19 | "test", 20 | "tests", 21 | "fukol-demo.gif", 22 | "logo.png", 23 | "README.md", 24 | "tweet.png" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /fukol-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heydon/fukol-grids/0b77a9c826cb3dc3cec07126b9c8376ea6e415c7/fukol-demo.gif -------------------------------------------------------------------------------- /fukol.css: -------------------------------------------------------------------------------- 1 | .fukol-grid { 2 | display: flex; /* 1 */ 3 | flex-wrap: wrap; /* 2 */ 4 | margin: -0.5em; /* 5 (edit me!) */ 5 | } 6 | 7 | .fukol-grid > * { 8 | flex: 1 0 5em; /* 3 (edit me!) */ 9 | margin: 0.5em; /* 4 (edit me!) */ 10 | } 11 | 12 | /* Key: 13 | 14 | 1. Fukol is a Flexbox based grid system. Even Opera Mini supports Flexbox. Older user agents that don't support Flexbox ignore the `display: flex` declaration, degrading to a single column layout. No harm done. 15 | 2. This line determines how items are handled. The `wrap` value means items will start a new row if there's not enough room on the current one. 16 | 3. This is the 'element query' part. Instead of setting an arbitrary number of columns and using breakpoints, we decide roughly how wide we want the item to be (`5em` in the example — the flex basis) and make sure items can grow to use the available space (`1`) but not shrink (`0`). So only change the `5em` value and leave `1 0` as it is. 17 | 4. This is for gutters. A `0.5em` margin here means gutters of `1em` (the margins double up). 18 | 5. This should always be a negative version of 4. It compensates for the margins created by the items. It makes sure the outside of the `.fukol-grid` container remains flush horizontally and no additional margin is added to the vertical flow. 19 | 6. The `class="fukol"` container in the HTML snippet enables you to add positive margins around the grid — not possible with just `.fukol-grid` because this uses negative margins (see 5). It also suppresses horizontal scrolling issues which occur under certain circumstances. 20 | 21 | /* 22 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heydon/fukol-grids/0b77a9c826cb3dc3cec07126b9c8376ea6e415c7/logo.png -------------------------------------------------------------------------------- /tweet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heydon/fukol-grids/0b77a9c826cb3dc3cec07126b9c8376ea6e415c7/tweet.png --------------------------------------------------------------------------------