Skip to content

Commit 482a15c

Browse files
nikolozanikoloza
committed
added cargobase examples
1 parent 39f9c32 commit 482a15c

File tree

10 files changed

+241
-22
lines changed

10 files changed

+241
-22
lines changed

‎cargokit/buttons.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* buttons config */
2+
:root {
3+
--button-border-radius: 3px;
4+
}

‎cargokit/colors.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* brand colors */
2+
:root {
3+
--darkblue: #214B6D;
4+
--blue: #1E7FF0;
5+
--lightblue: #D5E4F0;
6+
--coldblue: #E8F2FF;
7+
--whiteblue: #F6FAFF;
8+
9+
--darkergray: #90A5BF;
10+
--softgray: #5a636b;
11+
--coldgray: #9AAAB8;
12+
--lightgray: #AAB7C4;
13+
--lightengray: #CED7DF;
14+
--whitegray: #F1F4F7;
15+
16+
--green: #02D04E;
17+
--green-hover: #00C247;
18+
--green-focus: #00AF41;
19+
20+
--red: #D0021B;
21+
--red-hover: #C60018;
22+
--red-focus: #B60016;
23+
}
24+
25+
/* priorities */
26+
:root {
27+
--primary: var(--green);
28+
--primary-hover: var(--green-hover);
29+
--primary-focus: var(--green-focus);
30+
31+
--secondary-darker: var(--darkblue);
32+
--secondary: var(--blue);
33+
--secondary-lighten: var(--lightblue);
34+
35+
--tertiary: var(--red);
36+
--tertiary-hover: var(--red-hover);
37+
--tertiary-focus: var(--red-focus);
38+
39+
--quaternary: var(--coldgray);
40+
--quaternary-hover: var(--blue);
41+
--quaternary-focus: var(--blue);
42+
43+
--quaternary-contrast: white;
44+
--quaternary-contrast-hover: var(--whiteblue);
45+
--quaternary-contrast-focus: var(--coldblue);
46+
47+
--quinary: var(--lightengray);
48+
--quinary-hover: var(--lightengray);
49+
--quinary-focus: var(--lightengray);
50+
51+
--quinary-darker: var(--darkgray);
52+
}

‎cargokit/document.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** Document configuration */
2+
:root {
3+
--document-color: var(--secondary-darker);
4+
--document-background: #fff;
5+
--document-padding: var(--gutter);
6+
}

‎cargokit/fields.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* Fields configuraton */
2+
:root {
3+
--field-height: 3.5rem;
4+
--field-height-sequence: 1.2rem;
5+
6+
--field-text-transform: normal;
7+
--field-border-radius: 3px;
8+
9+
--field-font-size: var(--h6);
10+
--field-font-size-sequence: var(--major-second);
11+
12+
/* colors */
13+
14+
/* borders */
15+
--field-border-color: var(--quaternary);
16+
--field-border-color-hover: var(--quaternary-hover);
17+
--field-border-color-focus: var(--quaternary-focus);
18+
19+
--field-background-hover: var(--whiteblue);
20+
--field-background-focus: var(--coldblue);
21+
}

‎cargokit/headings.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
:root {
2+
--heading-weight: var(--font-semibold);
3+
4+
/* */
5+
--heading-color: var(--primary);
6+
}

‎cargokit/index.css

Lines changed: 36 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
1-
/** Document configuration */
1+
@import './colors';
2+
@import './document';
3+
@import './typography';
4+
@import './headings';
5+
6+
/* forms */
7+
@import './buttons';
8+
@import './fields';
9+
210
:root {
3-
--document-color: #eee;
4-
--document-background: #fff;
11+
--hr-color: var(--secondary-lighten);
12+
--hr-opacity: 1;
13+
}
14+
15+
/* demo */
16+
h1 {
17+
border-bottom: 1px solid var(--secondary-lighten);
18+
max-width: 260px;
19+
padding: var(--gutter-tiny) 0;
20+
margin: var(--gutter) 0;
21+
}
22+
23+
h4 {
24+
25+
}
26+
27+
hr {
28+
max-width: 260px;
29+
}
30+
31+
section.demo {
32+
margin: var(--gutter) 0 var(--gutter-large);
33+
34+
> * {
35+
margin: 0 var(--gutter-small) 0 0;
36+
vertical-align: top;
37+
}
538
}

‎cargokit/typography.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
:root {}

‎index.css

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
11
/* scratch framework */
2-
@import 'node_modules/@nikoloza/scratch/lib/index.css';
3-
4-
/* scratch grid */
5-
@import 'node_modules/@nikoloza/scratch-grid/lib/index.css';
6-
7-
/* scratch ui */
8-
@import 'node_modules/@nikoloza/scratch-ui/lib/index.css';
9-
10-
/* scratch helpers */
11-
@import 'node_modules/@nikoloza/scratch-helpers/lib/index.css';
12-
13-
/* scratch animations */
14-
@import 'node_modules/@nikoloza/scratch-animations/lib/index.css';
2+
@import 'node_modules/@nikoloza/scratch-all/index.css';
153

164

175
/* cargokit example */

‎index.html

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,76 @@
55
<link rel="stylesheet" type="text/css" href="bundle.css">
66
</head>
77
<body>
8-
<button class="button">Button</button>
8+
<h1>Buttons</h1>
9+
10+
<section class="demo">
11+
<button class="button tiny">Button tiny</button>
12+
<button class="button small">Button small</button>
13+
<button class="button">Button</button>
14+
<button class="button big">Button big</button>
15+
<button class="button large">Button large</button>
16+
</section>
17+
18+
<hr>
19+
20+
<h4>Button colors:</h4>
21+
22+
<section class="demo">
23+
<button class="button primary-contrast">Button primary</button>
24+
<button class="button secondary-contrast">Button secondary</button>
25+
<button class="button tertiary-contrast">Button tertiary</button>
26+
<button class="button quaternary-contrast">Button quaternary</button>
27+
<button class="button quinary-contrast">Button quinary</button>
28+
</section>
29+
30+
<hr>
31+
32+
<h4>Maybe inversed (let's call it <span class="label">contrast</span>):</h4>
33+
34+
<section class="demo">
35+
<button class="button primary">Button primary</button>
36+
<button class="button secondary">Button secondary</button>
37+
<button class="button tertiary">Button tertiary</button>
38+
<button class="button quaternary">Button quaternary</button>
39+
<button class="button quinary">Button quinary</button>
40+
</section>
41+
42+
<hr>
43+
44+
<h4>Maybe switch something between colors:</h4>
45+
<p>Color is <span class="label">secondary</span>, background is <span class="label">white</span> and border is <span class="label">quinary</span></p>
46+
<p class="coldgray-color">Note: they all work with their own pre-defined :hover and :focus states if you add an <span class="label">.interactive</span>class</p>
47+
<section class="demo">
48+
<button class="button secondary-color white-background quinary-border">Button secondary</button>
49+
</section>
50+
51+
<hr>
52+
53+
<p>And the grayscale of course 💾:</p>
54+
55+
<section class="demo">
56+
<button class="button white">Button white</span></button>
57+
<button class="button whitegray">Button whitegray</button>
58+
<button class="button lightengray">Button lightengray</button>
59+
<button class="button lightgray">Button lightgray</button>
60+
<button class="button coldgray">Button coldgray</button>
61+
<button class="button midgray">Button midgray</button>
62+
<button class="button softgray">Button softgray</button>
63+
<button class="button darkgray">Button darkgray</button>
64+
<button class="button black">Button black</button>
65+
</section>
66+
67+
<hr>
68+
69+
<h1>Input fields</h1>
70+
71+
<section class="demo">
72+
<input class="field tiny" placeholder="Input tiny">
73+
<input class="field small" placeholder="Input small">
74+
<input class="field" placeholder="Input">
75+
<input class="field big" placeholder="Input big">
76+
<input class="field large" placeholder="Input large">
77+
</section>
978

1079
<script type="text/javascript" src="bundle.js"></script>
1180
</body>

‎webpack.config.js

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,69 @@
1+
var path = require('path')
2+
var webpack = require("webpack")
13
var precss = require('precss')
2-
var cssimport = require('postcss-import')
4+
var postcssImport = require('postcss-import')
35
var cssnext = require('postcss-cssnext')
46
var ExtractTextPlugin = require('extract-text-webpack-plugin')
57

68
module.exports = {
79
entry: './index.js',
810
template: './index.html',
911
output: {
10-
filename: 'bundle.js'
12+
path: path.join(__dirname, 'dist'),
13+
filename: 'bundle.js',
14+
publicPath: '/'
1115
},
1216
module: {
1317
loaders: [{
1418
test: /\.css$/,
1519
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
20+
}, {
21+
test: /\.js$/,
22+
exclude: /(node_modules|bower_components)/,
23+
loader: 'babel',
24+
query: {
25+
presets: ['es2015'],
26+
plugins: ['transform-class-properties']
27+
}
28+
}, {
29+
test: /\.json$/,
30+
loader: 'json-loader'
31+
}, {
32+
test: /.*\.(gif|png|jpe?g|svg)$/i,
33+
loaders: [
34+
'file?hash=sha512&digest=hex&name=[hash].[ext]',
35+
'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
36+
]
1637
}]
1738
},
1839
postcss: function (webpack) {
1940
return [
20-
precss,
21-
cssimport({
41+
postcssImport({
2242
addDependencyTo: webpack
2343
}),
44+
precss,
2445
cssnext()
2546
]
2647
},
48+
devServer: {
49+
historyApiFallback: true
50+
},
2751
plugins: [
28-
new ExtractTextPlugin('bundle.css')
52+
new ExtractTextPlugin('bundle.css'),
53+
new webpack.HotModuleReplacementPlugin(),
54+
new webpack.optimize.CommonsChunkPlugin({
55+
children: true,
56+
async: true
57+
}),
58+
new webpack.DefinePlugin({
59+
'process.env': {
60+
// 'NODE_ENV': JSON.stringify('production')
61+
}
62+
}),
63+
new webpack.optimize.UglifyJsPlugin({
64+
compress: {
65+
warnings: false
66+
}
67+
})
2968
]
3069
}

0 commit comments

Comments
 (0)