Skip to content

Instantly share code, notes, and snippets.

View laurakalbag's full-sized avatar

Laura Kalbag laurakalbag

108 followers · 3 following
View GitHub Profile
@laurakalbag
laurakalbag / machine.js
Created October 5, 2021 14:38
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@laurakalbag
laurakalbag / examples.md
Created April 13, 2020 10:02
An example of a gist.

This is an example of a gist.

@laurakalbag
laurakalbag / i-pledge-to-be-better
Last active December 25, 2015 17:29 — forked from KuraFire/i-pledge-to-be-better
A pledge for people who want to make a statement about making our industry better. (Tweaked to fit my being a woman, and UK English.)
# I Pledge To Be Better
I want our industry to be a safe, welcoming and inclusive place for everyone, regardless of
their gender, abilities, skin colour, sexuality, age, class, neuro-diversity or any other attribute.
I acknowledge that this is not currently the case, and will do my best, to the extent that I can
afford to dedicate to this, to help make ours a better community and industry.
I value the diversity of perspectives that people with different backgrounds bring to the table.
I will call out exclusionary practices, behaviors or cultures and see how, together, we can perhaps
reshape them to be inclusive and supportive instead.
@laurakalbag
laurakalbag / Viewport Meta Tag
Created March 11, 2013 09:30
A quick example of the viewport meta tag
<meta name="viewport" content="width=device-width">
@laurakalbag
laurakalbag / Sass for Designers Example #12
Created December 28, 2012 16:53
Example of an article with varying widths, font-sizes and line-heights depending on the viewport width, written in Sass.
article {
font-size: 14px;
line-height: 25px;
h2 {
font-size: 18px;
padding-bottom: 15px;
}
@media only screen and (min-width: 300px) {
@laurakalbag
laurakalbag / Sass for Designers Example #11
Last active December 10, 2015 07:09
Example of an article with varying widths, font-sizes and line-heights depending on the viewport width.
/* initial rule for all viewports, including browsers that don't support @media */
article {
font-size: 14px;
line-height: 25px;
}
article h2 {
font-size: 18px;
padding-bottom: 15px;
}
@laurakalbag
laurakalbag / Sass for Designers Example #10
Created December 28, 2012 16:29
Example of nesting selectors in Sass to make your stylesheet easier to read.
/* written in plain old CSS */
.module h3 {
font-weight: bold;
}
.module p {
padding-bottom: 10px;
}
@laurakalbag
laurakalbag / Sass for Designers Example #9
Created December 18, 2012 17:33
Example of rules based on design patterns in CSS made into nested Sass mixins and applied to HTML elements
// A few variables thrown in for good measure
$border-colour: #a4a4a4;
$unit: 10px;
@mixin subtle-shadow {
-webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
}
@mixin shadow-border {
@laurakalbag
laurakalbag / Sass for Designers Example #8
Created December 18, 2012 17:22
Example of rules based on design patterns in CSS made into a Sass mixin and applied to HTML elements
@mixin shadow-border {
border-bottom: 1px solid #a4a4a4;
-webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
padding-bottom: 20px;
margin-bottom: 40px;
}
@laurakalbag
laurakalbag / Sass for Designers Example #7
Created December 18, 2012 17:21
Example of rules based on design patterns in CSS made into a Sass mixin
@mixin shadow-border {
border-bottom: 1px solid #a4a4a4;
-webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6);
padding-bottom: 20px;
margin-bottom: 40px;
}