Permalink
Browse files

Genesis.

  • Loading branch information...
0 parents commit ca4d3a4ed2a056ca6d7b56322ecac310f5cf0a9e @oliverzheng committed Jan 29, 2015
@@ -0,0 +1,5 @@
+[ignore]
+.*/build/.*
+
+[options]
+module.system=node
@@ -0,0 +1,3 @@
+build/*
+bower_components
+node_modules
@@ -0,0 +1,20 @@
+{
+ "name": "howtocenterincss",
+ "version": "0.0.0",
+ "authors": [
+ "Oliver Zheng <gitcommits@oliverzheng.com>"
+ ],
+ "license": "MIT",
+ "private": true,
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ],
+ "dependencies": {
+ "normalize.css": "~3.0.2",
+ "fluidable": "~1.1.3"
+ }
+}
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+ <title>Slice 1</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+ <path d="M9.95534878,0.194350399 L3.36157568,7.34385999 L1.0516604,4.76136545 C0.810975769,4.49223122 0.421198101,4.49223122 0.180513472,4.76136545 C-0.0601711573,5.03049969 -0.0601711573,5.46635018 0.180513472,5.73548441 L2.91922526,8.79791969 C3.03956757,8.9324868 3.19728583,9 3.35459336,9 C3.50902582,9 3.663869,8.93524245 3.78338987,8.80572734 L10.8129418,1.18362538 C11.0569122,0.918624608 11.0630731,0.482774117 10.8264957,0.209506422 C10.5886862,-0.0642205462 10.1993192,-0.0701911009 9.95534878,0.194350399" id="Fill-52" fill="#00A388" sketch:type="MSShapeGroup"></path>
+ </g>
+</svg>
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"
+ />
+ <link type="text/css" rel="stylesheet" href="./bundle.css" />
+ <link
+ href="http://fonts.googleapis.com/css?family=Lato:300,400,700"
+ rel="stylesheet"
+ type="text/css"
+ />
+ <link
+ href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300'
+ rel='stylesheet'
+ type='text/css'
+ />
+ </head>
+ <body>
+ <div id="app"></div>
+ <script src="./bundle.js"></script>
+ </body>
+</html>
@@ -0,0 +1,24 @@
+@import 'css/Common.less';
+
+body {
+ background: #F7F7F7;
+ font-family: 'Lato', sans-serif;
+}
+
+#app {
+ margin-top: 25px;
+}
+
+@media (min-width: @screenTablet) {
+ #app {
+ max-width: 704px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+@media (min-width: @screenDesktop) {
+ #app {
+ max-width: 928px;
+ }
+}
@@ -0,0 +1,122 @@
+//@import 'bower_components/semantic.gs/stylesheets/less/grid.less';
+@import 'bower_components/fluidable/fluidable.less';
+
+@highlight-color: #FF6138;
+@user-color: #00A388;
+@black-color: #4a4a4a;
+
+//@desktop: ~"only screen and (min-width: 960px)";
+//@tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)";
+//@phone: ~"only screen and (max-width: 719px)";
+
+// The gutter of 6 is so that iphone <= 5s can have a page width = 300, with
+// a reasonable page gutter.
+//@column-width: 55;
+//@gutter-width: 6;
+
+@columns: 10;
+
+h1, h2, h3 {
+ margin-top: 0;
+}
+
+h2, h3 {
+ font-weight: 300;
+ color: @highlight-color;
+ text-transform: uppercase;
+}
+
+h2, h3, .col-group {
+ margin-bottom: 0.67em;
+}
+
+h3 {
+ font-size: 1em;
+}
+
+p {
+ line-height: 1.5em;
+}
+
+p, label {
+ color: @black-color;
+}
+
+
+// Forms
+
+.labelDescription {
+ display: block;
+ font-size: 0.82em;
+ margin-top: 5px;
+ margin-left: 26px;
+ font-weight: 300;
+ line-height: 1.2em;
+}
+
+input[type="radio"] {
+ display: none;
+}
+
+input[type="radio"] + label {
+ cursor: pointer;
+ display: block;
+ margin: 10px 0;
+}
+
+input[type="radio"] + label::before {
+ content: '';
+ border-radius: 50%;
+ display: inline-block;
+ width: 19px;
+ height: 19px;
+ margin-right: 6px;
+ margin-top: -4px;
+ border: 1px solid @black-color;
+ vertical-align: middle;
+ background: url(./checkmark.svg) no-repeat;
+ background-position: 100px 100px;
+}
+
+input[type="radio"]:checked + label::before {
+ border-color: @user-color;
+ background-position: center;
+}
+
+input[type="radio"]:checked + label {
+ color: @user-color;
+}
+
+input[type="radio"]:checked + label .labelDescription {
+ color: @black-color;
+}
+
+pre, code {
+ font-family: 'Source Code Pro', monospace;
+}
+
+// I think this is a bug in fluidable
+@media (max-width: (@screenTablet - 1px)) {
+ .col-group .col-group [class*="col-"] {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+button {
+ width: 100%;
+ max-width: 400px;
+ background: @highlight-color;
+ color: white;
+ text-transform: uppercase;
+ padding: 12px;
+ border: 0;
+ border-radius: 2px;
+ font-weight: 300;
+ box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
+}
+
+input.numeric {
+ width: 30px;
+ text-align: right;
+}
@@ -0,0 +1,43 @@
+@import 'css/Common.less';
+
+.logo {
+ font-weight: 300;
+ text-transform: uppercase;
+ display: block;
+ width: 150px;
+ text-align: center;
+ font-size: 2.2em;
+ margin-top: 0;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.logo-center {
+ color: @highlight-color;
+ font-weight: 700;
+ display: block;
+ border: 1px solid @highlight-color;
+ border-width: 1px 0;
+ margin: 10px 0;
+ padding: 15px 0;
+ font-size: 0.72em;
+}
+
+.social {
+ list-style: none;
+ margin-left: 0;
+ padding-left: 0;
+ font-size: 13px;
+ font-weight: 300;
+
+ img {
+ width: 15px;
+ vertical-align: baseline;
+ position: relative;
+ top: 2px;
+ margin: 0 3px;
+ }
+ img.twitter {
+ top: 0;
+ }
+}
@@ -0,0 +1,17 @@
+/** @flow */
+
+var MainComponent = require('./components/MainComponent');
+var React = require('react');
+
+var attachFastClick = require('fastclick');
+attachFastClick(document.body);
+
+React.render(
+ <MainComponent />,
+ document.getElementById('app')
+);
+
+// Enable react developer tools
+if (typeof window !== 'undefined') {
+ window.React = React;
+}
@@ -0,0 +1,90 @@
+/** @flow */
+
+var React = require('react');
+var {
+ RadioComponent,
+ RadioListComponent,
+} = require('./form');
+
+var Options = require('../how/Options');
+
+var AlignmentComponent = React.createClass({
+ getInitialState(): {
+ horizontalAlignment: ?string;
+ verticalAlignment: ?string;
+ } {
+ return {
+ horizontalAlignment: null,
+ verticalAlignment: null,
+ };
+ },
+
+ getOptions(): Object {
+ if (!this.state.horizontalAlignment && !this.state.verticalAlignment) {
+ return null;
+ }
+ return {
+ horizontalAlignment: Options.HorizontalAlignments.LEFT,
+ verticalAlignment: Options.VerticalAlignments.MIDDLE,
+ };
+ },
+
+ handleHorizontalAlignmentChange(alignment: string) {
+ this.setState({
+ horizontalAlignment: alignment,
+ });
+ },
+
+ handleVerticalAlignmentChange(alignment: string) {
+ this.setState({
+ verticalAlignment: alignment,
+ });
+ },
+
+ render(): ?ReactElement {
+ return (
+ <div>
+ <h2>Alignment</h2>
+ <p>How do you want to align the content?</p>
+ <div className="col-group">
+ <div className="col-5 col-mb-5">
+ <h3>Horizontally</h3>
+ <RadioListComponent onChange={this.handleHorizontalAlignmentChange}>
+ <RadioComponent
+ label="Left"
+ value={Options.HorizontalAlignments.LEFT}
+ />
+ <RadioComponent
+ label="Center"
+ value={Options.HorizontalAlignments.CENTER}
+ />
+ <RadioComponent
+ label="Right"
+ value={Options.HorizontalAlignments.RIGHT}
+ />
+ </RadioListComponent>
+ </div>
+ <div className="col-5 col-mb-5">
+ <h3>Vertically</h3>
+ <RadioListComponent>
+ <RadioComponent
+ label="Top"
+ value={Options.HorizontalAlignments.TOP}
+ />
+ <RadioComponent
+ label="Middle"
+ value={Options.HorizontalAlignments.MIDDLE}
+ />
+ <RadioComponent
+ label="Bottom"
+ value={Options.HorizontalAlignments.BOTTOM}
+ />
+ </RadioListComponent>
+ </div>
+ </div>
+ </div>
+ );
+ },
+});
+
+module.exports = AlignmentComponent;
Oops, something went wrong.

0 comments on commit ca4d3a4

Please sign in to comment.