Simple image styling.
Download Snapshot / View the demo
Compiled and production-ready code can be found in the dist
directory. The src
directory contains development code.
<link rel="stylesheet" href="dist/css/snapshot.css">
Snapshot is built with Sass for easy customization. If you don't use Sass, that's ok. The css
folder contains compiled vanilla CSS.
The _config.scss
and _mixins.scss
files are the same ones used in Kraken, so you can drop the _snapshot.css
file right into Kraken without making any updates. Or, adjust the variables to suit your own project.
<img class="img-circle" src="#">
<img class="img-border" src="#">
<img class="img-photo" src="#">
Add simple .img-*
classes to any img
element to add styling. You can combine classes for additional styling options. Mix-and-match as desired.
And that's it, you're done. Nice work!
You can install Snapshot with your favorite package manager.
- NPM:
npm install cferdinandi/snapshot
- Bower:
bower install https://github.com/cferdinandi/snapshot.git
- Component:
component install cferdinandi/snapshot
If you would prefer, you can work with the development code in the src
directory using the included Gulp build system. This compiles, lints, and minifies code, and runs unit tests. It's the same build system that's used by Kraken, so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration.
Make sure these are installed first.
- In bash/terminal/command line,
cd
into your project directory. - Run
npm install
to install required files. - When it's done installing, run one of the task runners to get going:
gulp
manually compiles files.gulp watch
automatically compiles files when changes are made and applies changes using LiveReload.
Because IE 8 and lower do not support the border-radius
property, .img-circle
will not work in those browsers.
Snapshot is fully supported by IE 9 and higher, and all modern browsers.
In lieu of a formal style guide, take care to maintain the existing coding style. Please apply fixes to both the development and production code. Don't forget to update the version number, and when applicable, the documentation.
The code is available under the MIT License.