1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-20 04:31:29 +02:00

Made images responsive by default, added to base

This commit is contained in:
Angelos Chalaris
2016-08-24 14:59:21 +03:00
parent cef1ce30cf
commit 473cbac5e2
5 changed files with 19 additions and 8 deletions

View File

@@ -3,7 +3,7 @@ A minimal, responsive CSS framework to get you started.
## Components ## Components
- **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,186 bytes - **base**: normalize.css & basic typography `GZIPPED SIZE`: 1,195 bytes
- **button**: button styles `GZIPPED SIZE`: 427 bytes - **button**: button styles `GZIPPED SIZE`: 427 bytes
- **form**: form styles `GZIPPED SIZE`: 517 bytes - **form**: form styles `GZIPPED SIZE`: 517 bytes
- **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes - **grid**: default 12-column grid `GZIPPED SIZE`: 447 bytes

View File

@@ -16,8 +16,9 @@ body {
/* /*
Correct display in IE 9-. Correct display in IE 9-.
Give images display: block to be responsive.
*/ */
article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { article, aside, footer, header, nav, section, figcaption, figure, main, details, menu, img {
display: block; } display: block; }
/* /*
@@ -206,9 +207,11 @@ sup {
/* /*
Remove the border on images inside links in IE 10-. Remove the border on images inside links in IE 10-.
Make images responsive.
*/ */
img { img {
border-style: none; } border-style: none;
max-width: 100%; }
/* /*
Hide the overflow in IE. Hide the overflow in IE.
@@ -284,8 +287,9 @@ textarea {
/* /*
Correct the cursor style of increment and decrement buttons in Chrome. Correct the cursor style of increment and decrement buttons in Chrome.
Make images responsive.
*/ */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button, img {
height: auto; } height: auto; }
/* /*

File diff suppressed because one or more lines are too long

View File

@@ -16,8 +16,9 @@ body {
} }
/* /*
Correct display in IE 9-. Correct display in IE 9-.
Give images display: block to be responsive.
*/ */
article, aside, footer, header, nav, section, figcaption, figure, main, details, menu { article, aside, footer, header, nav, section, figcaption, figure, main, details, menu, img {
display: block; display: block;
} }
/* /*
@@ -201,9 +202,11 @@ sup {
} }
/* /*
Remove the border on images inside links in IE 10-. Remove the border on images inside links in IE 10-.
Make images responsive.
*/ */
img { img {
border-style: none; border-style: none;
max-width: 100%;
} }
/* /*
Hide the overflow in IE. Hide the overflow in IE.
@@ -281,8 +284,9 @@ textarea {
} }
/* /*
Correct the cursor style of increment and decrement buttons in Chrome. Correct the cursor style of increment and decrement buttons in Chrome.
Make images responsive.
*/ */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button, img {
height: auto; height: auto;
} }
/* /*

View File

@@ -129,7 +129,10 @@ Suspendisse varius turpis et dui viverra semper.</pre>
</div> </div>
</fieldset> </fieldset>
</form> </form>
<h3>Notes for the demo page</h3>
<ul>
<li>Responsive images are part of the _base.</li>
</ul>
</body> </body>
</html> </html>