Skip to content

Commit bae28d5

Browse files
michaelpbmichaelpb
committed
.
1 parent 411f495 commit bae28d5

File tree

9 files changed

+690
-55
lines changed

9 files changed

+690
-55
lines changed

‎README.md

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,54 @@
11
# kc-react-widgets
22

3-
[![Travis][build-badge]][build]
43
[![npm package][npm-badge]][npm]
4+
5+
<!--
6+
[![Travis][build-badge]][build]
57
[![Coveralls][coveralls-badge]][coveralls]
8+
-->
9+
10+
KC React Widgets is a suite of pre-styled react widgets.
11+
12+
The widgets have a noticeable "3D", skeumorphic appearance, and are good for bold
13+
call-to-action widgets, such as "launch buttons".
14+
15+
## Installation
16+
17+
18+
```bash
19+
npm install --save kc-react-widgets # using NPM
20+
yarn add kc-react-widgets # using yarn
21+
```
22+
23+
24+
## Example use
25+
26+
```javascript
27+
import React, {Component} from 'react';
28+
import {Button} from '../../src';
29+
30+
class App extends Component {
31+
render() {
32+
return (
33+
<div className="App">
34+
<Button onClick={() => console.log('Hello world!')}>
35+
Click me!
36+
</Button>
37+
</div>
38+
);
39+
}
40+
}
41+
```
42+
43+
44+
## Widgets available
45+
46+
* Button
47+
* Can be customized based on shape, color, 3D perspective depth
48+
* Can be used as a toggle (checkbox)
649

7-
Describe kc-react-widgets here.
850

51+
<!--
952
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
1053
[build]: https://travis-ci.org/user/repo
1154
@@ -14,3 +57,4 @@ Describe kc-react-widgets here.
1457
1558
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
1659
[coveralls]: https://coveralls.io/github/user/repo
60+
-->

‎demo/src/congruent_pentagon/congruent_pentagon.png

28.3 KB
Loading

‎demo/src/congruent_pentagon/readme.txt

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
3+
========================================================
4+
This pattern is downloaded from www.subtlepatterns.com
5+
If you need more, that's where to get'em.
6+
========================================================
7+
8+

‎demo/src/index.css

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}
6+
7+
.App {
8+
background: url('./congruent_pentagon/congruent_pentagon.png');
9+
display: grid;
10+
grid-template-columns: 1fr 200px minmax(auto, 800px) 1fr;
11+
grid-template-rows: 100px auto;
12+
grid-row-gap: 20px;
13+
grid-column-gap: 20px;
14+
align-items: stretch;
15+
min-height: 100vh;
16+
min-width: 100vh;
17+
box-sizing: border-box;
18+
}
19+
20+
.App-navigation {
21+
background: rgba(255, 255, 255, 0.6);
22+
padding: 10px;
23+
}
24+
25+
.App-sidebar {
26+
background: rgba(255, 255, 255, 0.6);
27+
display: relative;
28+
padding: 10px;
29+
}
30+
31+
.App-mainContent {
32+
padding: 10px;
33+
background: rgba(255, 255, 255, 0.6);
34+
}
35+
36+
.App-sidebar img {
37+
max-width: 100%;
38+
}
39+
40+
.App-sidebar a {
41+
display: block;
42+
font-size: 24pt;
43+
text-decoration: none;
44+
color: olive;
45+
font-weight: bold;
46+
text-shadow: 0 0 3px olive;
47+
}
48+
49+
.App-sidebar a:hover {
50+
text-shadow: 0 0 10px olive;
51+
}
52+
53+
.App-navigation h1 {
54+
font-size: 36pt;
55+
font-weight: 200;
56+
}
57+
58+
.Article-title {
59+
font-size: 2em;
60+
}
61+
62+
.App-navigation {
63+
grid-column: 2 / span 2;
64+
display: flex;
65+
justify-content: space-between;
66+
align-items: center;
67+
cursor: pointer;
68+
}
69+
70+
.App-rightNav {
71+
width: 170px;
72+
opacity: 0.5;
73+
text-align: right;
74+
}
75+
76+
.App-sidebar {
77+
grid-column: 2;
78+
grid-row: 2;
79+
}
80+
81+
.App-mainContent {
82+
grid-column: 2 / span 2;
83+
}
84+
85+
.App-mainContent h1 {
86+
font-size: 32pt;
87+
color: tomato;
88+
margin-bottom: 20px;
89+
}
90+
91+
92+
.App-mainContent h3 {
93+
font-size: 24pt;
94+
color: tomato;
95+
margin-top: 30px;
96+
margin-bottom: 10px;
97+
}
98+
99+
.App-logo {
100+
height: 80px;
101+
}
102+
103+
.App-library {
104+
display: grid;
105+
grid-template-columns: 1fr 1fr;
106+
margin-bottom: 80px;
107+
align-items: start;
108+
}
109+
110+
.Code {
111+
font-size: 14pt;
112+
background: white;
113+
padding: 20px;
114+
border-radius: 10px;
115+
}

0 commit comments

Comments
 (0)