Skip to content

Instantly share code, notes, and snippets.

View gavinmcfarland's full-sized avatar

Gavin McFarland gavinmcfarland

119 followers · 66 following
View GitHub Profile
@gavinmcfarland
gavinmcfarland / new-mac-setup.md
Last active June 21, 2019 00:33
new-mac-setup

Development

  1. Install macOS updates
  2. Install Chrome
  3. Download Xcode
  4. Install Hyper
  5. Change shell
  6. Install homebrew
  7. Install NVM
  8. Install latest version of node
@gavinmcfarland
gavinmcfarland / styles.css
Created April 13, 2019 03:11
Utility class library
[max-width] {
}
@gavinmcfarland
gavinmcfarland / component-section.html
Last active April 13, 2019 23:42
Design is a key value pair?
<wrapper><slot></slot></wrapper>
<style>
/* To colour the background or draw borders to the full width of the document */
:host {
/* To make the section full width of the browser */
width: 100vw;
/* To bring section back to the center */
position: relative;
@gavinmcfarland
gavinmcfarland / color.css
Last active April 10, 2019 01:08
Text style
%color_theme_default {
--heading-color: COLOR_PRIMARY;
--background-color: COLOR_WHITE;
--color: COLOR_BLACK;
--paragraph-color: COLOR_BLACK;
--link-color: COLOR_PRIMARY;
}
%color_body {
--color: COLOR_BLACK;
@gavinmcfarland
gavinmcfarland / group-tokens.json
Created April 9, 2019 01:06
{
text {
size {
font-size: {
}
}
}
}
@gavinmcfarland
gavinmcfarland / config.js
Last active February 17, 2019 00:49
Example using pHTML and Svelte
/** Example using phtml-markdown
https://github.com/phtmlorg/phtml-markdown **/
// svelt-preprocessor
const options = {
phtml ({ content, filename }) {
return phtmlMarkdown.process(content, { from: filename }).then(result => ({ code: result.html, map: null }));
}
}
@gavinmcfarland
gavinmcfarland / keywords.pcss
Last active September 5, 2018 20:35
@keyword props(padding, margin) small: 16px;
@keyword small: 16px {
props: padding margin;
}
@keyword props(padding margin) small {
value: 16px;
}
@gavinmcfarland
gavinmcfarland / example.md
Last active May 10, 2017 22:34

Example markdown

Testing 1

<h3 style="
margin: 10gu;
padding: 5gu;
width: 1/5;">...</h3>
@gavinmcfarland
gavinmcfarland / examples.md
Last active May 11, 2017 14:28
Thoughts on improving limitations of utility classes

Thoughts on improving limitations of utility classes

Traditionally you might use something like this.

<div class="span-1/5-tablet span-1/4-desktop">...</div>
<div class="span-4/5-tablet span-1/4-desktop">...</div>
<div class="span-2/4-desktop">...</div>
@gavinmcfarland
gavinmcfarland / conventional-example.html
Last active May 9, 2017 23:55
Example of how to style bespoke layouts for different viewports
<!-- This method requires you to append a suffix to each utility class in your css and gets tedious -->
<div class="span-1/5-tablet span-1/4-desktop">...</div>
<div class="span-4/5-tablet span-1/4-desktop">...</div>
<div class="span-2/4-desktop">...</div>