mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-28 20:53:24 +10:00
Merge pull request #189 from sharetribe/typography-page-draft
Typography page draft
This commit is contained in:
Vesa Luusua
GitHub
commit
592fa1a317
7 changed files with 398 additions and 47 deletions
|
|
@ -5,6 +5,43 @@
|
|||
<!--!title-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico">
|
||||
|
||||
<style>
|
||||
/**
|
||||
* The fonts included are copyrighted by the vendor listed below.
|
||||
*
|
||||
* Vendor: Mostardesign
|
||||
* License URL: https://www.fontspring.com/licenses/mostardesign/webfont
|
||||
*
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
/* 'SofiaPro-Regular' */
|
||||
font-family: 'sofiapro';
|
||||
src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-regular-webfont.woff2') format('woff2'),
|
||||
url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-regular-webfont.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'sofiapro';
|
||||
src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff2') format('woff2'),
|
||||
url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-medium-webfont.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'sofiapro';
|
||||
src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff2') format('woff2'),
|
||||
url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-semibold-webfont.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/static/reactDates.css" />
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/static/reactDatesCustomized.css" />
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,78 @@
|
|||
:root {
|
||||
--spacing-unit: 6px;
|
||||
}
|
||||
|
||||
.root {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.withPadding,
|
||||
.defaultWrapperStyles {
|
||||
padding: 1rem;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
/* Typography.example */
|
||||
.content {
|
||||
|
||||
}
|
||||
|
||||
.baselines {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 5h10M0 11h10M0 17h10" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-repeat: repeat;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 7h10M0 15h10M0" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
|
||||
background-repeat: repeat;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spacing2x {
|
||||
margin: calc(2 * var(--spacing-unit)) 0;
|
||||
}
|
||||
|
||||
.fontsContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(4 * var(--spacing-unit));
|
||||
|
||||
&::after {
|
||||
content: ".";
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.fontCard {
|
||||
flex-basis: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/**
|
||||
* FontCard contains 4px worth of borders, which needs to be factored in since we use
|
||||
* box-sizing: border-box;
|
||||
* In this case, we'll adjust margin-bottoms (24px - 4px = 20px)
|
||||
*/
|
||||
margin-bottom: calc(4 * var(--spacing-unit) - 4px);
|
||||
margin-right: calc(2 * var(--spacing-unit));
|
||||
}
|
||||
|
||||
.element {
|
||||
border-style: solid;
|
||||
border-color: #aaa;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.description {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
background-color: #f1f1f1;
|
||||
padding: calc(2 * var(--spacing-unit));
|
||||
|
||||
border-style: solid;
|
||||
border-color: #aaa;
|
||||
border-width: 1px;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
|
|
|||
137
src/containers/StyleguidePage/Typography.example.js
Normal file
137
src/containers/StyleguidePage/Typography.example.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import css from './StyleguidePage.css';
|
||||
import mpStyle from '../../marketplace.css';
|
||||
|
||||
|
||||
const Font = props => {
|
||||
const { component: TextComponent, description, styling } = props;
|
||||
return (
|
||||
<div className={css.fontCard}>
|
||||
<div className={css.element}>
|
||||
<TextComponent/>
|
||||
</div>
|
||||
<div className={css.description}>
|
||||
<p>{description}</p>
|
||||
<pre className={mpStyle.tinyFont}>{styling}</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const { func, string } = PropTypes;
|
||||
|
||||
Font.propTypes = {
|
||||
component: func.isRequired,
|
||||
description: string.isRequired,
|
||||
styling: string.isRequired,
|
||||
}
|
||||
|
||||
const Fonts = () => {
|
||||
const h1FontStyling =
|
||||
`Styles affecting size:
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
padding: 5px 0 1px 0;`;
|
||||
|
||||
const h2FontStyling = `Styles affecting size:
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
padding: 3.5px 0 2.5px 0;`;
|
||||
|
||||
const h3FontStyling = `Styles affecting size:
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 3px 0 3px 0;`;
|
||||
|
||||
const h4FontStyling = `Styles affecting size:
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 4px 0;`;
|
||||
|
||||
const h5FontStyling = `Styles affecting size:
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 3.5px 0 2.5px 0;`;
|
||||
|
||||
const h6FontStyling = `Styles affecting size:
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 1.5px 0 4.5px 0;`;
|
||||
|
||||
const bodyFontStyling = `Styles affecting size:
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
padding: 2.5px 0 3.5px 0;`;
|
||||
|
||||
const tinyFontStyling = `Styles affecting size:
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px 0;`;
|
||||
|
||||
const fontsContainerClasses = classNames(css.fontsContainer, css.baselines);
|
||||
|
||||
return (
|
||||
<div className={css.content}>
|
||||
<p className={css.spacing2x}>
|
||||
The line-height of typographic elements is an multiple of 6px on mobile and multiple of 8px
|
||||
on desktop. In addition to line-height, baselines are adjusted with vertical padding
|
||||
(the sum of those paddings will be 6px on mobile or 8px on desktop). As a result one can
|
||||
position following typographic elements with margins that are also multiples of 6px (or 8px).
|
||||
</p>
|
||||
<p className={css.spacing2x}>
|
||||
N.B. box-sizing is border-box, so borders affect to the total height of elements.
|
||||
</p>
|
||||
<p className={css.spacing2x}>
|
||||
TODO: breakpoints for desktop are missing (desktop fonts needs to be extracted.
|
||||
</p>
|
||||
<div className={fontsContainerClasses}>
|
||||
<Font
|
||||
component={() => (<h1>H1 (.h1Font): Lorem ipsum dolor sit amet</h1>)}
|
||||
description="Biggest font style. Used in main heading on a page. "
|
||||
styling={h1FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (<h2>H2 (.h2Font): Lorem ipsum dolor sit amet</h2>)}
|
||||
description="Works as a subtitle. Inline component using .h2Font can be aligned with .h1Font to the same baseline by dropping it 18px (e.g. with margin-top)."
|
||||
styling={h2FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (<h3>H3 (.h3Font): Lorem ipsum dolor sit amet</h3>)}
|
||||
description="Works as a subtitle and in sidebar menu."
|
||||
styling={h3FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (<h4>H4 (.h4Font): Lorem ipsum dolor sit amet</h4>)}
|
||||
description="Works as a subtitle."
|
||||
styling={h4FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (<h5>H5 (.h5Font): Lorem ipsum dolor sit amet</h5>)}
|
||||
description="Can be used as a subtitle and also as a label font for form inputs."
|
||||
styling={h5FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (<h6>H6 (.h6Font): Lorem ipsum dolor sit amet consectetur adebisci velit</h6>)}
|
||||
description="Works as a subtitle."
|
||||
styling={h6FontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (<p>Default font (.bodyFont, p, button, etc.): Lorem ipsum dolor sit amet</p>)}
|
||||
description="Paragraphs and other body texts."
|
||||
styling={bodyFontStyling}
|
||||
/>
|
||||
<Font
|
||||
component={() => (<p className={mpStyle.tinyFont}>Tiny mobile text (.tinyFont): Lorem ipsum dolor sit amet</p>)}
|
||||
description="Very small print."
|
||||
styling={tinyFontStyling}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Typography = {
|
||||
component: Fonts,
|
||||
props: {},
|
||||
};
|
||||
|
|
@ -38,6 +38,7 @@ import * as PasswordForgottenForm
|
|||
import * as PayoutDetailsForm from './containers/PayoutDetailsForm/PayoutDetailsForm.example';
|
||||
import * as SignupForm from './containers/SignupForm/SignupForm.example';
|
||||
import * as StripePaymentForm from './containers/StripePaymentForm/StripePaymentForm.example';
|
||||
import * as Typography from './containers/StyleguidePage/Typography.example';
|
||||
|
||||
export {
|
||||
AddImages,
|
||||
|
|
@ -69,4 +70,5 @@ export {
|
|||
StripePaymentForm,
|
||||
TabNav,
|
||||
Tabs,
|
||||
Typography,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
@import "sanitize.css";
|
||||
|
||||
/* Base font */
|
||||
html, input, button, a {
|
||||
/*
|
||||
Use Chalkboard font. This font is available in Mac OSX. Fallback
|
||||
to Comic Sans MS, "although it is not a perfect substitute font
|
||||
since the two are not metrically compatible".
|
||||
|
||||
See: https://en.wikipedia.org/wiki/Chalkboard_(typeface)
|
||||
*/
|
||||
font-family: "Chalkboard", "ChalkboardSE-Regular", "Comic Sans MS", sans-serif;
|
||||
color: #4A4A4A;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: normal;
|
||||
letter-spacing: -0.6px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@ import { authInfo } from './ducks/Auth.duck';
|
|||
import { fetchCurrentUser } from './ducks/user.duck';
|
||||
import routeConfiguration from './routesConfiguration';
|
||||
|
||||
import './index.css';
|
||||
import './marketplace.css';
|
||||
|
||||
const render = store => {
|
||||
// If the server already loaded the auth information, render the app
|
||||
|
|
|
|||
150
src/marketplace.css
Normal file
150
src/marketplace.css
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
@import "sanitize.css";
|
||||
|
||||
/* FONTS */
|
||||
h1, h2, h3, h4, h5, h6, p, pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
padding: 5px 0 1px 0; /* 5px + 1px = 6px */;
|
||||
letter-spacing: -1px;
|
||||
|
||||
/* TODO: this seems to be biggest font in Page titles (except in Hero) - is it h1 then? */
|
||||
@media (min-width: 768px) {
|
||||
font-family: "sofiapro-semibold";
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
padding: 7px 0 1px 0; /* 7 + 1 = 8px */
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
padding: 3.5px 0 2.5px 0; /* 3.5px + 2.5px = 6px */
|
||||
letter-spacing: -0.5px;
|
||||
|
||||
/* TODO Are these correct settings? */
|
||||
@media (min-width: 768px) {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
padding: 4px 0 4px 0; /* 4px + 4px = 8px */
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: 3px 0 3px 0; /* 3px + 3px = 6px */
|
||||
letter-spacing: -0.4px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
padding: 2px 0 4px 0; /* 2px + 4px = 6px */
|
||||
letter-spacing: -0.2px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 3.5px 0 2.5px 0; /* 3.5px + 2.5px = 6px */
|
||||
letter-spacing: 0;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6Font {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 1.5px 0 4.5px 0; /* 1.5px + 4.5px = 6px */
|
||||
letter-spacing: 0;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
}
|
||||
|
||||
html,
|
||||
input,
|
||||
button,
|
||||
p,
|
||||
pre,
|
||||
.bodyFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
padding: 2.5px 0 3.5px 0; /* 2.5px + 3.5px = 6px */
|
||||
letter-spacing: -0.1px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
}
|
||||
|
||||
.tinyFont {
|
||||
font-family: "sofiapro", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
padding: 2px 0 4px 0; /* 2px + 4px = 6px */
|
||||
letter-spacing: -0.1px;
|
||||
|
||||
/* TODO Desktop styles needs to be extracted */
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
/* Base font color */
|
||||
html,
|
||||
.textColor {
|
||||
color: #4A4A4A;
|
||||
}
|
||||
|
||||
/* NORMALIZATIONS for other elements */
|
||||
/* TODO */
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue