diff options
add media/images code
5 files changed, 23 insertions, 0 deletions
| -rw-r--r-- | demo/img/apple-el-capitan.jpg | bin | 0 -> 347819 bytes | |||
| -rw-r--r-- | demo/index.html | 11 | ||||
| -rw-r--r-- | dist/spectre.css | 5 | ||||
| -rw-r--r-- | spectre.less | 1 | ||||
| -rw-r--r-- | src/media.less | 6 |
diff --git a/demo/img/apple-el-capitan.jpg b/demo/img/apple-el-capitan.jpg Binary files differnew file mode 100644 index 0000000..f469599 --- /dev/null +++ b/demo/img/apple-el-capitan.jpg diff --git a/demo/index.html b/demo/index.html index 5d642e5..18b7714 100644 --- a/demo/index.html +++ b/demo/index.html @@ -194,6 +194,17 @@ </div> </div> </section> + <section class="media"> + <header class="text-center"><h4>media</h4></header> + <div class="columns"> + <div class="column col-6"> + <img src="img/apple-el-capitan.jpg" class="img-responsive rounded" /> + </div> + <div class="column col-6"> + <img src="img/apple-el-capitan.jpg" class="img-responsive rounded" /> + </div> + </div> + </section> <section class="tooltips"> <header class="text-center"><h4>tooltips</h4></header> <div class="columns"> diff --git a/dist/spectre.css b/dist/spectre.css index aed5fa6..7522e88 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -605,6 +605,11 @@ ol ol { width: 8.33333333%; } } +.img-responsive { + display: block; + max-width: 100%; + height: auto; +} table { width: 100%; } diff --git a/spectre.less b/spectre.less index c5ebcf0..3e0e3c6 100644 --- a/spectre.less +++ b/spectre.less @@ -11,6 +11,7 @@ // Core classes @import 'src/typography.less'; @import 'src/layout.less'; +@import 'src/media.less'; @import 'src/tables.less'; @import 'src/buttons.less'; @import 'src/forms.less'; diff --git a/src/media.less b/src/media.less new file mode 100644 index 0000000..5d24648 --- /dev/null +++ b/src/media.less @@ -0,0 +1,6 @@ +// Media +.img-responsive { + display: block; + max-width: 100%; + height: auto; +}
\ No newline at end of file |
