aria/buymymojo.net
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

First release

Browse source
This commit is contained in:
Owen Quinlan 2021-07-02 19:29:34 +10:00
commit fa6c85266e
2339 changed files with 761050 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

299
node_modules/cssgram/site/index.twig generated vendored Normal file
View file

@ -0,0 +1,299 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSGram</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/demo-site.min.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-36758177-8', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<section class="title-section">
<img class="title--logo" src="img/cssgram-logo.svg" alt="CSSgram">
<h2 class="title--top-sub">A tiny (&lt;1kb gzipped!) library for recreating <a href="http://instagram.com">Instagram</a> filters with CSS filters and blend modes.</h2>
</section>
{% set images = ['atx', 'bike', 'cacti', 'lakegeneva', 'tahoe'] %}
<section class="demo__section">
<div class="demo__input-area">
<fieldset class="demo__option-field">
<legend>Choose a sample image:</legend>
{% for i in images %}
<img class="demo__option-img" src="img/{{i}}.jpg" alt="{{i}} image">
{% endfor %}
<br>
<label class="demo__input-label">
Or paste in a link to your own photo:
<input class="demo__input-img" type="text">
</label>
</fieldset>
<small class="demo__note">Hovering over any of these images (or clicking on mobile) will remove the filter effect to visualize the changes.</small>
</div>
<ul class="demo__list">
<li class="demo__item">
<figure>
<img>
<figcaption>#nofilter</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="aden">
<img>
<figcaption>Aden</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="reyes">
<img>
<figcaption>Reyes</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="perpetua">
<img>
<figcaption>Perpetua</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="inkwell">
<img>
<figcaption>Inkwell</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="earlybird">
<img>
<figcaption>Earlybird</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="toaster">
<img>
<figcaption>Toaster</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="walden">
<img>
<figcaption>Walden</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="hudson">
<img>
<figcaption>Hudson</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="gingham">
<img>
<figcaption>Gingham</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="mayfair">
<img>
<figcaption>Mayfair</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="lofi">
<img>
<figcaption>Lo-fi</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="xpro2">
<img>
<figcaption>X-Pro II</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="_1977">
<img>
<figcaption>1977</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="brooklyn">
<img>
<figcaption>Brooklyn</figcaption>
</figure>
</li>
<li class="demo__item">
<figure class="nashville">
<img>
<figcaption>Nashville</figcaption>
</figure>
</li>
</ul>
</section>
<section class="explanation-section">
<h2>What is This?</h2>
<p><strong class="callout">For more background on CSS Image Effects, you can check out my blog series <a href="http://una.im">here</a>, or watch my <a href="https://www.youtube.com/watch?v=LY65F2e4B5w">video</a> from CSS Conf EU, which gives a baseline on blend modes and filters.</strong></p>
<p>Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means <em>less manual image processing</em> and more fun filter effects on the web!</p>
<p>We are using pseudo-elements (i.e. <code>:before</code> and <code>:after</code>) to create the filter effects, so you must apply these filters on a containing element (i.e. not a content-block like <code>&lt;img&gt;</code>. The recommendation is to wrap your images in a <code>&lt;figure&gt;</code> tag. More about the tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">here.</a></p>
<h3>Browser Support</h3>
<p>This library uses <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter">CSS Filters</a> and <a href="https://css-tricks.com/basics-css-blend-modes/">CSS Blend Modes</a>. This features are supported in the following browsers:</p>
<ul class="supported-browsers">
<li class="supported">Google Chrome: 43+</li>
<li class="supported">Mozilla Firefox: 38+</li>
<li class="not-supported">Internet Explorer: Nope</li>
<li class="supported">Opera: 32+</li>
<li class="supported">Safari: 8+</li>
</ul>
<p>For more information, check on <a href="http://caniuse.com/">Can I Use</a>.</p>
<hr>
</section>
<section class="how-to-section">
<h2>Usage</h2>
<p><strong>There are currently 2 ways to consume this library:</strong></p>
<h3 id="use-css-classes">Use CSS classes</h3>
<p>When using CSS classes, you can simply add the class with the filter name to the element containing your image.</p>
<p><strong>The quickest way to do this is to link to our CDN</strong> in your <code>&lt;head&gt;</code> tag: <code>&lt;link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css"&gt;</code>. Then, add a class to your figure element with the name of the filter you would like to use (shown below)</p>
<p>If you want to work locally, do the following:</p>
<ol>
<li><a href="https://raw.githubusercontent.com/una/CSSgram/master/source/css/cssgram.min.css" download>Download the CSSgram Library</a></li>
<li>Link to the CSSgram library within your project: <br><code>&lt;link rel="stylesheet" href="css/vendor/cssgram.min.css"&gt;</code></li>
<li>Add a class to your figure element with the name of the filter you would like to use</li>
</ol>
<p>For example:</p>
<pre><code>
<span class="comment">&lt;!-- HTML --&gt;</span>
&lt;figure <span class="highlight">class="aden"</span>&gt;
&lt;img src="../img.png"&gt;
&lt;/figure&gt;
</code></pre>
<small>Alternatively, you can just download and link to any individual css file: <br> <code>&lt;link rel="stylesheet" href="css/vendor/aden.min.css"&gt;</code>, if you're just using one of the styles.</li></small>
<h3>Available Classes</h3>
<small><em>For use in HTML markup:</em></small>
<ul class="available-classes">
<li>Aden: <code>class="aden"</code></li>
<li>Reyes: <code>class="reyes"</code></li>
<li>Perpetua: <code>class="perpetua"</code></li>
<li>Inkwell: <code>class="inkwell"</code></li>
<li>Toaster: <code>class="toaster"</code></li>
<li>Walden: <code>class="walden"</code></li>
<li>Hudson: <code>class="hudson"</code></li>
<li>Gingham: <code>class="gingham"</code></li>
<li>Mayfair: <code>class="mayfair"</code></li>
<li>Lo-fi: <code>class="lofi"</code></li>
<li>X-Pro II: <code>class="xpro2"</code></li>
<li>1977: <code>class="_1977"</code></li>
<li>Brooklyn: <code>class="brooklyn"</code></li>
<li>Nashville: <code>class="nashville"</code></li>
</ul>
<hr>
<h3>Use Sass <code>@extends</code></h3>
<p>If you use custom naming in your CSS architecture, you can add the .scss files for the provided styles within your project and then <code>@extend</code> the filter effects within your style definitions. If you think extends are stupid, I will fight you 😊.</p>
<ol>
<li><a href="https://github.com/una/CSSgram/tree/master/source/scss" download>Download the /scss folder contents</a></li>
<li>Include a link to <code>scss/cssgram.scss</code> via an import statement in your Sass manifest file (i.e. <code>main.scss</code>). It may look like: <code>@import 'vendor/cssgram';</code></li>
<li>Extend the silent placeholder selector <code>@extend %aden;</code> in your element.</li>
</ol>
<p>For example:</p>
<pre><code>
<span class="comment">&lt;!-- HTML --&gt;</span>
&lt;figure class=<span class="highlight">"viz--beautiful"</span>&gt;
&lt;img src="../img.png"&gt;
&lt;/figure&gt;
</code></pre>
<pre><code>
<span class="comment">// Sass</span>
<span class="highlight">.viz--beautiful</span> {
@extend %aden;
}
</code></pre>
<small>Alternatively, you can just download and link any individual .scss file in your Sass manifest: <br> (i.e. <code>scss/aden.scss</code>), if you're just using one of the styles.</li></small>
<h3>Available Extends</h3>
<small><em>For use in Sass elements:</em></small>
<ul class="available-classes">
<li>Aden: <code>@extend %aden;</code></li>
<li>Reyes: <code>@extend %reyes;</code></li>
<li>Perpetua: <code>@extend %perpetua;</code></li>
<li>Inkwell: <code>@extend %inkwell;</code></li>
<li>Toaster: <code>@extend %toaster;</code></li>
<li>Walden: <code>@extend %walden;</code></li>
<li>Hudson: <code>@extend %hudson;</code></li>
<li>Gingham: <code>@extend %gingham;</code></li>
<li>Mayfair: <code>@extend %mayfair;</code></li>
<li>Lo-fi: <code>@extend %lofi;</code></li>
<li>X-Pro II: <code>@extend %xpro2;</code></li>
<li>1977: <code>@extend %_1977;</code></li>
<li>Brooklyn: <code>@extend %brooklyn;</code></li>
<li>Nashville: <code>@extend %nashville;</code></li>
</ul>
<hr>
</section>
<footer class="attribution">Made with love by <a href="http://twitter.com/una">Una</a> | <a href="http://github.com/una/CSSgram">View Source</a></footer>
<script>
var inputField = document.querySelector(".demo__input-img")
function pickSample(img) {
updateImages(img.src)
inputField.value = img.getAttribute("src")
}
function updateImages(src) {
var imgs = document.querySelectorAll(".demo__item img")
for (var i = 0; i < imgs.length; i++) imgs[i].src = src
}
document.addEventListener("click", function(event) {
if (/demo__option-img/.test(event.target.className)) pickSample(event.target)
}, false)
inputField.addEventListener("input", function() {
updateImages(this.value)
}, false)
inputField.addEventListener("focus", function() {
this.select()
}, false)
pickSample(document.querySelector(".demo__option-img"))
</script>
</body>
</html>