Skip to content

Commit

Permalink
New theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@atomicpages
atomicpages committed Jan 9, 2017
1 parent 37fc904 commit b73f261
Show file tree
Hide file tree
Showing 4 changed files with 354 additions and 1 deletion.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ Skeleton # Where all of the magic happens
└── themes # Where all of the themes live
├── fresh
│   ├── _base.scss contains # All of the base styles for Skeleton Sass with the exception of the reset styles
│   ├── _skeleton.scss
│   ├── _skeleton.scss
│   ├── _vars.scss # Project-scoped configuration options and variables
│   └── marrow # Stores all project-level functions and mixins
│   └── _mixins.scss # loads the default theme mixins and functions from sphenoid
Expand Down Expand Up @@ -376,3 +376,5 @@ Contributors
* **Note:** as a result of his work we can finally close [issue #16](https://github.com/atomicpages/skeleton-sass/issues/16)
* [seshaljain](https://github.com/seshaljain)
* [Issue #22](https://github.com/atomicpages/skeleton-sass/issues/22)
* [pcbulai](https://github.com/pcbulai)
* [Issue #24](https://github.com/atomicpages/skeleton-sass/issues/24)
339 changes: 339 additions & 0 deletions skeleton/themes/wing/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,339 @@
// The foundation of Skeleton which includes all base styles
// that come bundled by default.
// See skeleton/core/_config.scss for default variable values.
// See _vars.scss for theme-scoped default values.

/* Normalize
* ------------------------------------------------ */
@include normalize();

/* BASIC STYLES
* ------------------------------------------------ */
html {
font-size: percentage(strip-units($base-font-size) / 16);
box-sizing: border-box;
margin: 0;
padding: 0;
}
@if($use-global-border-box) {
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
body {
letter-spacing: 0.01em;
background: $background-color;
font: {
family: $font-family;
weight: $font-weight;
style: normal;
}
@include font-size($font-size);
line-height: 1.6;
color: $font-color;
}

/* TYPOGRAPHY
* ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
color: $heading-color;
font: {
family: $heading-family;
weight: $heading-weight;
}
margin-top: 0;
margin-bottom: relative(20px);
}
h1, h2, h3 { letter-spacing: -0.1rem; }
h1 {
font-size: relative(40px);
line-height: 1.2;
}
h2 {
font-size: relative(36px);
line-height: 1.25;
}
h3 {
font-size: relative(30px);
line-height: 1.3;
}
h4 {
font-size: relative(24px);
line-height: 1.35;
letter-spacing: -0.08rem;
}
h5 {
font-size: relative(18px);
line-height: 1.5;
letter-spacing: -0.05rem;
}
h6 {
font-size: relative(15px);
line-height: 1.6;
letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
h1 { font-size: relative(50px); }
h2 { font-size: relative(42px); }
h3 { font-size: relative(36px); }
h4 { font-size: relative(30px); }
h5 { font-size: relative(24px); }
h6 { font-size: relative(15px); }
}

p { margin-top: 0; }

/* LINKS
* ------------------------------------------------ */
a, a:visited {
color: $link-color;
text-decoration: $link-decoration;
}
a:hover, a:focus, a:active { color: $link-hover; }

/* LISTS
* ------------------------------------------------ */
ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: relative(15px) 0 relative(15px) relative(30px);
font-size: 90%;
}
li { margin-bottom: relative(10px); }

/* CODE
* ------------------------------------------------ */
code {
padding: relative(2px) relative(5px);
margin: 0 relative(2px);
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code {
display: block;
padding: relative(10px) relative(15px);
white-space: pre;
}

/* TABLES
* ------------------------------------------------ */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1;
&:first-child { padding-left: 0; }
&:last-child { padding-right: 0; }
}

/* UTILITIES
* ------------------------------------------------ */
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right { float: right; }
.u-pull-left { float: left; }

/* IMAGES
* ------------------------------------------------ */
img.scale-with-grid {
max-width: 100%;
height: auto;
}

/* BUTTONS
* ------------------------------------------------ */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
overflow: hidden;
display: inline-block;
margin: relative(10px);
padding: relative(12px) relative(12px);
-webkit-user-select: none;
user-select: none;
-webkit-transition: all 60ms ease-in-out;
transition: all 60ms ease-in-out;
color: $button-color;
text-align: center;
font-family: inherit;
line-height: 1.3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-weight: $button-weight;
text-transform: if($button-font-uppercase, uppercase, none);
text-decoration: none;
white-space: nowrap;
background-color: $button-bg-color;
border-radius: 4px;
border: 0 none;
cursor: pointer;
&:hover {
-webkit-transition: all 60ms ease;
transition: all 60ms ease;
opacity: 0.85;
}
&:disabled {
opacity: 0.8;
cursor: not-allowed;
}
&:focus { outline: 0 none; }
&:active {
-webkit-transition: all 60ms ease;
transition: all 60ms ease;
-webkit-transform: scale(0.97);
transform: scale(0.97);
opacity: 0.75;
}
&.outline {
border: 3px solid $button-outline-border-color;
color: $button-color;
background: transparent;
transition: all 0.5s ease;
&:hover, &:active {
color: #000;
background: #fff;
}
}
&.outline-inverted {
border: 3px solid #000;
color: #000;
background: transparent;
transition: all 0.5s ease;
&:hover, &:active {
color: #fff;
background: #000;
}
}
&.clear {
background: transparent;
color: gray;
}
}

/* Fix for odd Mozilla border & padding issues */
button,
input {
&::-moz-focus-inner {
border: 0;
padding: 0;
}
}

/* FORMS
* ------------------------------------------------ */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33C3F0;
outline: 0;
}
label,
legend {
display: block;
margin-bottom: relative(5px);
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 0;
}
input[type="checkbox"],
input[type="radio"] { display: inline; }
label > .label-body {
display: inline-block;
margin-left: relative(5px);
font-weight: normal;
}

/* SPACING
* ------------------------------------------------ */
button,
.button { margin-bottom: relative(10px); }
input,
textarea,
select,
fieldset { margin-bottom: relative(15px); }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form { margin-bottom: relative(25px); }

/* MISC
* ------------------------------------------------ */
hr {
margin-top: relative(30px);
margin-bottom: relative(35px);
border-width: 0;
border-top: 1px solid #E1E1E1;
}
1 change: 1 addition & 0 deletions skeleton/themes/wing/_skeleton.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "../fresh/skeleton";
11 changes: 11 additions & 0 deletions skeleton/themes/wing/_vars.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
$font-size: 1.5rem;
$font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$heading-weight: 300;
$heading-family: "Quicksand", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

// Buttons
$button-color: #fff;
$button-font-uppercase: true;
$button-bg-color: #333030;
$button-weight: 500;
$button-outline-border-color: $button-color;

0 comments on commit b73f261

Please sign in to comment.