https://github.com/cferdinandi/snapshot
Simple image styling.
https://github.com/cferdinandi/snapshot
Last synced: 4 months ago
JSON representation
Simple image styling.
- Host: GitHub
- URL: https://github.com/cferdinandi/snapshot
- Owner: cferdinandi
- License: mit
- Created: 2013-02-06T16:07:47.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2016-08-27T16:50:47.000Z (over 9 years ago)
- Last Synced: 2025-04-08T03:42:43.837Z (9 months ago)
- Language: CSS
- Homepage:
- Size: 67.4 KB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Snapshot [](https://travis-ci.org/cferdinandi/snapshot)
Simple image styling.
[Download Snapshot](https://github.com/cferdinandi/snapshot/archive/master.zip) / [View the demo](http://cferdinandi.github.io/snapshot/)
## Getting Started
Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code.
### 1. Include Snapshot on your site.
```html
```
Snapshot is [built with Sass](http://sass-lang.com/) 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](http://cferdinandi.github.io/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.
### 2. Add the markup to your HTML.
```html
```
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!
## Installing with Package Managers
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`
## Working with the Source Files
If you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code, and runs unit tests. It's the same build system that's used by [Kraken](http://cferdinandi.github.io/kraken/), so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration.
### Dependencies
Make sure these are installed first.
* [Node.js](http://nodejs.org)
* [Gulp](http://gulpjs.com) `sudo npm install -g gulp`
### Quick Start
1. In bash/terminal/command line, `cd` into your project directory.
2. Run `npm install` to install required files.
3. 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](http://livereload.com/).
## Browser Compatibility
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.
## How to Contribute
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.
## License
The code is available under the [MIT License](LICENSE.md).