Contributions are welcome!
- Look if there is an existing issue for your case.
- If there isn't an existing issue, then create one.
- Fork this repository
- Clone the fork onto your system
npm install
dependencies (must have Node installed)- Run
gulp
which starts dev server, watches and does compilations to .dev folder In master: gulp build: does compilation, files are generated in the respective folders gulp server: starts server in root to view compiled files after master build - Make changes (e.g. edit the .scss file related to the filter) and check the test site with your changes (see file structure outline below)
- Submit a PR referencing the issue with a smile 😄
Filters are really fun to create! Reference photos created by Miles Croxford can be found here.
source/css/cssgram.css
contains each of the CSS classes you can apply to your<img>
to give it the filter. You should usesource/css/cssgram.min.css
for production if you want access to all of the librarysource/scss/
contains the source files for individual classes and placeholder selectors you can use to extend CSS classes in Sasssite/
is the public facing websitesite/test
is how you test filters if you're developing, remember to changeis_done
for the filter you are creating insite/filters.json
.
Note: This will also have mixin options and a PostCSS Component.