Skip to content

Instantly share code, notes, and snippets.

Lachlan Campbell lachlanjc

View GitHub Profile
View streak.css
body {
font-family: 'Avenir Next', system-ui;
}
h1 {
color: #ec3750;
}
View meta.js
import React from 'react'
const makeTitle = (title, name) =>
title === name ? title : `${title}${name}`
const Meta = ({
name = 'Hack Club', // site name
title = 'Hack Club', // page title
description,
image,
@lachlanjc
lachlanjc / start.md
Created Mar 26, 2018
Favorite Song site
View start.md

Favorite Song site

1. Open Glitch

Open Glitch, click on "hello-webpage", and click "Remix your own."

2. Start your HTML

HTML is the language we use to write webpages. Every website you've ever visited uses HTML, and yours is no different.

@lachlanjc
lachlanjc / home.html.erb
Created Feb 7, 2017
Make Schema metadata generation easy in Rails
View home.html.erb
<%= make_scheme org_schema %>
@lachlanjc
lachlanjc / rehide.coffee
Created Nov 4, 2016
For when you need an element to be hidden on page load, but respond to jQuery's .show() or .toggle() later, use Rehide.
View rehide.coffee
$(document).ready ->
# Assuming .hidden sets display: none
$('[data-behavior~=rehide]').hide().removeClass('hidden')
@lachlanjc
lachlanjc / Header.js
Created Aug 21, 2016
Styling multiple elements with react-cxs
View Header.js
const Header = () => {
const cx = {
root: {
backgroundColor: colors.blue,
color: colors.white,
paddingBottom: space[4],
paddingTop: space[4]
},
container: {
margin: 'auto',
View grid.scss
//---------------------------
// Grid object
//---------------------------
$__col-values: (4, 6, 8, 9, 12);
@media #{$breakpoint-sm} {
@each $size in $__col-values {
.col-#{$size}--sm {
width: ($size/12 * 100%);
View units.scss
//-----------------------------
// Units functions
//-----------------------------
// Strip units from passed value
@function stripUnit($n) {
@return $n / ($n*0+1);
}
//---------------------------
View size.scss
//---------------------------
// Size function
// =============
// The size function returns a measurement determined by
// the (required) argument of level.
//
// Example: size(5);
// This will return 16rem.
//---------------------------
$__size-default: 2;
View spacing.scss
//---------------------------
// Spacing utilities
//---------------------------
$__space-default: 1rem;
@function space($level: 1) {
@if $level <= 4 {
@if $level == 0 {
@return ($__space-default / 2);
} @else {
You can’t perform that action at this time.