Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

base styles based on bootstrap and normalize

Browse Source
This commit is contained in:
Sérgio Ramos 2016-10-25 02:15:43 +01:00
parent 410f5a93e5
commit 6df1d14049
22 changed files with 749 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/src/components/base/index.js
View File

@ -1,5 +1,26 @@
const React = require('react');
const classNames = require('classnames');
const styles = require('./style.css');
module.exports = () => {
return null;
const Base = module.exports = ({
className,
style,
children
}) => {
const cn = classNames(
className,
styles.base
);
return (
<div style={style} className={cn}>
{children}
</div>
);
};
Base.propTypes = {
className: React.PropTypes.string,
style: React.PropTypes.object,
children: React.PropTypes.node
};

1
ui/src/components/base/readme.md
View File

@ -1 +1,2 @@
# `<Base>`

596
ui/src/components/base/style.css Normal file
View File

@ -0,0 +1,596 @@
/* from:
*
* reboot.css v4.0.0-alpha.5
* MIT License
* github.com/twbs/bootstrap
*
* normalize.css v4.2.0
* MIT License
* github.com/necolas/normalize.css
*/
@value cursor-disabled from "../../constants/forms.css";
@value link-color, link-decoration, link-hover-color, link-hover-decoration from "../../constants/links.css";
@value table-bg, table-cell-padding from "../../constants/tables.css";
@value dt-font-weight, text-muted, abbr-border-color from "../../constants/typography.css";
:root {
--cursor-disabled: cursor-disabled;
--link-color: link-color;
--link-decoration: link-decoration;
--link-hover-color: link-hover-color;
--link-hover-decoration: link-hover-decoration;
--table-bg: table-bg;
--table-cell-padding: table-cell-padding;
--dt-font-weight: dt-font-weight;
--text-muted: text-muted;
--abbr-border-color: abbr-border-color;
}
.base {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
& :global {
/**************************************************************************
* NORMALIZE.CSS *
**************************************************************************/
& article,
& aside,
& details,
& figcaption,
& figure,
& footer,
& header,
& main,
& menu,
& nav,
& section,
& summary {
display: block;
}
& audio,
& canvas,
& progress,
& video {
display: inline-block;
}
& audio:not([controls]) {
display: none;
height: 0;
}
& progress {
vertical-align: baseline;
}
& template,
& [hidden] {
display: none;
}
& a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
& a:active,
& a:hover {
outline-width: 0;
}
& abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
& b,
& strong {
font-weight: inherit;
}
& b,
& strong {
font-weight: bolder;
}
& dfn {
font-style: italic;
}
& h1 {
font-size: 2em;
margin: 0.67em 0;
}
& mark {
background-color: #ff0;
color: #000;
}
& small {
font-size: 80%;
}
& sub,
& sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
& sub {
bottom: -0.25em;
}
& sup {
top: -0.5em;
}
& img {
border-style: none;
}
& svg:not(:root) {
overflow: hidden;
}
& code,
& kbd,
& pre,
& samp {
font-family: monospace, monospace;
font-size: 1em;
}
& figure {
margin: 1em 40px;
}
& hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
& button,
& input,
& optgroup,
& select,
& textarea {
font: inherit;
margin: 0;
}
& optgroup {
font-weight: bold;
}
& button,
& input {
overflow: visible;
}
& button,
& select {
text-transform: none;
}
& button,
& [type="button"],
& [type="reset"],
& [type="submit"] {
-webkit-appearance: button;
}
& button::-moz-focus-inner,
& [type="button"]::-moz-focus-inner,
& [type="reset"]::-moz-focus-inner,
& [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
& button:-moz-focusring,
& [type="button"]:-moz-focusring,
& [type="reset"]:-moz-focusring,
& [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
& fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
& legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
& textarea {
overflow: auto;
}
& [type="checkbox"],
& [type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
& [type="number"]::-webkit-inner-spin-button,
& [type="number"]::-webkit-outer-spin-button {
height: auto;
}
& [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
& [type="search"]::-webkit-search-cancel-button,
& [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
& ::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
& ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/**************************************************************************
* BOOTSTRAP REBOOT *
**************************************************************************/
& *,
& *::before,
& *::after {
box-sizing: inherit;
}
& @-ms-viewport {
width: device-width;
}
/*
* Suppress the focus outline on elements that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
* might still respond to pointer events.
*
* Credit: https://github.com/suitcss/base
*/
& [tabindex="-1"]:focus {
outline: none !important;
}
/**
* Typography
*/
/* Remove top margins from headings
*
* By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
* margin for easier control within type scales as it avoids margin collapsing.
*/
& h1,
& h2,
& h3,
& h4,
& h5,
& h6 {
margin-top: 0;
margin-bottom: .5rem;
}
/* Reset margins on paragraphs
*
* Similarly, the top margin on `<p>`s get reset. However, we also reset the
* bottom margin to use `rem` units instead of `em`.
*/
& p {
margin-top: 0;
margin-bottom: 1rem;
}
/* Abbreviations and acronyms */
& abbr[title],
/* Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 */
& abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted var(--abbr-border-color);
}
& address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
& ol,
& ul,
& dl {
margin-top: 0;
margin-bottom: 1rem;
}
& ol ol,
& ul ul,
& ol ul,
& ul ol {
margin-bottom: 0;
}
& dt {
font-weight: var(--dt-font-weight);
}
& dd {
margin-bottom: .5rem;
margin-left: 0; /* Undo browser default */
}
& blockquote {
margin: 0 0 1rem;
}
/**
* Links
*/
& a {
color: var(--link-color);
text-decoration: var(--link-decoration);
&:focus,
&:hover {
color: var(--link-hover-color);
text-decoration: var(--link-hover-decoration);
}
&:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
}
/* And undo these styles for placeholder links/named anchors (without href)
* which have not been made explicitly keyboard-focusable (without tabindex).
* It would be more straightforward to just use a[href] in previous block, but that
* causes specificity issues in many other styles that are too complex to fix.
* See https://github.com/twbs/bootstrap/issues/19402
*/
& a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
&:focus,
&:hover {
color: var(--link-hover-color);
text-decoration: var(--link-hover-decoration);
}
&:focus {
outline: none;
}
}
/**
* Code
*/
& pre {
/* Remove browser default top margin */
margin-top: 0;
/* Reset browser default of `1em` to use `rem`s */
margin-bottom: 1rem;
/* Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets */
overflow: auto;
}
/**
* Figures
*/
& figure {
/* Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
* We reset that to create a better flow in-page.
*/
margin: 0 0 1rem;
}
/**
* Images
*/
& img {
/* By default, `<img>`s are `inline-block`. This assumes that, and vertically
* centers them. This won't apply should you reset them to `block` level.
*/
vertical-align: middle;
/* Note: `<img>`s are deliberately not made responsive by default.
* For the rationale behind this, see the comments on the `.img-fluid` class.
*/
}
/* iOS "clickable elements" fix for role="button"
*
* Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
* for traditionally non-focusable elements with role="button"
* see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
*/
& [role="button"] {
cursor: pointer;
}
/* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
*
* In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
* DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
* However, they DO support removing the click delay via `touch-action: manipulation`.
* See:
* * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
* * http://caniuse.com/#feat=css-touch-action
* * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
*/
& a,
& area,
& button,
& [role="button"],
& input,
& label,
& select,
& summary,
& textarea {
touch-action: manipulation;
}
/**
* Tables
*/
& table {
/* No longer part of Normalize since v4 */
border-collapse: collapse;
/* Reset for nesting within parents with `background-color`. */
background-color: var(--table-bg);
}
& caption {
padding-top: var(--table-cell-padding);
padding-bottom: var(--table-cell-padding);
color: var(--text-muted);
text-align: left;
caption-side: bottom;
}
& th {
/* Centered by default, but left-align-ed to match the `td`s below. */
text-align: left;
}
/**
* Forms
*/
& label {
/* Allow labels to use `margin` for spacing. */
display: inline-block;
margin-bottom: .5rem;
}
/* Work around a Firefox/IE bug where the transparent `button` background
* results in a loss of the default `button` focus styles.
*
* Credit: https://github.com/suitcss/base/
*/
& button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
& input,
& button,
& select,
& textarea {
/* Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are */
/* properly inherited. However, `line-height` isn't inherited there. */
line-height: inherit;
}
& input[type="radio"],
& input[type="checkbox"] {
/* Apply a disabled cursor for radios and checkboxes.
*
* Note: Neither radios nor checkboxes can be readonly.
*/
&:disabled {
cursor: var(--cursor-disabled);
}
}
& input[type="date"],
& input[type="time"],
& input[type="datetime-local"],
& input[type="month"] {
/* Remove the default appearance of temporal inputs to avoid a Mobile Safari
* bug where setting a custom line-height prevents text from being vertically
* centered within the input.
*
* Bug report: https://github.com/twbs/bootstrap/issues/11266
*/
-webkit-appearance: listbox;
}
& textarea {
/* Textareas should really only resize vertically so they don't break their (horizontal) containers. */
resize: vertical;
}
& fieldset {
/* Chrome and Firefox set a `min-width: min-content;` on fieldsets,
* so we reset that to ensure it behaves more like a standard block element.
* See https://github.com/twbs/bootstrap/issues/12359.
*/
min-width: 0;
/* Reset the default outline behavior of fieldsets so they don't affect page layout. */
padding: 0;
margin: 0;
border: 0;
}
& legend {
/* Reset the entire legend element to match the `fieldset` */
display: block;
width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
}
& input[type="search"] {
/* This overrides the extra rounded corners on search inputs in iOS so that our
* `.form-control` class can properly style them. Note that this cannot simply
* be added to `.form-control` as it's not specific enough. For details, see
* https://github.com/twbs/bootstrap/issues/11586.
*/
-webkit-appearance: none;
}
/* todo: needed? */
& output {
display: inline-block;
}
/* Always hide an element with the `hidden` HTML attribute (from PureCSS). */
& [hidden] {
display: none !important;
}
}
}

31
ui/src/components/column/readme.md
View File

@ -5,12 +5,13 @@
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Grid = require('../grid');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('./index');
const styles = {
grid: {
container: {
backgroundColor: '#FFEBEE'
},
row: {
@ -18,27 +19,19 @@ const styles = {
},
column: {
backgroundColor: '#B71C1C',
textAlign: 'center'
},
p: {
textAlign: 'center',
color: 'white'
}
};
nmodule.exports = ReactDOM.renderToString(
<Grid style={styles.grid}>
<Container style={styles.container}>
<Row style={styles.row} around>
<Column style={styles.column} xs={2}>
<p style={styles.p}>1</p>
</Column>
<Column style={styles.column} xs={2}>
<p style={styles.p}>2</p>
</Column>
<Column style={styles.column} xs={2}>
<p style={styles.p}>3</p>
</Column>
<Column style={styles.column} xs={2}>1</Column>
<Column style={styles.column} xs={2}>2</Column>
<Column style={styles.column} xs={2}>3</Column>
</Row>
</Grid>
</Container>
);
```
@ -46,19 +39,19 @@ nmodule.exports = ReactDOM.renderToString(
```js
const React = require('react');
const Grid = require('ui/grid');
const Container = require('ui/container');
const Row = require('ui/row');
const Column = require('ui/index');
module.exports = () => {
return (
<Grid>
<Container>
<Row around>
<Column xs={2}>1</Column>
<Column xs={2}>2</Column>
<Column xs={2}>3</Column>
</Row>
</Grid>
</Container>
);
};
```

34
ui/src/components/container/index.js
View File

@ -1,5 +1,33 @@
const React = require('react');
/*
* based on
* https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
*/
module.exports = () => {
return null;
const React = require('react');
const classNames = require('classnames');
const styles = require('./style.css');
const Container = module.exports = ({
fluid = false,
className,
children,
style
}) => {
const cn = classNames(
className,
styles[fluid ? 'container-fluid' : 'container']
);
return (
<div style={style} className={cn}>
{children}
</div>
);
};
Container.propTypes = {
fluid: React.PropTypes.bool,
className: React.PropTypes.string,
style: React.PropTypes.object,
children: React.PropTypes.node
};

17
ui/src/components/container/readme.md
View File

@ -1 +1,16 @@
# `<Container>`
# `<Grid>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Container = require('./index.js');
const Button = require('../button');
nmodule.exports = ReactDOM.renderToString(
<Grid><Button>Hello World</Button></Grid>
);
```
## usage

0
ui/src/components/grid/style.css → ui/src/components/container/style.css
View File

33
ui/src/components/grid/index.js
View File

@ -1,33 +0,0 @@
/*
* based on
* https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
*/
const React = require('react');
const classNames = require('classnames');
const styles = require('./style.css');
const Grid = module.exports = ({
fluid = false,
className,
children,
style
}) => {
const cn = classNames(
className,
styles[fluid ? 'container-fluid' : 'container']
);
return (
<div style={style} className={cn}>
{children}
</div>
);
};
Grid.propTypes = {
fluid: React.PropTypes.bool,
className: React.PropTypes.string,
style: React.PropTypes.object,
children: React.PropTypes.node
};

16
ui/src/components/grid/readme.md
View File

@ -1,16 +0,0 @@
# `<Grid>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Grid = require('./index.js');
const Button = require('../button');
nmodule.exports = ReactDOM.renderToString(
<Grid><Button>Hello World</Button></Grid>
);
```
## usage

6
ui/src/components/row/readme.md
View File

@ -6,16 +6,16 @@
const React = require('react');
const ReactDOM = require('react-dom/server');
const Row = require('./index.js');
const Grid = require('../grid');
const Container = require('../container');
const Button = require('../button');
nmodule.exports = ReactDOM.renderToString(
<Grid>
<Container>
<Row center='xs' start='sm'>
<Button>1</Button>
<Button>2</Button>
</Row>
</Grid>
</Container>
);
```

6
ui/src/constants/breakpoints.css
View File

@ -3,6 +3,6 @@
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
*/
@value sm-viewport: only screen and (min-width: 48em);
@value md-viewport: only screen and (min-width: 64em);
@value lg-viewport: only screen and (min-width: 75em);
@value sm-viewport: only screen and (min-width: 48em); /* 768px */
@value md-viewport: only screen and (min-width: 64em); /* 1024px */
@value lg-viewport: only screen and (min-width: 75em); /* 1200px */

9
ui/src/constants/colors.css Normal file
View File

@ -0,0 +1,9 @@
@value brand-primary from "./colors.css";
:root {
--brand-primary: #0275d8;
--gray-light: #818a91;
}
@value brand-primary: var(--brand-primary);
@value gray-light: var(--gray-light);

5
ui/src/constants/forms.css Normal file
View File

@ -0,0 +1,5 @@
:root {
--cursor-disabled: not-allowed;
}
@value cursor-disabled: var(--cursor-disabled);

13
ui/src/constants/links.css Normal file
View File

@ -0,0 +1,13 @@
@value brand-primary from "./colors.css";
:root {
--link-color: brand-primary;
--link-decoration: none;
--link-hover-color: darken(var(--link-color), 15%);
--link-hover-decoration: underline;
}
@value link-color: var(--link-color);
@value link-decoration: var(--link-decoration);
@value link-hover-color: var(--link-hover-color);
@value link-hover-decoration: var(--link-hover-decoration);

7
ui/src/constants/tables.css Normal file
View File

@ -0,0 +1,7 @@
:root {
--table-bg: transparent;
--table-cell-padding: .75rem;
}
@value table-bg: var(--table-bg);
@value table-cell-padding: var(--table-cell-padding);

11
ui/src/constants/typography.css Normal file
View File

@ -0,0 +1,11 @@
@value gray-light from "./colors.css";
:root {
--dt-font-weight: bold;
--text-muted: gray-light;
--abbr-border-color: gray-light;
}
@value dt-font-weight: var(--dt-font-weight);
@value text-muted: var(--text-muted);
@value abbr-border-color: var(--abbr-border-color);

13
ui/src/docs.js
View File

@ -1,10 +1,15 @@
module.exports = {
components: {
'Getting Started': require('./getting-started.md'),
Layout: require('./layout.md'),
Guidelines: {
Overview: require('./guidelines/overview.md')
},
Components: {
Base: require('./components/base/readme.md'),
Container: require('./components/container/readme.md'),
Row: require('./components/row/readme.md'),
Column: require('./components/column/readme.md'),
Button: require('./components/button/readme.md')
},
guidelines: {
Overview: require('./guidelines/overview.md')
}
FAQ: require('./faq.md')
};

4
ui/src/index.js
View File

@ -1,5 +1,7 @@
module.exports = {
Base: require('./components/base'),
Button: require('./components/button'),
Column: require('./components/column'),
Container: require('./components/container'),
Base: require('./components/base')
Row: require('./components/row')
};

0
ui/src/layout.md Normal file
View File

2
ui/static/.gitignore vendored
View File

@ -2,3 +2,5 @@
!.gitignore
!theme.css
!index.html
!reboot.css

2
ui/static/index.html
View File

@ -2,8 +2,8 @@
<html lang='en-US'>
<head>
<title>Joyent UI Framework</title>
<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet" type="text/css">
<link href="/static/theme.css" rel="stylesheet" type="text/css">
<link href="/static/reboot.css" rel="stylesheet" type="text/css">
<link href="/static/docs.css" rel="stylesheet" type="text/css">
</head>
<body>

4
ui/static/reboot.css Normal file
View File

@ -0,0 +1,4 @@
html, body {
font-size: 16px;
margin: 0;
}