BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity
fd0167a9f3
Bones/css/barebones.css

474 lines
13 KiB
CSS
Raw Normal View History

removing jquery (only using Google CDN now); refactoring layout.css media queries to be more straightforward and better commented; Fixed tabs for CSS to use first-child so it would have all the borders even in IE
2011-08-18 00:05:28 -04:00
/*
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
* Barebones V3
* Copyright 2019 Steve Cochran
*
* Based of Skeleton by Dave Gamache
*
moving up to version 1.0.1 and making some slight changes in the CSS
2011-05-19 15:05:30 -04:00
* Free to use under the MIT license.
initial file dump with some early modifications
2011-05-01 11:43:13 -04:00
*/
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Table of contents
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
––––––––––––––––––––––––––––––––––––––––––––––––––
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
- Media Breakpoints
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
- Variables
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
broke the grid into a spearate file from base called skeleton, really really refined the grid across different devices (although it still needs a lot of testing). I've also started a documentation
2011-05-04 21:20:56 -04:00
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
/* ENV Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Media breakpoint variables for use in media queries
* Note: this section is currently commented out pending release of
* final CSS env() spec
* Breakpoints based on
* https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
*
*/
/* CSS Variables
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
–––––––––––––––––––––––––––––––––––––––––––––––––– */
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
html {
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
/* default theme: light background, dark text, blue accent */
--theme-hue: 0; /* white */
--accent-hue: 194; /* blue */
--text-color-richer: hsl(var(--theme-hue), 0%, 5%); /* #0d0d0d */
--text-color-normal: hsl(var(--theme-hue), 0%, 13%); /* #222222 text color; button:hover:focus color */
--text-color-softer: hsl(var(--theme-hue), 0%, 33%); /* #555555 button color; button:hover border */
--accent-color: hsl(var(--accent-hue), 86%, 57%); /* #33C3F0 link; button-primary bg+border; textarea,select:focus border */
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
--accent-color-hover: hsl(var(--accent-hue), 76%, 49%); /* #1EAEDB link hover; button-primary:hover:focus bg+border */
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
--border-color: hsl(var(--theme-hue), 0%, 73%); /* #bbbbbb button border */
--border-color-softer: hsl(var(--theme-hue), 0%, 82%); /* #d1d1d1 textarea,select,code,td,hr border */
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
--background-color: white; /* transparent body background; textarea,select background */
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
--background-color-softer: hsl(var(--theme-hue), 0%, 95%);
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
--code-background: hsl(var(--theme-hue), 0%, 95%); /* #f1f1f1 code background*/
--button-primary-color: white;
/* Note: Skeleton was based off a 10px font sizing for REM */
/* 62.5% of typical 16px browser default = 10px */
--base-font-size: 62.5%;
/* Grid Defaults - default to match orig skeleton settings */
--grid-max-width: 960px;
}
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
/* Dark Theme
Note: prefers-color-scheme selector support is still limited, but
included for future and an example of defining a different base 'theme'
*/
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
@media (prefers-color-scheme: dark) {
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
:html {
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
/* dark theme: light background, dark text, blue accent */
--theme-hue: 0; /* black */
--accent-hue: 194; /* blue */
--text-color-richer: hsl(var(--theme-hue), 0%, 95%); /* */
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
--text-color-normal: hsl(var(--theme-hue), 0%, 80%); /* text color; button:hover:focus color */
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
--text-color-softer: hsl(var(--theme-hue), 0%, 67%); /* button color; button:hover border */
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
--accent-color: hsl(var(--accent-hue), 76%, 49%); /* link; button-primary bg+border; textarea,select:focus border */
--accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* link hover; button-primary:hover:focus bg+border */
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
--border-color: hsl(var(--theme-hue), 0%, 27%); /* button border */
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
--border-color-softer: hsl(var(--theme-hue), 0%, 20%); /* textarea,select,code,td,hr border */
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
--background-color: hsl(var(--theme-hue), 0%, 12%); /* body background; textarea,select background */
--background-color-softer: hsl(var(--theme-hue), 0%, 18%);
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
--code-background: hsl(var(--theme-hue), 0%, 5%); /* code background*/
--button-primary-color: white;
}
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
img.value-img {
filter: invert(0.8);
}
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
/* TODO - test dialing back image intensity on dark background
img {
opacity: .80;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1;
}
*/
}
removing jquery (only using Google CDN now); refactoring layout.css media queries to be more straightforward and better commented; Fixed tabs for CSS to use first-child so it would have all the borders even in IE
2011-08-18 00:05:28 -04:00
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
than with skeleton. Only basic 1-4 column grids are included.
Any additional needs should be made using custom CSS directives */
.grid-container {
position: relative;
max-width: var(--grid-max-width);
margin: 0 auto;
padding: 20px;
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
text-align: center;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
display: grid;
grid-gap: 20px;
gap: 20px;
/* by default use min 200px wide columns auto-fit into width */
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
grid-template-columns: minmax(200px, 1fr);
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
}
initial file dump with some early modifications
2011-05-01 11:43:13 -04:00
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
/* grids to 3 columns above mobile sizes */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
padding: 10px 0;
}
Modify utility grid classes to be mobile first responsive Also added minor utility functions.
2019-01-26 16:31:27 -05:00
/* basic grids */
.grid-container.fifths {
grid-template-columns: repeat(5, 1fr);
}
.grid-container.quarters {
grid-template-columns: repeat(4, 1fr);
}
.grid-container.thirds {
grid-template-columns: repeat(3, 1fr);
}
.grid-container.halves {
grid-template-columns: repeat(2, 1fr);
}
.grid-container.full {
grid-template-columns: 1fr;
}
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
}
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
Modify utility grid classes to be mobile first responsive Also added minor utility functions.
2019-01-26 16:31:27 -05:00
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
html {
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
font-size: var(--base-font-size);
scroll-behavior: smooth;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
}
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
body {
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
font-size: 1.6rem; /* changed from 15px in orig skeleton */
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
color: var(--text-color-normal);
background-color: var(--background-color);;
}
removing jquery (only using Google CDN now); refactoring layout.css media queries to be more straightforward and better commented; Fixed tabs for CSS to use first-child so it would have all the borders even in IE
2011-08-18 00:05:28 -04:00
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
h1, h2, h3, h4, h5, h6 {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
margin-top: 0;
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
margin-bottom: 2rem;
font-weight: 300; }
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
initial file dump with some early modifications
2011-05-01 11:43:13 -04:00
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
/* Larger than phablet */
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
@media (min-width: 600px) {
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
h1 { font-size: 5.0rem; }
h2 { font-size: 4.2rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 3.0rem; }
h5 { font-size: 2.4rem; }
h6 { font-size: 1.5rem; }
}
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
p {
margin-top: 0; }
first version of 2.0 WIP
2014-11-20 19:38:45 -05:00
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
a {
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
color: var(--accent-color); }
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
a:hover {
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
color: var(--accent-color-hover); }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
/* Buttons
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
height: 38px;
padding: 0 30px;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
color: var(--text-color-softer);
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
text-transform: uppercase;
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
text-decoration: none;
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
white-space: nowrap;
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
background-color: transparent;
border-radius: 4px;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
border: 1px solid var(--border-color);
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
cursor: pointer;
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
color: var(--text-color-normal);
border-color: var(--text-color-softer);
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
color: var(--button-primary-color);
background-color: var(--accent-color);
border-color: var(--accent-color); }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
color: var(--button-primary-color);
background-color: var(--accent-color-hover);
border-color: var(--accent-color-hover); }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
Added missing CSS rule for input[type="number"]
2014-12-26 16:00:00 -05:00
input[type="number"],
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
input[type="search"],
input[type="text"],
adding support for input['tel'] and input['url'] and cleaning up a few other form styles
2014-12-15 19:49:25 -05:00
input[type="tel"],
input[type="url"],
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
input[type="password"],
textarea,
select {
fixing the height of inputs
2014-12-15 19:53:01 -05:00
height: 38px;
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
background-color: var(--background-color);
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
border: 1px solid var(--border-color-softer);
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
border-radius: 4px;
adding support for input['tel'] and input['url'] and cleaning up a few other form styles
2014-12-15 19:49:25 -05:00
box-shadow: none;
box-sizing: border-box; }
Cherry picked a typo
2014-12-16 14:58:03 -05:00
/* Removes awkward default styles on some inputs for iOS */
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
input[type="email"],
Added missing CSS rule for input[type="number"]
2014-12-26 16:00:00 -05:00
input[type="number"],
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
input[type="search"],
input[type="text"],
adding support for input['tel'] and input['url'] and cleaning up a few other form styles
2014-12-15 19:49:25 -05:00
input[type="tel"],
input[type="url"],
input[type="password"],
Fix rendering of some input buttons on iOS
2019-01-26 23:17:19 -05:00
input[type="button"],
input[type="submit"],
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
textarea {
-webkit-appearance: none;
-moz-appearance: none;
cleaning up small indentation and spacing
2014-12-15 20:15:55 -05:00
appearance: none; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
textarea {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
input[type="email"]:focus,
Added missing CSS rule for input[type="number"]
2014-12-26 16:00:00 -05:00
input[type="number"]:focus,
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
input[type="search"]:focus,
input[type="text"]:focus,
adding support for input['tel'] and input['url'] and cleaning up a few other form styles
2014-12-15 19:49:25 -05:00
input[type="tel"]:focus,
input[type="url"]:focus,
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
input[type="password"]:focus,
textarea:focus,
select:focus {
Converted to use: - CSS Grid - CSS Variables Added skeleton-legacy.css to provide feature/class equiv to orig boilerplate
2019-01-21 10:38:55 -05:00
border: 1px solid var(--accent-color);
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
outline: 0; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
label,
legend {
display: block;
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
margin-bottom: .5rem;
font-weight: 600; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
fieldset {
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
padding: 0;
border-width: 0; }
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
input[type="checkbox"],
input[type="radio"] {
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
display: inline; }
label > .label-body {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
display: inline-block;
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
margin-left: .5rem;
font-weight: normal; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
ul {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
list-style: circle inside; }
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
ol {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
list-style: decimal inside; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
ol, ul {
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
padding-left: 0;
margin-top: 0; }
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
ul ul, ul ol, ol ol, ol ul {
font-size: 100%;
margin: 1rem 0 1rem 3rem;
color: var(--text-color-softer);
}
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
li {
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
margin-bottom: 0.5rem; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
white-space: nowrap;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
background: var(--code-background);
border: 1px solid var(--border-color-softer);
changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/
2014-12-15 19:25:32 -05:00
border-radius: 4px; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
pre > code {
display: block;
padding: 1rem 1.5rem;
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
white-space: pre;
overflow: auto; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
padding: 12px 15px;
text-align: left;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
border-bottom: 1px solid var(--border-color-softer); }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
th:first-child,
td:first-child {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
padding-left: 0; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
th:last-child,
td:last-child {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
padding-right: 0; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
margin-bottom: 1rem; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
input,
textarea,
select,
fieldset {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
margin-bottom: 1.5rem; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
margin-bottom: 2.5rem; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
width: 100%;
box-sizing: border-box; }
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
.u-pull-right {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
float: right; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
.u-pull-left {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
float: left; }
Modify utility grid classes to be mobile first responsive Also added minor utility functions.
2019-01-26 16:31:27 -05:00
.u-align-left {
text-align: left; }
.u-align-right {
text-align: right; }
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
Replaced all colors with CSS vars Added initial theme support and dark theme Replaced Skeleton grid classes with basic CSS grid utilities Note: did not try to replicate the 12 column functionality
2019-01-21 05:22:36 -05:00
border-top: 1px solid var(--border-color-softer); }
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
removing old icons and adding new. Adding colophon. Cleaning up a few other things probably
2014-12-01 21:26:32 -05:00
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
.u-cf {
adding in the offsets and a few other small things
2014-12-09 14:12:30 -05:00
content: "";
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
display: table;
clear: both; }
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
Note: The best way to structure the use of media queries is to create the queries
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
near the relevant code. For example, if you wanted to change the styles for buttons
removing all trailing whitespaces
2014-12-29 11:47:24 -05:00
on small devices, paste the mobile query code up in the buttons section and style it
there.
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
*/
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
/* Larger than mobile (default point when grid becomes active) */
@media (min-width: 600px) {}
adding readme and small cleanup
2014-12-01 15:59:46 -05:00
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
/* Larger than phablet */
@media (min-width: 900px) {}
one step closer to v 2.0. Remove apple touch icons, getting rid of old base and layout files, removing outdating reference css, cleaning up pre and code, adding a show code toggle to docs and the crazy js that goes with that, slightly changing button and input styles
2014-12-01 06:02:51 -05:00
/* Larger than tablet */
Spelling Mistake Spelling Mistake on Line 373 says secion instead of section.
2014-12-10 04:47:46 -05:00
@media (min-width: 1200px) {}
Update with changes made while updating index.html Mostly minor changes made to fix or improve minor issues found while updating index.html from Skeleton repo.
2019-01-26 09:56:00 -05:00
Reference in New Issue Copy Permalink