Frederic Marx is a code-driven designer with a background in media and cultural studies. He gets excited about typography, design systems, tools and the nature of the Web as an interconnected platform of social change. He is also a coach at CSSclasses and loves co-learning and exchanging knowledge with inclusive communities.
Frederic Marx fredericmarx
fredericmarx
/ get-ordinal-number.js
Created
February 29, 2020 19:38
Get ordinal numbers in JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const getOrdinalNumber = number => { | |
| const ordinalNumbers = [ | |
| "first", | |
| "second", | |
| "third", | |
| "fourth", | |
| "fifth", | |
| "sixth", | |
| "seventh", | |
| "eigth", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| config: { | |
| // default font size in pixels for all tabs | |
| fontSize: 14, | |
| // font family with optional fallbacks | |
| fontFamily: '"Input Mono", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace', | |
| // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk) | |
| cursorColor: 'rgba(248,28,229,0.8)', |
fredericmarx
/ .hyperterm.js
Created
July 18, 2016 08:07
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| config: { | |
| // default font size in pixels for all tabs | |
| fontSize: 15, | |
| // font family with optional fallbacks | |
| fontFamily: '"Input Mono", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace', | |
| // terminal cursor background color (hex) | |
| cursorColor: 'rgba(255,255,255,.4)', |
fredericmarx
/ functional-css-composability.jsx
Last active
June 16, 2016 05:54
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {/* Transcribed from https://twitter.com/jongold/status/740916331139244032 */} | |
| function Box ({ children }) { | |
| return ( | |
| <div className="flex p2 bg-blue white h4 bold"> | |
| { children } | |
| <div> | |
| ) | |
| } |
fredericmarx
/ bio.md
Last active
January 24, 2016 23:37
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; | |
| } |
fredericmarx
/ gist:ff0629c57f68a8b9189f
Created
October 26, 2015 15:55
Parallel perspective button outline with css `clip-path`
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $button-offset: .5em; | |
| clip-path: polygon(0 $button-offset, $button-offset 0, 100% 0, 100% calc(100% - #{$button-offset}), calc(100% - #{$button-offset}) 100%, 0 100%);} |
fredericmarx
/ gist:23551301341386504ada
Created
October 24, 2015 12:16
Create an empty HTML document from data URI
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| data:text/html,<html contenteditable> |
fredericmarx
/ fredericmarx-tweetdeck.user.js
Last active
October 6, 2015 11:04
fredericmarx-tweetdeck.user.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name @fredericmarx Tweetdeck Custom | |
| // @namespace http://fmarx.com | |
| // @version 0.1 | |
| // @description Small Tweetdeck usability tweaks | |
| // @author @fredericmarx | |
| // @match https://tweetdeck.twitter.com/ | |
| // ==/UserScript== | |
| ( function() { |
fredericmarx
/ gist:eb99692e8236d2030d1d
Created
May 25, 2014 22:47
Circle Mixin – Having a little fun with Sass 3.3 Maps and Random
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin circle($radius: 100px, $bg: grey, $color: white) { | |
| width: $radius; | |
| height: $radius; | |
| text-align: center; | |
| line-height: $radius; | |
| background-color: $bg; | |
| color: $color; | |
| overflow: hidden; | |
| @include border-radius(50%); |