Skip to content

Instantly share code, notes, and snippets.

View stephenhmarsh's full-sized avatar

Stephen Marsh stephenhmarsh

27 followers · 67 following
View GitHub Profile
@stephenhmarsh
stephenhmarsh / styleguide.md
Created December 16, 2020 18:46
Marble Code Styleguide (Draft)

Use BEM

BEM Modifiers should be @mixins.

Good:

@mixin primary-button--small {
	padding: 0.7777777778em 2.5em;
	&.primary-button--ghost-light,
@stephenhmarsh
stephenhmarsh / image template example 2.js
Last active June 22, 2020 18:18
image template example 2.js
function pictureTemplate(photo) {
return html`
<picture class="picture lazy">
<data-src
sizes="100vw"
srcset="${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=768&q=${SETTINGS.quality} 768w,
${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=992&q=${SETTINGS.quality} 992w,
${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=1200&q=${SETTINGS.quality} 1200w,
${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=1536&q=${SETTINGS.quality} 1536w,
${photo.fields.file.url}?fm=${SETTINGS.imageType}&w=1984&q=${SETTINGS.quality} 1984w,
@stephenhmarsh
stephenhmarsh / image template example.jsx
Created June 22, 2020 18:02
image template example.jsx
import React from "react";
import "./ResponsiveImage.scss";
class ResponsiveImage extends React.Component {
render() {
const responsiveImage = this.props.photo;
const baseURL = responsiveImage.fields.image.fields.file.url;
const caption = responsiveImage.fields.caption;
return (
<figure className="responsive-image" key={`${responsiveImage.sys.id}`}>
@stephenhmarsh
stephenhmarsh / index.html
Created June 7, 2017 01:56
Exported from Popcode. Click to import: https://popcode.org/?gist=37b5aa96cfad788e87dbfd0474d0d780
<!DOCTYPE html>
<html>
<head>
<title>RaffleBot</title>
</head>
<body>
<div class="centered">
<h1>RaffleBot</h1>
<button id="raffle" class="alert">Raffle Time!!!</button>
</div>
@stephenhmarsh
stephenhmarsh / index.html
Created June 5, 2017 18:07
Exported from Popcode. Click to import: https://popcode.org/?gist=3aea427de60c55317ee701819250fd9b
<!DOCTYPE html>
<html>
<head>
<title>RaffleBot</title>
</head>
<body>
<div class="centered">
<h1>RaffleBot</h1>
<button id="raffle" class="alert">Raffle Time!!!</button>
</div>
@stephenhmarsh
stephenhmarsh / index.html
Created June 5, 2017 04:48
Exported from Popcode. Click to import: https://popcode.org/?gist=5dc13193e617b2895db0eb9290777183
<!DOCTYPE html>
<html>
<head>
<title>RaffleBot</title>
</head>
<body>
<div class="centered">
<h1>RaffleBot</h1>
<button id="raffle" class="alert">Raffle Time!!!</button>
</div>
@stephenhmarsh
stephenhmarsh / index.html
Created June 5, 2017 04:47
Exported from Popcode. Click to import: https://popcode.org/?gist=d46df5aa5a8b6987d361d4f5dd51cece
<!DOCTYPE html>
<html>
<head>
<title>RaffleBot</title>
</head>
<body>
<div class="centered">
<h1>RaffleBot</h1>
<button id="raffle" class="alert">Raffle Time!!!</button>
</div>
@stephenhmarsh
stephenhmarsh / index.html
Created March 22, 2017 04:20
Exported from Popcode. Click to import: https://popcode.org/?gist=2b47ccc0ce99288b6be6ab220a826e0e
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>You can close the HTML, CSS, and Output panels. You will not need them since we will be working in the browser's console! :)</p>
<p>All you need is the Javascript panel!</p>
</body>
</html>
@stephenhmarsh
stephenhmarsh / index.html
Created March 22, 2017 04:18
Exported from Popcode. Click to import: https://popcode.org/?gist=9668a0cd099b8efe27030491fb1060a2
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>You can close the HTML, CSS, and Output panels. You will not need them since we will be working in the browser's console! :)</p>
<p>All you need is the Javascript panel!</p>
</body>
</html>
@stephenhmarsh
stephenhmarsh / index.html
Created March 22, 2017 04:14
Exported from Popcode. Click to import: https://popcode.org/?gist=0d3d65aed5f8ca7c26dd00341ad56c28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>You can close the HTML, CSS, and Output panels. You will not need them since we will be working in the browser's console! :)</p>
<p>All you need is the Javascript panel!</p>
</body>
</html>