una / cssgram Goto Github PK
View Code? Open in Web Editor NEWCSS library for Instagram filters
Home Page: http://una.github.io/CSSgram/
License: MIT License
CSS library for Instagram filters
Home Page: http://una.github.io/CSSgram/
License: MIT License
Hi,
I'm not sure this is an issue, you may have your reasons to do it.
In cssgram.scss we import shared.scss but we also do it in every filter .scss
.
Is there a reason to do that? The resulting CSS is double the size. If there's a reason to it, we may need a small settings.scss
file to choose filters, different variables, or even if we want to create the class or live happyly ever after only with extend.
Willow doesn't display in Safari (there is only a grayed square) until hovered over, when the normal unprocessed image appears.
The test page is missing a few filters. Let's document which ones exist and which ones are in need of getting added.
Since it is included as of #87 -- we might as well use the benefits of templating to display the site
And doesn't look like crap when resized or accessed on mobile
Make sure that the usage of this library is clear
Advantages:
Disadvantages:
gulpfile
Could prefix with cssgram-
also, less clear, but helps in finding this repo.
I add a Chinese README-CN.md file to help Chinese web developer apply these funny filter on their projects. ๐
PR here: #164
Gulp Sass should be a version greater than 2 and there should be engine restrictions as well :)
https://github.com/Stephn-R/CSSgram/blob/master/package.json#L34
Currently both use their own filters list:
test page:
{% set filters = [
{name: 'aden', is_done: true},
{name: 'amaro', is_done: false},
{name: 'brannan', is_done: false},
{name: 'crema', is_done: false},
{name: 'earlybird', is_done: true},
{name: 'hefe', is_done: false},
{name: 'hudson', is_done: true},
{name: 'inkwell', is_done: true},
{name: 'juno', is_done: false},
{name: 'lark', is_done: true},
{name: 'lofi', is_done: true},
{name: 'ludwig', is_done: false},
{name: 'mayfair', is_done: true},
{name: 'nashville', is_done: true},
{name: 'perpetua', is_done: true},
{name: 'reyes', is_done: true},
{name: 'rise', is_done: false},
{name: 'sierra', is_done: false},
{name: 'slumber', is_done: false},
{name: 'valencia', is_done: false},
{name: 'willow', is_done: false},
{name: 'xpro2', is_done: true},
] %}
demo site:
{% set filters = [
{name: 'Aden', usage: 'aden'},
{name: 'Reyes', usage: 'reyes'},
{name: 'Perpetua', usage: 'perpetua'},
{name: 'Inkwell', usage: 'inkwell'},
{name: 'Earlybird', usage: 'earlybird'},
{name: 'Toaster', usage: 'toaster'},
{name: 'Walden', usage: 'walden'},
{name: 'Hudson', usage: 'hudson'},
{name: 'Gingham', usage: 'gingham'},
{name: 'Mayfair', usage: 'mayfair'},
{name: 'Lo-Fi', usage: 'lofi'},
{name: 'X-Pro2 II', usage: 'xpro2'},
{name: '1977', usage: '_1977'},
{name: 'Brooklyn', usage: 'brooklyn'},
{name: 'Nashville', usage: 'nashville'},
{name: 'Lark', usage: 'lark'},
] %}
These could likely be combined:
{% set filters = [
{name: 'Aden', is_done: true, usage: 'aden'},
{name: 'Amaro', is_done: false, usage:'tbd'},
] %}
And only the finished filters would show up with usage on the demo site. That being said, we need parity with all of the test files and existing filters that exist first See #96
You might wanna check out the postcss-instagram
plugin for PostCSS for inspiration.
I really like where you're going with this though and great name choice! ๐ ๐
These should be clickable (i.e. click to change it to the cactus example, etc.) or allow people to insert their own images
hi, we want to add your lib to cdnjs with git auto-update.
can we regard source folder as a dist folder and get files from it for every later version?
thank you very much!
cdnjs/cdnjs#6227
demo-site.css
seems to be updated manually. I'd suggest a gulp task to build this file and the min version.
There is a repetition of the code in the CSS file because "shared" is imported all SCSS files
Needs some work -- give it a background so it stands out from the white text behind it
I keep getting: [gulp-gh-pages]: No files have changed.
Even though files in /site are changed
hi, could you update a tag to 0.1.3
, so we can add the latest version to https://cdnjs.com with git autoupdate.
thank you very much!
cdnjs/cdnjs#6227
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.