Skip to content

Commit

Permalink
Demo page added
Browse files Browse the repository at this point in the history
  • Loading branch information
@CezaryDanielNowak
CezaryDanielNowak committed Feb 1, 2018
1 parent 3f527f3 commit e142f17
Show file tree
Hide file tree
Showing 8 changed files with 20,161 additions and 0 deletions.
9 changes: 9 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,5 @@ build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
package-lock.json
yarn.lock
19,568 changes: 19,568 additions & 0 deletions demo/dist/index.dist.js
View file

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions demo/dist/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<html>
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,500,600,700" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
</head>
<body>
<div id="app"></div>
<script src="index.dist.js"></script>
</body>
</html>
201 changes: 201 additions & 0 deletions demo/dist/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
/*
Thanks to Carolyn McNeillie
Source: https://codepen.io/carolynmcneillie/pen/Lewxrm'
*/

/*Let's play!*/

/*Font-weight*/
.font-weight.small {
font-weight: 300;
}

.font-weight.medium {
font-weight: 400;
}

.font-weight.large {
font-weight: 600;
}

/*Letter-spacing*/
.letter-spacing.small,
.letter-spacing.small span {
letter-spacing: -0.05em;
}

.letter-spacing.medium,
.letter-spacing.medium span {
letter-spacing: 0;
}

.letter-spacing.large,
.letter-spacing.large span {
letter-spacing: 0.3em;
}

/*Word-spacing*/
.word-spacing.small {
word-spacing: -0.2em;
}

.word-spacing.medium {
word-spacing: 0em;
}

.word-spacing.large {
word-spacing: 0.5em;
}

/*Line-height */
.line-height.small {
line-height: 0.9;
}

.line-height.medium {
line-height: 1.3;
}

.line-height.large {
line-height: 2;
}

/* Justification */
.left {
text-align: left;
}

.justified {
text-align: justify;
}

.justified-hyphen {
text-align: justify;
hyphens: auto;
}

/*BONUS - play with letter-spacing on the all-caps ORANGE MARMALADE*/

span {
letter-spacing: 0.025em;
}

/*Styles*/

* {
box-model: border-box;
}

body {
font-size: 16px;
/*font-family: 'Cormorant Garamond', serif;
*/line-height: 1.3;
font-weight: 400;
letter-spacing: 0;
}

.wrapper {
width: 1080px;
border-top: 2px solid #efefef;
display: block;
margin: 0 auto;
}

.wrapper:after {
content: "";
display: table;
clear: both;
}

.wrapper > div {
width: 300px;
padding-right: 60px;
padding-top: 30px;
padding-bottom: 100px;
float: left;
}

h1 {
display: block;
width: 1080px;
margin: 0 auto;
padding: 15px;
text-transform: uppercase;
letter-spacing: 0.025em;
font-variant-ligatures: none;
font-weight: 700;
font-size: 32px;
}

h2 {
display: block;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-variant-ligatures: none;
font-weight: 700;
font-size: 16px;
margin: 0;
}

p {
padding: 0;
margin: 0;
}

p.intro {
max-width: 1080px;
margin: 0 auto;
padding-bottom: 12px;
font-size: 24px;
}

p.intro:first-of-type {
padding-top: 100px;
}

p.intro:last-of-type {
padding-bottom: 100px;
}

@media screen and (max-width: 1100px) {

.intro,
h1,
.wrapper {
width: 600px;
padding-bottom: 50px;
}

.intro:last-of-type,
.wrapper div,
h1{
padding-bottom: 15px;
}

.wrapper div {
display: block;
float: none;
width: 100%;
margin: 0 auto;
}

}

@media screen and (max-width: 680px) {

body {
padding: 35px;
}

.intro,
h1,
.wrapper {
width: 100%;
}

h1 {
padding: 10px 0;
}

}
138 changes: 138 additions & 0 deletions demo/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Dotdotdot from 'react-dotdotdot'

class App extends React.Component {
render() {
return (
<div>
<div>
This page is clamped version of: <a href="https://codepen.io/carolynmcneillie/pen/Lewxrm" target="_blank">Codepen</a>
<br />
Thanks to Carolyn McNeillie
</div>
<hr />
<p className="intro">
What CSS property do you use to set the colour of a text block? If you said <em>color</em> you were&nbsp;… wrong!
</p>
<p className="intro">
Don’t take it too hard, though. It was a trick question. In typographic parlance, “color” refers to the visual density of a block of text. Here's a little sandbox where you can play with some of the properties that impact typographic color.
</p>
<h1>Font Weight</h1>
<div className="wrapper">
<div className="font-weight small">
<h2>Light</h2>
<Dotdotdot
clamp={ 3 }
useNativeClamp={ false }
>
<p>
1Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</Dotdotdot>
</div>
<div className="font-weight medium">
<h2>Normal</h2>
<Dotdotdot clamp={ 7 }>
<p>
2Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</Dotdotdot>
</div>
<div className="font-weight large">
<h2>Heavy</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
</div>
<h1>Tracking</h1>
<div className="wrapper">
<div className="letter-spacing small">
<h2>Tight</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="letter-spacing medium">
<h2>Normal</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="letter-spacing large">
<h2>Wide</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
</div>
<h1>Word Spacing</h1>
<div className="wrapper">
<div className="word-spacing small">
<h2>Tight</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="word-spacing medium">
<h2>Normal</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="word-spacing large">
<h2>Wide</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
</div>
<h1>Ledding</h1>
<div className="wrapper">
<div className="line-height small">
<h2>Tight</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="line-height medium">
<h2>Normal</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="line-height large">
<h2>Double</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
</div>
<h1>Justification</h1>
<div className="wrapper">
<div className="left">
<h2>Ragged Right</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="justified">
<h2>Justified</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
<div className="justified-hyphen">
<h2>Justified with Hyphenation</h2>
<p>
Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled <span>`ORANGE MARMALADE'</span>, but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.
</p>
</div>
</div>
</div>
);
}
}

ReactDOM.hydrate(<App />, document.querySelector('#app'));
Loading

0 comments on commit e142f17

Please sign in to comment.