https://github.com/simonsmith/suitcss-utils-image

CSS image utilities
https://github.com/simonsmith/suitcss-utils-image

css responsive suitcss utility

Last synced: 20 days ago
JSON representation

CSS image utilities

• Host: GitHub
• URL: https://github.com/simonsmith/suitcss-utils-image
• Owner: simonsmith
• License: mit
• Created: 2017-04-30T22:59:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-01T20:10:33.000Z (over 7 years ago)
• Last Synced: 2024-04-25T04:21:49.911Z (7 months ago)
• Topics: css, responsive, suitcss, utility
• Language: HTML
• Homepage: https://simonsmith.io/suitcss-utils-image/test/index.html
• Size: 30.3 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# SUIT CSS utilities: image

[![Build Status](https://travis-ci.org/simonsmith/suitcss-utils-image.svg?branch=master)](https://travis-ci.org/simonsmith/suitcss-utils-image)

SUIT CSS image utilities

* Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).

## Installation

* [npm](http://npmjs.org/): `npm install suitcss-utils-image`

* Download: [zip](https://github.com/simonsmith/suitcss-utils-image/releases/latest)

## Available classes

* `u-imgResponsive` - Allow an image to respond to its container size

## Usage

```html



```

### Configuration

#### Overriding the display property on responsive images

By default responsive images are set to `display: block` but this can be overridden with

another utility, such as [suitcss-utils-display](https://github.com/suitcss/utils-display)

```html



```

Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)

## Testing

Install [Node](http://nodejs.org) (comes with npm).

```

npm install

```

To generate a build:

```

npm run build

```

To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)

```

npm run lint

```

To generate the testing build.

```

npm run build-test

```

To watch the files for making changes to test:

```

npm run watch

```

Basic visual tests are in `test/index.html`.

## Browser support

* Google Chrome

* Opera

* Firefox

* Safari

* Internet Explorer 8+

* Android 4.1+

* iOS 6+

* Windows phone 8.1+