Skip to content

Instantly share code, notes, and snippets.

@peace098beat

peace098beat/Color.ViewModel.js

Last active July 14, 2016 00:11
Show Gist options
  • Save peace098beat/500836c5b94fa14edb65a9d00300e350 to your computer and use it in GitHub Desktop.
Save peace098beat/500836c5b94fa14edb65a9d00300e350 to your computer and use it in GitHub Desktop.
Download ZIP
[ColorPallete][Knockout.js]
Raw
Color.ViewModel.js
window.onload = function() {
function ColorModel(code) {
var self = this;
self.code = ko.observable(code);
}
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function ColorViewModel() {
var self = this;
self.colors = ko.observableArray([
new ColorModel("#0FF"),
new ColorModel("#FF1"),
new ColorModel("#F0F"),
new ColorModel("#F0F"),
new ColorModel("#F0F"),
new ColorModel("#F0F"),
new ColorModel("#F0F"),
new ColorModel("#F0F"),
new ColorModel("#F0F"),
]);
self.newColor = {
code: ko.observable(),
}
self.addContent = function(e) {
self.colors.push(
new ColorModel(self.newColor.color()));
self.newColor.code("");
};
self.removeContent = function(content) {
console.log("remove");
self.colors.remove(content);
};
self.save = function() {
$.POST();
};
self.load = function() {};
}
// Activates knockout.js
var colorViewModel = ColorViewModel();
ko.applyBindings(colorViewModel, document.getElementById('ColorViewModel'));
colorViewModel.load();
};
Raw
ColorPallete.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>Type it Yourself</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/skeleton.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- JS -->
<script src="./js/jquery.min.js"></script>
<!-- <script src="./bootstrap/js/bootstrap.min.js"></script> -->
<script src="./js/knockout.min.js"></script>
<!-- <script src="./js/user-script.js"></script> -->
<script src="./js/Color.ViewModel.js"></script>
</head>
<body id="ColorViewModel">
<div class="container">
<p class="align-center">COLOR PALLETE</p>
<!-- todo input -->
<div class="color-form">
<form action="#" data-bind="submit: addContent">
<label class="font-small glyphicon glyphicon-pencil "></label>
<input data-bind="value: newColor.code" type="text" placeholder="#F1F1F1"></input>
</form>
</div>
<!-- spacer -->
<div class="space40"></div>
<!-- todo list -->
</div>
<div class="container">
<p class="align-center">COLOR LIST</p>
<div id="color-list" data-bind="foreach: colors">
<div class=".one.columns pallete" data-bind="style:{backgroundColor:code}">
<span data-bind="text:code"></span>
</div>
</div>
</div>
<div class="container">
<!-- /TODO -->
<footer class="align-center color-gray font-small">
@fififactory
</footer>
<!-- <p data-bind="text: screensize">size:</p> -->
</div>
<!-- /container -->
</body>
</html>
Raw
skeleton.css
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
/*340px*/
padding: 0;
}
}
/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
width: 80%;
/*440px*/
}
.column,
.columns {
margin-left: 4%;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 4.66666666667%;
}
.two.columns {
width: 13.3333333333%;
}
.three.columns {
width: 22%;
}
.four.columns {
width: 30.6666666667%;
}
.five.columns {
width: 39.3333333333%;
}
.six.columns {
width: 48%;
}
.seven.columns {
width: 56.6666666667%;
}
.eight.columns {
width: 65.3333333333%;
}
.nine.columns {
width: 74.0%;
}
.ten.columns {
width: 82.6666666667%;
}
.eleven.columns {
width: 91.3333333333%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78.0%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
/* currently ems cause chrome bug misinterpreting rems on body element */
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222;
}
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
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;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Larger than phablet */
@media (min-width: 550px) {
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;
}
}
p {
margin-top: 0;
}
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
color: #1EAEDB;
}
a:hover {
color: #0FA0CE;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
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 {
color: #333;
border-color: #888;
outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0;
}
.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 {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB;
}
/* 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: .5rem;
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: .5rem;
font-weight: normal;
}
/* 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: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
li {
margin-bottom: 1rem;
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #E1E1E1;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem;
}
/* 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;
}
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #E1E1E1;
}
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both;
}
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
/* Common margin.css
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*------------------------------------------*
* margin系CSS
*------------------------------------------*/
.mt5 {
margin-top: 5px;
}
.mt10 {
margin-top: 10px;
}
.mt15 {
margin-top: 15px;
}
.mt20 {
margin-top: 20px;
}
.mr5 {
margin-right: 5px;
}
.mr10 {
margin-right: 10px;
}
.mr15 {
margin-right: 15px;
}
.mr20 {
margin-right: 20px;
}
.mb5 {
margin-bottom: 5px;
}
.mb10 {
margin-bottom: 10px;
}
.mb15 {
margin-bottom: 15px;
}
.mb20 {
margin-bottom: 20px;
}
.ml0 {
margin-left: 0px;
}
.ml5 {
margin-left: 5px;
}
.ml10 {
margin-left: 10px;
}
.ml15 {
margin-left: 15px;
}
.ml20 {
margin-left: 20px;
}
.ml40 {
margin-left: 40px;
}
.ml50 {
margin-left: 50px;
}
.mtb10 {
margin: 10px 0;
}
/*------------------------------------------*
* margin系CSS
*------------------------------------------*/
.left-contents {
float: left;
}
.right-contents {
float: right;
}
.clear {
height: 0;
clear: both;
}
.v-middle {
vertical-align: middle;
}
.v-bottom {
vertical-align: bottom;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
.notice {
color: #dd2200;
}
.block-center {
margin-right: auto;
margin-left: auto;
}
/*------------------------------------------*
* Back Gournd Color
*------------------------------------------*/
.bg-white {
background-color: rgba(255, 255, 255, 0.5);
}
.border-white {
border: 1px solid #FFF;
}
/*------------------------------------------*
* positionプロパティの値の種類、意味
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されず、初期値に配置します。（個人的に使わないです）
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです）
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となり、top、bottom、left、rightは適用されます。（個人的に単独では使わないです）
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。（IE6は対応出来ていません...）
*------------------------------------------*/
.relative {
position: relative;
}
Raw
style.css
/***************************************\
Type it Yourself
iPhone6 375 x 667
iPhone5 320 x 568
Mobile 300 x 550
blue:#014262 -> #31708;
\***************************************/
html {
width: 100%;
height: 100%;
/*background-color: #31708F;*/
}
body {
/*background-color: #31708F;*/
}
.bg-grad-blue {
background: linear-gradient( to bottom, #014262, #31708F 50%, #31708F);
background-repeat: no-repeat;
}
/***************************************\
Util
\***************************************/
.color-black {
color: #000;
}
.color-white {
color: #FFF;
}
.color-gray {
color: #eee;
}
.font-small {
font-size: 0.8em;
}
.space200 {
height: 200px;
}
.space20 {
height: 20px;
}
.space40 {
height: 40px;
}
/***************************************\
Input Area
\***************************************/
form {
margin: 0px;
}
.color-form {
max-width: 200px;
text-align: center;
border-bottom: 1px solid #D1D1D1;
margin: 0px auto;
}
.color-form input {
width: 170px;
height: 1em;
background-color: rgba(0, 0, 0, 0);
border: none;
margin: 0px;
}
.color-form label {
margin-left: -10px;
}
/***************************************\
Pallete
\***************************************/
.pallete {
width: 100px;
height: 100px;
/*border: 1px solid #ccc;*/
border-radius: 50px;
display: table;
margin: 5px;
box-sizing: border-box;
float: left;
}
.pallete::after {
clear: both;
}
.pallete span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment