Skip to content

Instantly share code, notes, and snippets.

Avatar
🕴️
Working on Typetura

Scott Kellum scottkellum

🕴️
Working on Typetura
View GitHub Profile
View grid-system.css
html {
--max-width: 1200px;
--columns: 6;
--gutter: 1.5rem;
}
* {
--grid: minmax(var(--gutter), 1fr)
repeat(
var(--columns),
minmax(
View gluten free pizza and focaccia.md

Gluten Free Pizza or Focaccia

A dough that creates a light and airy texture with a thin yet crisp crust that can be made with easy to find ingredients at the grocery store. Made with love for @anatecture.

Pizza

gluten free pizza
@scottkellum
scottkellum / intrinsic-typography-survey.md
Last active Nov 14, 2020
Intrinsic typography survey.
View intrinsic-typography-survey.md

Website typography audit

Typetura saves you time and money while giving you more typography and layout control. A survey of leading news sites estimated a reduction in typographic styles by 90% while increasing design flexibility.

Calculations and estimates

These are estimates. Typetura styles were estimated by counting the number of text components on the website overall, not just the home page. About 5 styles added in in case of any oversight, more on typographicly rich websites. Multiply that by 3, as each style will need a high and low style for the intrinsic interpolation along with a set of fallback styles. The end result is rounded up again.

To get percentages, the estimated number of Typetura styles is compared to the number of font-size and other text styling declarations in the stylesheet, and the percentage is derrived from that. Note that all declarations within media queries and specific component styles can be deleted, this is where the savings come from.

@scottkellum
scottkellum / query-interpolation.md
Created Nov 13, 2020
Query interpolation proposal
View query-interpolation.md

Query interpolation proposal

Based on @mirisuzanne’s container query proposal.

Sometimes hard breakpoints aren’t ideal in that we might want to add fluidity to how things are adjusted across screen sizes. Like Goldilocks and the three bears, we often end up with values that are too big or too small and a lot of breakpoints are required to get things just right. We have things like clamp() now but it lacks easing funcitonality, user text scaling breaks reliability, and it only works to add fluidity to length measurements. This is a problem when adjusting font styles, variable font settings, color, opacity, and other values you might want to manupulate across varying widths. The lack of easing means control, especially at smaller sizes, is severly limited.

Below is an example based on Miriam’s work that includes interpolation of media queries.

<section>
@scottkellum
scottkellum / input.scss
Last active Sep 24, 2020
Generated by SassMeister.com.
View input.scss
$width: -266px;
$cards: 10;
$delay: .8;
@keyframes PackageCarousel-background {
@for $i from 0 through $cards {
#{100% / $cards * $i} {
background-position-x: $width * $i;
}
@if ((100% / $cards * $i + (100% / $cards * $delay)) <= 100%) {
View mastodon.css
/*
SETTINGS
All theme settings can be modified here.
You shouldn’t need to dive into any of the other sections
unless you plan on doing things beyond changing colors and fonts. */
body {
--font: sans-serif;
--toot-font: var(--font); /* Modify if different from the interface font */
View re.md

First off using a modular scale is like using a different type of unit and requires a different mental model. Imagine a ruler where the space between numbers regularly increase instead of uniform space between. Using a modular scale can be a useful tool but everyone has to be on the same page when talking about them. I use them on personal projects but it’s often easier to stick with traditional units at work.

The modularscale.com site uses it all over the place as well as my personal site. IBM probably has the largest scale implementation of it and Foundation 3 included the Sass library as well.

While most of the advantages of using modular scales on websites are somewhat subjective as they help many people finding a type hirarchy bu

@scottkellum
scottkellum / SassMeister-input-HTML.html
Created Jan 19, 2016
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<h1>This is a heading</h1>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
<h2>This is a heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo
@scottkellum
scottkellum / SassMeister-input-HTML.html
Created Jan 19, 2016
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<h1>This is a heading</h1>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
<h2>This is a heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo
@scottkellum
scottkellum / SassMeister-input.scss
Created Dec 8, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
test {
@if (1+1) == 2 and (1+1) == 3 {
output: true;
} @else {
output: false;
}