-
When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
-
Always use fewer utility classes when possible. For example, use
mx-2
instead ofml-2 mr-2
and don't be afraid to use the simplerp-4 lg:pt-8
instead of the longer, more complicatedpt-4 lg:pt-8 pr-4 pb-4 pl-4
. -
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use
block lg:flex lg:flex-col lg:justify-center
instead ofblock lg:flex flex-col justify-center
to make it very clear that the flexbox utilities are only applicable at the
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
0px 0rem .p-0 | |
4px 0.25rem .p-1 | |
8px 0.5rem .p-2 | |
12px 0.75rem .p-3, .leading-3, .text-xs | |
14px 0.875rem .text-sm | |
16px 1rem .p-4, .leading-4, .text-base | |
18px 1.125rem .text-lg | |
20px 1.25rem .p-5, .leading-5, .text-xl | |
24px 1.5rem .p-6, .leading-6, .text-2xl | |
28px 1.75rem .leading-7 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/bin/bash | |
# Copyright © 2017 Google Inc. | |
# Licensed under the Apache License, Version 2.0 (the "License"); | |
# you may not use this file except in compliance with the License. | |
# You may obtain a copy of the License at | |
# | |
# http://www.apache.org/licenses/LICENSE-2.0 | |
# | |
# Unless required by applicable law or agreed to in writing, software |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
echo "Creating an SSH key for you..." | |
ssh-keygen -t rsa | |
echo "Please add this public key to Github \n" | |
echo "https://github.com/account/ssh \n" | |
read -p "Press [Enter] key after this..." | |
echo "Installing xcode-stuff" | |
xcode-select --install |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Select2 editor for backboneforms | |
* https://gist.github.com/fonji/5f5a71cf247fcb9e4098 | |
* | |
* Renders Select2 - jQuery based replacement for select boxes | |
* Based on: | |
* https://gist.github.com/jbugwadia/9303389 | |
* | |
* Usage: Works the same as Select editor, with the following extensions for Select2: | |
* schema.config: configuration object passed to Select2 |