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.
|
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- Encoding --> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta> | |
scottkellum
/ grid-system.css
Created
May 14, 2021 17:41
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
| html { | |
| --max-width: 1200px; | |
| --columns: 6; | |
| --gutter: 1.5rem; | |
| } | |
| * { | |
| --grid: minmax(var(--gutter), 1fr) | |
| repeat( | |
| var(--columns), | |
| minmax( |
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
| // ---- | |
| // Sass (v3.3.0.rc.1) | |
| // Compass (v0.13.alpha.10) | |
| // ---- | |
| $base-font-size: 16px; | |
| $small: "(min-width: 200px)"; | |
| @mixin button() { | |
| button: styles; |
scottkellum
/ gluten free pizza and focaccia.md
Last active
December 6, 2020 20:21
scottkellum
/ intrinsic-typography-survey.md
Last active
November 14, 2020 03:31
Intrinsic typography survey.
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.
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.
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>
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
| $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%) { |
OOCSS is awesome because it helps us organize our style sheets in clean and simple ways but it can be far too rigid for the new responsive web. How can we use preprocessors to preserve both flexibility and cleanliness of code? Can these objects be abstracted to our preprocessors?
Lets first take a look at three column widths in OOCSS to see how they compare.
CSS
scottkellum
/ mastodon.css
Last active
March 7, 2019 15:18
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
| /* | |
| 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 */ |
scottkellum
/ re.md
Created
February 11, 2016 17:34
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
NewerOlder