Skip to content

Instantly share code, notes, and snippets.

👶
On Paternity Leave

Alexis Córdova alexiscordova

👶
On Paternity Leave
Block or report user

Report or block alexiscordova

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@alexiscordova
alexiscordova / nth-child-mixins.scss
Created Jul 6, 2016
Sass mixins to make CSS nth-child selectors easier to work with
View nth-child-mixins.scss
// Select the first nth elements
@mixin first($number) {
@if $number == 1 {
&:first-child {
@content;
}
}
@else {
&:nth-child(-n + ${$number}) {
@content;
@alexiscordova
alexiscordova / triangle-mixin.scss
Last active Jun 12, 2017
Sass mixin to create CSS triangles
View triangle-mixin.scss
@mixin triangle($direction, $size: 0.375rem, $color: #222){
display: block;
position: absolute;
width: 0;
height: 0;
content: '';
@if ($direction == 'up'){
border-right: $size solid transparent;
border-bottom: $size solid $color;
border-left: $size solid transparent;
@alexiscordova
alexiscordova / sass-mq-mixin.scss
Last active Jun 12, 2017
A Sass mixin that creates media query declarations based on $map keys and values
View sass-mq-mixin.scss
// Media Query Breakpoints – Breakpoint values should be in ems, which will allow triggering when users zoom.
// Per the W3C, relative units in media query declarations are based on the initial value of :root, which is 16px
// e.g., font-size: 1em = 1rem = 16px = 100%;
// http://www.w3.org/TR/css3-mediaqueries/#units
// TODO: look into x-small and small values for 4-inch mobile devices
$screen-sm: 0; // 0px
$screen-md: 40em; // 640px
$screen-lg: 64em; // 1024px
$breakpoints: (
You can’t perform that action at this time.