-
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
/* | |
Go on your labels page (https://github.com/user/repo/labels) | |
Edit the following label array | |
or | |
Use this snippet to export github labels (https://gist.github.com/MoOx/93c2853fee760f42d97f) | |
and replace it | |
Paste this script in your console | |
Press Enter!! |
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
// go on you labels pages | |
// eg https://github.com/cssnext/cssnext/labels | |
// paste this script in your console | |
// copy the output and now you can import it using https://github.com/popomore/github-labels ! | |
var labels = []; | |
[].slice.call(document.querySelectorAll(".label-link")) | |
.forEach(function(element) { | |
labels.push({ | |
name: element.textContent.trim(), |
This means, on your local machine, you haven't made any SSH keys. Not to worry. Here's how to fix:
- Open git bash (Use the Windows search. To find it, type "git bash") or the Mac Terminal. Pro Tip: You can use any
*nix
based command prompt (but not the default Windows Command Prompt!) - Type
cd ~/.ssh
. This will take you to the root directory for Git (LikelyC:\Users\[YOUR-USER-NAME]\.ssh\
on Windows) - Within the
.ssh
folder, there should be these two files:id_rsa
andid_rsa.pub
. These are the files that tell your computer how to communicate with GitHub, BitBucket, or any other Git based service. Typels
to see a directory listing. If those two files don't show up, proceed to the next step. NOTE: Your SSH keys must be namedid_rsa
andid_rsa.pub
in order for Git, GitHub, and BitBucket to recognize them by default. - To create the SSH keys, type
ssh-keygen -t rsa -C "[email protected]"
. Th