├── .babelrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── README.md
├── compositor.json
├── demo
    ├── entry.js
    └── index.html
├── package.json
├── src
    └── index.js
├── test
    └── index.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "stage-0",
5 |     "react"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | dist
3 | demo/bundle.js
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | 
2 | demo
3 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 6.2
4 | script:
5 |   - npm test
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # sploot
 3 | 
 4 | CSS linear-gradient function for creating split backgrounds
 5 | 
 6 | [![Build Status](https://travis-ci.org/jxnblk/sploot.svg?branch=master)](https://travis-ci.org/jxnblk/sploot)
 7 | 
 8 | ![sploot!](http://41.media.tumblr.com/f9f964fda886218103d34901feaced2c/tumblr_neyds4dLov1sg635yo1_1280.jpg)
 9 | 
10 | ```sh
11 | npm i sploot
12 | ```
13 | 
14 | ```js
15 | import sploot from 'sploot'
16 | 
17 | const style = {
18 |   backgroundImage: sploot()
19 | }
20 | // 'linear-gradient(180deg, cyan 50%, white 50%)'
21 | ```
22 | 
23 | ```js
24 | // with options
25 | const style = {
26 |   backgroundImage: sploot({
27 |     start: 'tomato',
28 |     end: 'fuchsia',
29 |     position: '25%',
30 |     angle: 90
31 |   })
32 | }
33 | ```
34 | 
35 | MIT License
36 | 
37 | 


--------------------------------------------------------------------------------
/compositor.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "jxnblk/sploot",
  3 |   "version": "0.1.4",
  4 |   "libraries": {
  5 |     "xv": "^1.1.19"
  6 |   },
  7 |   "title": "Sploot",
  8 |   "branch": "",
  9 |   "style": {
 10 |     "name": "Default",
 11 |     "componentSet": {
 12 |       "nav": "nav/BasicNav",
 13 |       "header": "header/BannerHeader",
 14 |       "article": "article/BasicArticle",
 15 |       "footer": "footer/BasicFooter"
 16 |     },
 17 |     "fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
 18 |     "fontWeight": 400,
 19 |     "bold": 600,
 20 |     "lineHeight": 1.5,
 21 |     "typeScale": [
 22 |       72,
 23 |       48,
 24 |       24,
 25 |       20,
 26 |       16,
 27 |       14,
 28 |       12
 29 |     ],
 30 |     "monospace": "Menlo, monospace",
 31 |     "heading": {
 32 |       "fontFamily": null,
 33 |       "fontStyle": null,
 34 |       "fontWeight": 600,
 35 |       "lineHeight": 1.25,
 36 |       "textTransform": null,
 37 |       "letterSpacing": null,
 38 |       "h0": {},
 39 |       "h1": {},
 40 |       "h2": {},
 41 |       "h3": {},
 42 |       "h4": {},
 43 |       "h5": {},
 44 |       "h6": {}
 45 |     },
 46 |     "alternativeText": {},
 47 |     "space": [
 48 |       0,
 49 |       8,
 50 |       16,
 51 |       32,
 52 |       48,
 53 |       64,
 54 |       96
 55 |     ],
 56 |     "layout": {
 57 |       "maxWidth": 1024,
 58 |       "centered": false
 59 |     },
 60 |     "colors": {
 61 |       "text": "#111",
 62 |       "background": "#fff",
 63 |       "primary": "#08e",
 64 |       "secondary": "#059",
 65 |       "highlight": "#e08",
 66 |       "border": "#ddd",
 67 |       "muted": "#eee"
 68 |     },
 69 |     "border": {
 70 |       "width": 1,
 71 |       "radius": 2
 72 |     },
 73 |     "link": {},
 74 |     "button": {
 75 |       "hover": {
 76 |         "boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
 77 |       }
 78 |     },
 79 |     "input": {},
 80 |     "body": {
 81 |       "margin": 0
 82 |     },
 83 |     "breakpoints": {
 84 |       "xs": "@media screen and (max-width:40em)",
 85 |       "sm": "@media screen and (min-width:40em)",
 86 |       "md": "@media screen and (min-width:52em)",
 87 |       "lg": "@media screen and (min-width:64em)"
 88 |     }
 89 |   },
 90 |   "content": [
 91 |     {
 92 |       "component": "nav",
 93 |       "links": [
 94 |         {
 95 |           "href": "http://jxnblk.com/sploot",
 96 |           "text": "Home"
 97 |         },
 98 |         {
 99 |           "href": "https://github.com/jxnblk/sploot",
100 |           "text": "GitHub"
101 |         },
102 |         {
103 |           "href": "https://npmjs.com/package/sploot",
104 |           "text": "npm"
105 |         }
106 |       ]
107 |     },
108 |     {
109 |       "component": "header",
110 |       "heading": "sploot",
111 |       "subhead": "CSS linear-gradient function for creating split backgrounds",
112 |       "children": [
113 |         {
114 |           "component": "ui/TweetButton",
115 |           "text": "sploot: CSS linear-gradient function for creating split backgrounds",
116 |           "url": "http://jxnblk.com/sploot"
117 |         },
118 |         {
119 |           "component": "ui/GithubButton",
120 |           "user": "jxnblk",
121 |           "repo": "sploot"
122 |         }
123 |       ],
124 |       "text": "v1.0.0",
125 |       "backgroundImage": "https://hd.unsplash.com/photo-1455380579765-810023662ea2"
126 |     },
127 |     {
128 |       "component": "article",
129 |       "metadata": {
130 |         "source": "github.readme"
131 |       },
132 |       "html": "\n\n<p><a href=\"https://travis-ci.org/jxnblk/sploot\"></a></p>\n<p></p>\n<pre>npm i sploot</pre><pre><span class=\"hljs-keyword\">import</span> sploot <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">&apos;sploot&apos;</span>\n\n<span class=\"hljs-keyword\">const</span> style = {\n  backgroundImage: sploot()\n}\n<span class=\"hljs-comment\">// &apos;linear-gradient(180deg, cyan 50%, white 50%)&apos;</span></pre><pre><span class=\"hljs-comment\">// with options</span>\n<span class=\"hljs-keyword\">const</span> style = {\n  backgroundImage: sploot({\n    start: <span class=\"hljs-string\">&apos;tomato&apos;</span>,\n    end: <span class=\"hljs-string\">&apos;fuchsia&apos;</span>,\n    position: <span class=\"hljs-string\">&apos;25%&apos;</span>,\n    angle: <span class=\"hljs-number\">90</span>\n  })\n}</pre><p>MIT License</p>\n"
133 |     },
134 |     {
135 |       "component": "footer",
136 |       "links": [
137 |         {
138 |           "href": "https://github.com/jxnblk/sploot",
139 |           "text": "GitHub"
140 |         },
141 |         {
142 |           "href": "https://github.com/jxnblk",
143 |           "text": "jxnblk"
144 |         }
145 |       ]
146 |     }
147 |   ]
148 | }


--------------------------------------------------------------------------------
/demo/entry.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import ReactDOM from 'react-dom'
 4 | import sploot from '../src'
 5 | 
 6 | const Sploot = ({
 7 |   color,
 8 |   position,
 9 |   angle,
10 |   ...props
11 | }) => {
12 |   const sx = {
13 |     margin: 32,
14 |     padding: 32,
15 |     backgroundImage: sploot({
16 |       start: color,
17 |       position,
18 |       angle
19 |     })
20 |   }
21 | 
22 |   return (
23 |     <div {...props} style={sx} />
24 |   )
25 | }
26 | 
27 | const App = () => {
28 |   return (
29 |     <div>
30 |       <Sploot color='cyan'>
31 |         <h1>Sploot</h1>
32 |         <p>CSS linear-gradient function for creating split backgrounds</p>
33 |         <a href='https://github.com/jxnblk/sploot'>GitHub</a>
34 |         {' '}
35 |         <a href='https://npmjs.com/package/sploot'>npm</a>
36 |       </Sploot>
37 |       <Sploot color='magenta' angle={45}>
38 |         <h2>Magenta 45deg</h2>
39 |       </Sploot>
40 |       <Sploot color='magenta' angle={-45}>
41 |         <h2>Magenta -45deg</h2>
42 |       </Sploot>
43 |       <Sploot color='yellow' angle={90} position='25%'>
44 |         <h2>Yellow 90deg 25%</h2>
45 |       </Sploot>
46 |       <Sploot color='cyan' angle={-90} position='25%'>
47 |         <h2>Cyan -90deg 25%</h2>
48 |       </Sploot>
49 |       <Sploot color='yellow' angle={90} position='75%'>
50 |         <a href='http://jxnblk.com'>Made by Jxnblk</a>
51 |       </Sploot>
52 |     </div>
53 |   )
54 | }
55 | 
56 | ReactDOM.render(<App />, app)
57 | 
58 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <style>
3 | body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;margin:0;}
4 | </style>
5 | <div id='app'></div>
6 | <script src='bundle.js'></script>
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sploot",
 3 |   "version": "1.0.0",
 4 |   "description": "CSS linear-gradient function for creating split background",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "prepublish": "babel src --out-dir dist",
 8 |     "start": "webpack-dev-server",
 9 |     "build": "webpack -p",
10 |     "gh-pages": "gh-pages -d demo",
11 |     "test": "ava -v"
12 |   },
13 |   "keywords": [
14 |     "css",
15 |     "linear-gradient",
16 |     "css-in-js",
17 |     "style"
18 |   ],
19 |   "author": "Brent jackson",
20 |   "license": "MIT",
21 |   "devDependencies": {
22 |     "ava": "^0.16.0",
23 |     "babel-cli": "^6.11.4",
24 |     "babel-loader": "^6.2.4",
25 |     "babel-preset-es2015": "^6.13.2",
26 |     "babel-preset-react": "^6.11.1",
27 |     "babel-preset-stage-0": "^6.5.0",
28 |     "gh-pages": "^0.11.0",
29 |     "react": "^15.3.0",
30 |     "react-dom": "^15.3.0",
31 |     "webpack": "^1.13.1",
32 |     "webpack-dev-server": "^1.14.1"
33 |   },
34 |   "ava": {
35 |     "require": [
36 |       "babel-register"
37 |     ],
38 |     "babel": "inherit"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const sploot = ({
 3 |   start = 'cyan',
 4 |   end = 'white',
 5 |   position = '50%',
 6 |   angle = 180
 7 | } = {}) => {
 8 |   return `linear-gradient(${angle}deg, ${start} ${position}, ${end} ${position})`
 9 | }
10 | 
11 | export default sploot
12 | 
13 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import test from 'ava'
 3 | import sploot from '../src'
 4 | 
 5 | let str
 6 | 
 7 | test('is a function', t => {
 8 |   t.is(typeof sploot, 'function')
 9 | })
10 | 
11 | test('returns a string', t => {
12 |   t.is(typeof sploot(), 'string')
13 | })
14 | 
15 | test('is a linear gradient', t => {
16 |   str = sploot()
17 |   console.log(str)
18 |   t.regex(str, /^linear\-gradient/)
19 | })
20 | 
21 | test('has default values', t => {
22 |   t.regex(str, /180deg/)
23 |   t.regex(str, /cyan\s50%/)
24 |   t.regex(str, /white\s50%/)
25 | })
26 | 
27 | test('accepts options', t => {
28 |   str = sploot({
29 |     start: 'blue',
30 |     end: 'red',
31 |     position: '25%',
32 |     angle: 90
33 |   })
34 |   t.regex(str, /90deg/)
35 |   t.regex(str, /blue\s25%/)
36 |   t.regex(str, /red\s25%/)
37 | })
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   entry: './demo/entry.js',
 6 | 
 7 |   output: {
 8 |     path: path.join(__dirname, 'demo'),
 9 |     filename: 'bundle.js'
10 |   },
11 | 
12 |   module: {
13 |     loaders: [
14 |       {
15 |         test: /\.js$/,
16 |         exclude: /node_modules/,
17 |         loaders: [
18 |           'babel'
19 |         ]
20 |       }
21 |     ]
22 |   },
23 | 
24 |   devServer: {
25 |     contentBase: 'demo/'
26 |   }
27 | }
28 | 
29 | 


--------------------------------------------------------------------------------