Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/argyleink/open-props
Browse files Browse the repository at this point in the history
  • Loading branch information
@argyleink
argyleink committed Dec 5, 2021
2 parents 8a68334 + 3b1cf0c commit ebaf65b
Showing 1 changed file with 25 additions and 29 deletions.
54 changes: 25 additions & 29 deletions docsite/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ <h3>4 Color Schemes</h3>

<section id="about" class="just-stretch">
<header class="just-stretch">
<h2>Why use Open Props?</h2>
<h2>Why Use Open Props?</h2>
<p>It's <b>non-prescriptive</b>.</p>
</header>
<dl class="marketing-features responsive-dl">
Expand All @@ -273,19 +273,19 @@ <h2>Why use Open Props?</h2>
<svg viewBox="0 0 24 24">
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
Predictable Props
Predictable
</dt>
<dd>Small naming pattern.</dd>
<dd>Thanks to consistent naming conventions.</dd>
</div>
<div>
<dt>
<svg viewBox="0 0 24 24" >
<path d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
Easy Adoption
Incrementally Adoptable
</dt>
<dd>Grab a few props, all the props, props as JS, or adopt only what you use.</dd>
<dd>Grab all the props, props as JS, or only what you need.</dd>
</div>
<div>
<dt>
Expand All @@ -309,7 +309,7 @@ <h2>Overview</h2>
<header>
<h4>File Sizes</h4>
<blockquote>
<p>The following filesizes are for the minified files and after <a href="https://github.com/google/brotli">brotli</a> compression.</p>
<p>The following sizes are for the minified files and after <a href="https://github.com/google/brotli">Brotli</a> compression.</p>
</blockquote>
</header>
<dl class="block-wrap bundle-sizes">
Expand Down Expand Up @@ -570,7 +570,7 @@ <h2>
<header>
<h2>Getting Started</h2>
<div class="block-wrap">
<p>CSS and <a href="https://postcss.org/">PostCSS</a> available. Props as Javascript also available.</p>
<p>Pick from CSS, <a href="https://postcss.org/">PostCSS</a>, or props as Javascript.</p>
<blockquote class="icon-quote indigo">
<svg viewBox="0 0 24 24">
<path d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
Expand All @@ -587,7 +587,7 @@ <h2>Getting Started</h2>
<div class="contain-pre">
<header>
<h4>CDN</h4>
<p>No install step required.</p>
<p>No installation required.</p>
</header>

<details class="started-details">
Expand Down Expand Up @@ -652,7 +652,7 @@ <h6>Individual packs</h6>
</details>

<h5 id="jitprops">PostCSS JIT Props</h5>
<p>Only ship the props used! <a href="https://github.com/GoogleChromeLabs/postcss-jit-props">Learn more</a></p>
<p>Only ship the props you use. <a href="https://github.com/GoogleChromeLabs/postcss-jit-props">Learn more</a>.</p>

<details class="started-details">
<summary>PostCSS</summary>
Expand Down Expand Up @@ -765,12 +765,12 @@ <h6>Entry points</h6>
<header>
<h2>Colors</h2>
<div class="block-wrap">
<p>Open Props includes <a href="https://yeun.github.io/open-color/">Open Color</a> (Version 1.9.1): an open-source color scheme. Optimized for UI.</p>
<p>Open Props includes <a href="https://yeun.github.io/open-color/">Open Color</a> (Version 1.9.1), an open-source color scheme optimized for UI development.</p>
<blockquote class="icon-quote">
<svg viewBox="0 0 24 24">
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
<span>Open devtools, open the color picker, set the swatches to the page's custom properties, and enjoy picking from the set!</span>
<span>Open the color picker in your dev tools, set the swatches to the page's custom properties, and enjoy picking from the set!</span>
</blockquote>
</div>
</header>
Expand Down Expand Up @@ -1003,8 +1003,8 @@ <h4>Orange</h4>

<div class="just-for-gap">
<header>
<h3>1) Color Theming</h3>
<p>Low numbers are light and high numbers are dark. See how the Open Props <a href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.css">normalize.css</a> does <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">light</a> and <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">dark</a>. Spoiler, it's just like how it's explained below.</p>
<h3>1) Color theming</h3>
<p>Low numbers are light and high numbers are dark. See how the Open Props <a href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.css">normalize.css</a> implements <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.light.css">light</a> and <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.dark.css">dark</a> modes.</p>
<p><b>See it live:</b> <a href="https://codepen.io/argyleink/pen/21fe8c43e25876c3756917df0bd7ef36">auto, light, dark, dim and grape themes</a> demonstrated with Open Props!</p>
</header>

Expand Down Expand Up @@ -1076,8 +1076,8 @@ <h5>Grape</h5>
</div>

<header>
<h3>2) Adapting and applying</h3>
<p>It's not great for the page or components to reference theme colors directly when building a color scheme, instead use the color scheme variables to back a single alias. This lets the app use 1 custom property, while the theme can swap out the value given new contexts.</p>
<h3>2) Creating adaptive color schemes</h3>
<p>It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.</p>
</header>

<div class="block-wrap">
Expand Down Expand Up @@ -1154,7 +1154,7 @@ <h5>Prefers Grape</h5>

<header>
<h3>3) Using the aliases</h3>
<p>Your app is now free to use adaptive custom properties where it seems fit. Your team, or self, need to only think about 1 naming convention. Here are a few examples of how the above color theme system could be used.</p>
<p>Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.</p>
</header>

<div class="block-wrap">
Expand Down Expand Up @@ -1212,7 +1212,7 @@ <h5>Typography</h5>
<section id="gradients" class="just-stretch">
<header>
<h2>Gradients</h2>
<p>Open Props includes 30 hand tailored gradients. Linear gradient direction can be changed with a custom property mixin.</p>
<p>Open Props includes 30 handcrafted gradients. Linear gradient direction can be changed with a custom property mixin.</p>
<p>Don't miss the noise props inspired by <a href="https://grainy-gradients.vercel.app">grainy-gradients</a>.</p>
</header>

Expand Down Expand Up @@ -1330,11 +1330,10 @@ <h4>Noisy Examples</h4>
<section id="shadows">
<header>
<h2>Shadows</h2>
<p>Light and dark theme adaptive inner and outer shadows.</p>
<p>Inner and outer shadows that adapt to light and dark modes.</p>
</header>
<div class="block-wrap">
<div>

<h5>The Props</h5>
<div class="var-examples">
<pre class="language-css"><code>
Expand Down Expand Up @@ -1377,7 +1376,6 @@ <h2>Aspect Ratios</h2>
</header>
<div class="block-wrap">
<div>

<h5>Vars Sample</h5>
<div class="var-examples">
<pre class="language-css"><code>
Expand Down Expand Up @@ -1413,11 +1411,9 @@ <h5>Usage Sample</h5>
<section id="typography">
<header>
<h2>Typography</h2>
<p>Liquid and static font sizes, smart line heights, other familiar looking typography variables, ready to go.</p>
<p>Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.</p>
</header>
<div class="block-wrap">


<div>
<h5>The Props</h5>
<div class="var-examples">
Expand Down Expand Up @@ -1648,7 +1644,7 @@ <h4>Fluid Font Sizes</h4>
<section id="easing">
<header>
<h2>Easing</h2>
<p>5 strengths for the classic <code class="language-css">ease</code>, <code class="language-css">easeout</code>, <code class="language-css">easein</code>, and <code class="language-css">easeinout</code>. Some extra easings too, a space for mock elasticity and physics.</p>
<p>Five strengths for the classic <code class="language-css">ease</code>, <code class="language-css">ease-out</code>, <code class="language-css">ease-in</code>, and <code class="language-css">ease-in-out</code> timing functions. Plus some extra easings for mock elasticity and physics!</p>
</header>
<div class="block-wrap">
<div>
Expand Down Expand Up @@ -1819,7 +1815,7 @@ <h5>Ease Steps</h5>
<section id="animations">
<header>
<h2>Animations</h2>
<p>Premade <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect">keyframe effects</a> for slides and fades allow you to orchestrate your own combinations. Plus, a few nice attention grabbers and indeterminate state animations.</p>
<p>Premade <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect">keyframe effects</a> allow you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations.</p>
</header>
<div class="block-wrap">
<div>
Expand Down Expand Up @@ -2170,7 +2166,7 @@ <h6>Push Out</h6>
<section id="sizes">
<header>
<h2>Sizes</h2>
<p>No <code class="language-css">px</code> here, relative units all the way. 0's are unsafe but common negative values, while 1-N are safe.</p>
<p>No <code class="language-css">px</code> here, relative units all the way. <code>0</code>s are unsafe but common negative values, while 1-N are safe.</p>
</header>
<div>
<h5>The Props</h5>
Expand Down Expand Up @@ -2365,7 +2361,7 @@ <h5 style="inline-size: var(--size-header-3)">Carrot cake gummi bears sweet cara
<section id="borders">
<header>
<h2>Borders</h2>
<p>Sizes, corner radii, circle helper, <a href="https://ishadeed.com/article/conditional-border-radius/">conditional radii</a> and some blobs</p>
<p>Sizes, corner radii, a circle helper, <a href="https://ishadeed.com/article/conditional-border-radius/">conditional radii</a>, and some blobs.</p>
</header>
<div class="block-wrap">
<div>
Expand Down Expand Up @@ -2437,7 +2433,7 @@ <h3>Blobs</h3>
<section id="z-index">
<header>
<h2>Z Index</h2>
<p>All the values you could likely need.. unless you're at war with something at which point this props can't save you.</p>
<p>All the z-index values you could possibly need!</p>
</header>
<div class="block-wrap">
<div>
Expand Down Expand Up @@ -2475,7 +2471,7 @@ <h5>Usage Sample</h5>
<section id="media-queries">
<header class="just-for-gap">
<h2>Media Queries</h2>
<p>A little ahead of <a href="https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media">the spec</a> this library offers named media queries with the <code>@custom-media</code> syntax. Available only with <a href="https://github.com/postcss/postcss-custom-media">this PostCSS plugin</a>, for now 😈</p>
<p>Currently one step ahead of <a href="https://drafts.csswg.org/mediaqueries-5/#at-ruledef-custom-media">the CSS spec</a>, Open Props offers named media queries with the <code>@custom-media</code> syntax. Available only with <a href="https://github.com/postcss/postcss-custom-media">this PostCSS plugin</a>, for now 😈</p>
<div class="media-query-chart">
<div>
<svg height="24" width="24">
Expand Down

0 comments on commit ebaf65b

Please sign in to comment.