Skip to content

Instantly share code, notes, and snippets.

View calvinjuarez's full-sized avatar
👨‍💻

Calvin Juárez calvinjuarez

👨‍💻
12 followers · 13 following
View GitHub Profile
@calvinjuarez
calvinjuarez / example-loop.css
Last active December 21, 2015 03:48
Basic LESS loop to generate as many numbered classes as necessary, extended to keep the CSS DRYer.
.example-1,
.example-2,
.example-3,
.example-4,
.example-5 {
/* stuff */
}
@calvinjuarez
calvinjuarez / git-cheat-sheet.md
Last active August 29, 2015 13:56 — forked from iansheridan/git-cheat-sheet.md

Setup

git clone <repo>

clone the repository specified by ; this is similar to "checkout" in some other version control systems such as Subversion and CVS

Add colors to your ~/.gitconfig file:

@calvinjuarez
calvinjuarez / accessor.about.md
Last active August 29, 2015 14:19
Less Value Accessors: `@{}` & `${}`

Less Value Accessors: @{} & ${}

The files here provide examples of the variable and property accessor syntax currently being discussed at [less.js#1848][#1848].

@{ #ns > var }
${ prop }
${ #ns > prop }
@calvinjuarez
calvinjuarez / comment.20150502T1630.draft.md
Last active August 29, 2015 14:20
Other symbols that Less property accessors could use, if `$` is nixed.

I think there are two questions to answer:

  1. Does the anticipated frequency of use for the Selector Function merit using a symbol over a more semantic, explicit function name?
  2. Are there any compelling arguments for either the Selector Function or the Property Accessor to use any other particular symbol, or for either to use $ specifically?

In @lukeapage's comment, he mentions that there are open issues about assigning CSS selectors to variables, which I think is in reference to #1421 & the issues referencing & referenced by it. I think that "assigning CSS selectors to variables" is likely the primary use case for a "parse this as a selector" function.

@calvinjuarez
calvinjuarez / 1-README.md
Last active May 19, 2016 20:55
Grouping Media Queries in Less with "Backwards Mixins"

Grouping Media Queries in Less with "Backwards Mixins"

backwards mixin: a mixin defined many times and called once, rather than defined once and called many times

This is a demo of one way you could use mixins to put all your media query rules together under a single @media statement. The merits of grouping media queries are dubious, but it's a good illustration of how to use backwards mixins.

How It Works

In Less, when a mixin is called it will output the results of all mixins that match the pattern established by the call.

@calvinjuarez
calvinjuarez / css-property-order.md
Created May 24, 2016 01:31
CSS Property Order

CSS Property Order

My personal CSS Property order is currently as follows.

content and other esoteric stuff
display
flex
  flex-direction
 align-items
@calvinjuarez
calvinjuarez / .gitconfig
Last active June 16, 2016 18:48
Git Alias for Listing Local or Remote Branches by Last Modified Date
[alias]
branch-latest = "! git-branch-latest() { if [[ $1 == \"-r\" ]]; then for branch in `git branch -r | grep -v HEAD`;do echo `git show -s --oneline --format=\"%Cblue%ci%Creset\" $branch | head -n 1` \"\t$branch\"; done | sort -r; else git for-each-ref --sort=-committerdate --format=\"%(color:blue)%(committerdate:iso)%(color:reset)%09%(refname:short)\" refs/heads/; fi }; git-branch-latest"
@calvinjuarez
calvinjuarez / 1-1.font-l10n.less
Last active July 26, 2016 19:18
Font Localization with Preprocessors
//
// variables.fonts.less
//
@font-headings: "Some Character-limited Font";
@font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
//
// fonts.less
@calvinjuarez
calvinjuarez / 1.README.md
Last active January 21, 2020 16:43
Less Port of Bootstrap 4s Media Query Mixins
@calvinjuarez
calvinjuarez / html-attribute-order.md
Created April 20, 2017 22:19
HTML Attribute Order

Preferred Order of HTML Attributes

When under my control, I like to order HTML attributes in this way.

  1. Identifiers
    • class
    • id
    • type
    • for
  • name