├── .gitignore ├── CONTRIBUTING.md ├── README.md ├── examples ├── buttons.html ├── debug-grid.html ├── image-placeholder.html ├── nav-menu.html └── typography.html ├── index.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (https://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | package-lock.json 39 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | **Please read** our 2 | [**contribution guide**](https://github.com/dwyl/contributing) 3 | (_thank you_!). 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Learn Tachyons [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat-square)](https://github.com/dwyl/learn-tachyons/issues) [![HitCount](https://hits.dwyl.com/dwyl/learn-tachyons.svg?style=flat-square)](https://hits.dwyl.com/dwyl/learn-tachyons) 2 | 3 | ![tachyons-intro-image](https://cloud.githubusercontent.com/assets/194400/25710569/87726714-30e4-11e7-9532-4a447bd61629.png) 4 | 5 | _**Learn** how to use **Tachyons** 6 | to **craft beautiful, 100% responsive, 7 | functional** and **fast User Interface/Experience** (UI/UX) 8 | with **minimal CSS** 9 | in **much less time**._ 10 | 11 | 12 | - [_Why_?](#why) 13 | - [_One Minute Summary_](#one-minute-summary) 14 | - [What?](#what) 15 | - [What is _Different_?](#what-is-different) 16 | - [_Bootstrap_ Custom Button (_The Old Way_!)](#bootstrap-custom-button-the-old-way) 17 | - [_Tachyons_ Custom Button (_New Way_!)](#tachyons-custom-button-new-way) 18 | - [What is "_Functional_" CSS?](#what-is-functional-css) 19 | - [Functional CSS is:](#functional-css-is) 20 | - [Functional :innocent:](#functional-innocent) 21 | - [Composable :musical_score: :notes: :musical_keyboard:](#composable-musical_score-notes-musical_keyboard) 22 | - [Immutable :gem: :gem: :gem:](#immutable-gem-gem-gem) 23 | - [Why Tachyons?](#why-tachyons) 24 | - [Easy to Understand and Use](#easy-to-understand-and-use) 25 | - [_Mobile First_ Responsive Design](#mobile-first-responsive-design) 26 | - [Accessibility](#accessibility) 27 | - [A Natural Workflow](#a-natural-workflow) 28 | - [Works well with component based UIs](#works-well-with-component-based-uis) 29 | - [Great Performance that Scales](#great-performance-that-scales) 30 | - [_How_?](#how) 31 | - [Try _Before_ You Commit (3 Easy Steps)](#try-before-you-commit-3-easy-steps) 32 | - [In your Own Project](#in-your-own-project) 33 | - [Learning the ropes](#learning-the-ropes) 34 | - [Responsive modifiers](#responsive-modifiers) 35 | - [Typography](#typography) 36 | - [Layout](#layout) 37 | - [Theming](#theming) 38 | + [Image Placeholder Example](#how-to-create-an-image-placeholder) 39 | + [Responsive Navigation Menu Example](#responsive-navigation-menu) 40 | - [Resources](#resources) 41 | - [Articles](#articles) 42 | - [Questions and Discussions](#questions-and-discussions) 43 | - [Future of Tachyons](#future-of-tachyons) 44 | 45 | 46 | ## _Why_? 47 | 48 | The User Interface (UI) or User Experience (UX) 49 | is the part of your application that 50 | the ***people*** ("_end users_") 51 | _**see** and **interact** with_. 52 | Ensuring that the **UI/UX** is the _**best** it **can be**_, 53 | is _easily_ the ***top priority*** for our Web/Mobile projects. 54 | 55 | Without ~~good~~ ***great UI/UX*** 56 | ["_**nothing `else` matters**_"](https://youtu.be/tAGnKpE4NCI) 57 | to the person _using_ your app.
58 | The **UI/UX** is what _**matters**_, 59 | **not** the **programming language**, 60 | what type of **server**, 61 | which "***front-end framework***" 62 | or "**backend infrastructure**" you are using; 63 | ***Nobody cares*** about the "_boring technical details_", 64 | they _only_ care about their **own _experience_** using the app/website. 65 | 66 | ![image](https://cloud.githubusercontent.com/assets/194400/25721528/adec307c-3108-11e7-8f66-10edae56e6f0.png) 67 | 68 | ### _One Minute Summary_ 69 | 70 | Through _experience_ 71 | (_building **many web/mobile** apps large and small 72 | in teams ranging from 2 - **200 people**_), 73 | we have found that: 74 | + _**Hand-writing CSS**_ is _very **time-consuming** and **repetitive**_! 75 | + Using (_most_) CSS "_frameworks_" results in: 76 | + Lots of **Duplication** _where people re-create styles over-and-over_ 77 | + "**_Zombie_ Code**" _unused styles that nobody will risk removing_ 78 | + **Bloated** apps/sites that take _much_ longer 79 | to develop, load and maintain than they _need_ to. 80 | + **_Functional_ CSS** _ensures_: 81 | + UI is **100% _Predictable_, Consistent** 82 | and _free from_ (_unwanted_) "***Side Effects***" 83 | (_where a change in one place "breaks" something else!_) 84 | + It's ***immediately clear*** from reading ***one*** 85 | block of code what the component _does_ and what it looks like. 86 | + **_Updates_** to UI are made in ***One Place/File***. (_see diagram below_) 87 | + **Time** to _develop_ your App's UI ***scales proportionally*** 88 | instead of increasing ***exponentially*** the way it does with 89 | most "traditional" CSS frameworks. 90 | + The moment you want anything "_custom_" most CSS frameworks 91 | let you down _badly_ because you have to "_override_", 92 | Tachyons is _made_ for helping you to use your imagination! 93 | The resulting UI will be ***much less code***, 94 | load ***considerably faster*** and be ***far easier to maintain***! 95 | 96 | Tachyons lets you avoid the "_CSS Fire_": 97 | 98 | [![image](https://cloud.githubusercontent.com/assets/194400/25718602/9a99b3be-30fe-11e7-9462-758cef9cbe1d.png)](https://twitter.com/iamdevloper/status/753716544949981184 "CSS is easy? - click to see original tweet") 99 | 100 | > Extended discussion on the pros/cons of 101 | Functional CSS & Tachyons:
102 | https://github.com/dwyl/learn-tachyons/issues/1 103 | 104 | ## What? 105 | 106 | ![what-section-header](https://cloud.githubusercontent.com/assets/194400/25721712/64ec964a-3109-11e7-8395-05d928091c5c.png) 107 | 108 | Tachyons is a **CSS _Design System_** anyone can learn/use 109 | to craft beautiful, responsive & fast UIs with minimal CSS! 110 | Tachyons has ***all*** the ***building blocks*** 111 | you (_your team_) need(s) to 112 | [_build **anything** you can **imagine**_](https://youtu.be/Um-PlX6oPBQ?t=12s "The LEGO Movie Scene: I am a Master Builder!"). 113 | 114 | Tachyons embraces a different style than many popular CSS 115 | frameworks known as "***Functional CSS***". 116 | 117 | ### What is _Different_? 118 | 119 | When you use the Bootstrap `primary` button class in your web app, 120 | it _looks_ simple enough on the surface, 121 | you simply add the class to your HTML markup. 122 | Following the example on: 123 | https://getbootstrap.com/docs/4.0/components/buttons/ 124 | 125 | ```hmtl 126 | 127 | ``` 128 | 129 | ![btn](https://cloud.githubusercontent.com/assets/14013616/20070844/eec73158-a519-11e6-9011-5b8cc14f73ac.png) 130 | 131 | Here's is the CSS for that bootstrap `primary` button: 132 | 133 | ```css 134 | .btn-primary { 135 | color: #fff; 136 | background-color: #337ab7; 137 | border-color: #2e6da4; 138 | } 139 | 140 | .btn { 141 | display: inline-block; 142 | padding: 6px 12px; 143 | margin-bottom: 0; 144 | font-size: 14px; 145 | font-weight: 400; 146 | line-height: 1.42857143; /* who needs this level of decimal precision in CSS?! */ 147 | text-align: center; 148 | white-space: nowrap; 149 | vertical-align: middle; 150 | -ms-touch-action: manipulation; 151 | touch-action: manipulation; 152 | cursor: pointer; 153 | -webkit-user-select: none; 154 | -moz-user-select: none; 155 | -ms-user-select: none; 156 | user-select: none; 157 | background-image: none; 158 | border: 1px solid transparent; 159 | border-radius: 4px; 160 | } 161 | ``` 162 | Visit: https://getbootstrap.com/css/#buttons 163 | (_open your "dev tools"_) then inspect one of the buttons 164 | and see for yourself: 165 | ![image](https://cloud.githubusercontent.com/assets/194400/25717024/190df58a-30f9-11e7-8d14-522a3d3853a1.png "Twitter Bootstrap buttons - click to enlarge") 166 | 167 | 168 | What a _monolith_! There are a _lot_ of CSS attributes there;
169 | Bootstrap is quite ***opinionated*** about how a button should 170 | look and function. 171 | 172 | If you want to change/customise any aspect 173 | of the button 174 | (_e.g: [font](https://www.cssfontstack.com/Helvetica) or 175 | [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)_), 176 | you will need to: 177 | 1. Create a new class in your `app.css` file 178 | (_or whatever your project calls it_) 179 | 2. Define the CSS styles for that custom attribute, e.g: 180 | ```css 181 | .custom-btn-purple-helvetica { 182 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 183 | color: #800080; /* wikipedia.org/wiki/The_Color_Purple */ 184 | } 185 | ``` 186 | 3. Add the CSS class to the instance of the button you created. 187 | ```html 188 | 190 | ``` 191 | This 3-step process is slow and _always_ ends up with more 192 | CSS than if you used pre-existing Tachyons classes. (_see below_) 🌈 193 | 194 | ### _Bootstrap_ Custom Button (_The Old Way_!) 195 | 196 | What if we wanted a button that looks a little different? 197 | We'd most likely need to add another class. e.g: 198 | 199 | ```html 200 | 201 | ``` 202 | Which requires us to write quite a lot of custom CSS: 203 | 204 | ```css 205 | .btn-dwyl { 206 | background-color: #46B6AC; 207 | border-color: #46B6AC; 208 | padding: 10px; 209 | text-transform: uppercase; 210 | letter-spacing: 4px; 211 | font-weight: 300; 212 | } 213 | ``` 214 | 215 | ![btn-dwyl](https://cloud.githubusercontent.com/assets/14013616/20138059/1501dfb4-a676-11e6-8c74-750b5be89d88.png) 216 | 217 | ### _Tachyons_ Custom Button (_New Way_!) 218 | 219 | Tachyons approaches this with `single utility classes` 220 | (classes that do one thing).
221 | These `single utility classes` encourage 222 | a different way of building UI:
223 | all code is in a single place 224 | the `html`, not the `stylesheet`: 225 | 226 | ```html 227 | 228 | ``` 229 | 230 | Each class has one responsibility: 231 | + `bw0` - "border width 0" see: 232 | + `br2` - "border radius 2" see: 233 | + `bg-dwyl-teal` - "background color dwyl teal" (_this is an example of a custom color_) 234 | + `pa2` - "padding all 2" 235 | + `white` - "text color white" 236 | + `fw1` - "font weight 1" 237 | + `tc` - "text align center" 238 | + `ttu` - "text transform uppercase" 239 | + `tracked` - "with letter spacing" 240 | 241 | see: `/examples/buttons.html` 242 | 243 | **Note**: Tachyons does not have _all_-the-colors, 244 | hence we had to define our own. 245 | However given that there is a clear format for defining colors 246 | we defined our own as `bg-dwyl-teal`: 247 | ```css 248 | .bg-dwyl-teal { 249 | background-color: #4DB6AC; 250 | } 251 | ``` 252 | This is "_OK_" because it's still a _single-purpose_ class 253 | that we can _re-use_ for any elements that require the teal background. 254 | 255 | ### What is "_Functional_" CSS? 256 | 257 | ![fcss](https://cloud.githubusercontent.com/assets/194400/25721674/33bc13ac-3109-11e7-89a6-b8f09f0f4417.png) 258 | 259 | 260 | You may be thinking: 261 | + How _exactly_ does this make my CSS better? 262 | + Why use this approach when CSS has been written 263 | like the bootstrap example for years? 264 | + Isn't this just like using inline styles? 265 | ([considered by many to be bad practice in CSS](https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css)) 266 | + Won't I end up _repeating myself_ in the HTML? 267 | 268 | Let's have a look at some of the core features 269 | and ideas of `Functional CSS` and see if we can 270 | answer some of those questions. 271 | 272 | ## Functional CSS is: 273 | 274 | ### Functional :innocent: 275 | 276 | Small, clear, easy to read classes that 277 | are easy to apply and do _one_ thing.
278 | Having small classes means it's easy to make 279 | a set of **consistent spacing and type 280 | rules** - you end up forcing a beautiful type 281 | scale & rhythm on your design. 282 | 283 | > "_**Good design** (my preferred school of 284 | good design, at least) is **mathsy**, 285 | **rational** and **pure** —and CSS is design— so it 286 | follows that there are a bunch of lessons 287 | we can bring back from FP land into design_." - 288 | [Jon Gold](https://www.jon.gold/2015/07/functional-css) Front-End Wizard @ AirBnB 289 | 290 | ### Composable :musical_score: :notes: :musical_keyboard: 291 | 292 | In Functional Programming you combine (or compose) a bunch of tiny functions together to do bigger things (like lots of notes to make music!). You end up reusing a lot of your code which is great for **performance and consistency**! Just like the button example: 293 | 294 | ```html 295 | 14 | 15 | 20 | 
21 |       <button class="">
22 |       do what you love
23 |       </button>
24 |
25 | 26 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/debug-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tachyons Tutorial 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hello World!

14 |
15 |
16 |

If you need inspiration getting started with learning Tachyons, 17 | check the Component Guide 18 |

19 |
20 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/image-placeholder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Placeholder Example 7 | 8 | 9 | 10 | 11 | 12 |

Image Placeholder

13 | 14 |
16 | Placeholder Image - Please upload an appropriate one. 19 |

This is a placeholder image.
20 | Please upload a more relevant one. Ideal dimensions:
21 | Width: 800 pixels, Height: 300 pixels. 22 |

23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /examples/nav-menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Image Placeholder Example 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 41 | 42 | 43 | 54 |
55 |

Responsive CSS Only "Burger" Navigation Menu

56 |

57 | Responsive Web Design (RWD) is an approach to web design 58 | that makes web pages render well on a variety of devices 59 | and window or screen sizes. 60 | Content, design and performance are necessary 61 | across all devices to ensure usability and satisfaction. 62 | 64 | wikipedia.org/wiki/Responsive_web_design 65 |

66 | 67 |

68 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, 69 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 70 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 71 | nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 72 | in reprehenderit in voluptate velit esse cillum dolore eu fugiat 73 | nulla pariatur. Excepteur sint occaecat cupidatat non proident, 74 | sunt in culpa qui officia deserunt mollit anim id est laborum. 75 |

76 | 77 |

78 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem 79 | accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 80 | quae ab illo inventore veritatis et quasi architecto beatae vitae 81 | dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 82 | sit aspernatur aut odit aut fugit, sed quia consequuntur magni 83 | dolores eos qui ratione voluptatem sequi nesciunt. Neque porro 84 | quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, 85 | adipisci velit, sed quia non numquam eius modi tempora incidunt 86 | ut labore et dolore magnam aliquam quaerat voluptatem. 87 | Ut enim ad minima veniam, quis nostrum exercitationem ullam 88 | corporis suscipit laboriosam, nisi ut aliquid ex ea commodi 89 | consequatur? Quis autem vel eum iure reprehenderit qui in ea 90 | voluptate velit esse quam nihil molestiae consequatur, vel illum 91 | qui dolorem eum fugiat quo voluptas nulla pariatur?" 92 |

93 |
94 | 95 | 96 | 114 | 115 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /examples/typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tachyons Tutorial 7 | 8 | 9 | 10 | 11 | 12 |

Tachyons

13 |

CSS for designing faster than the speed of light

14 | 15 |
16 |

17 | Built for designing. 18 |

19 |

20 | Create fast loading, highly readable, and 100%
21 | responsive interfaces with as little css as possible. 22 |

23 |
24 | 25 |
26 |

27 | ƒ · css 28 |

29 |
30 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tachyons Tutorial 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hello World!

14 |
15 |
16 |

If you need inspiration getting started with learning Tachyons, 17 | check the Component Guide 18 |

19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "learn-tachyons", 3 | "description": "Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS!", 4 | "version": "4.6.1", 5 | "homepage": "https://github.com/dwyl/learn-tachyons", 6 | "main": "index.html", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/dwyl/learn-tachyons.git" 10 | }, 11 | "author": "Andrew MacMurray @andrewMacmurray, @dwyl & friends!", 12 | "devDependencies": { 13 | "live-server": "^1.2.0" 14 | }, 15 | "scripts": { 16 | "start": "live-server --port=8000" 17 | }, 18 | "keywords": [ 19 | "mobile first", 20 | "beautiful", 21 | "functional", 22 | "fast", 23 | "CSS", 24 | "style", 25 | "styles", 26 | "learn", 27 | "beginner", 28 | "tutorial", 29 | "how to" 30 | ], 31 | "license": "ISC" 32 | } 33 | --------------------------------------------------------------------------------