├── components
├── index.js
└── Generator
│ ├── constants.js
│ ├── index.js
│ ├── styled.js
│ ├── Controls.js
│ └── codeGenerators.js
├── public
├── wave.png
├── curved.png
├── skewed.png
├── spikes.png
├── favicon.ico
├── triangle.png
└── semicircle.png
├── .babelrc
├── .gitignore
├── pages
└── index.js
├── ui
└── constants.js
├── package.json
├── README.md
└── _documents.js
/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Generator } from './Generator'
2 |
--------------------------------------------------------------------------------
/public/wave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwebdev/separator-generator/HEAD/public/wave.png
--------------------------------------------------------------------------------
/public/curved.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwebdev/separator-generator/HEAD/public/curved.png
--------------------------------------------------------------------------------
/public/skewed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwebdev/separator-generator/HEAD/public/skewed.png
--------------------------------------------------------------------------------
/public/spikes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwebdev/separator-generator/HEAD/public/spikes.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwebdev/separator-generator/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/triangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwebdev/separator-generator/HEAD/public/triangle.png
--------------------------------------------------------------------------------
/public/semicircle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wwebdev/separator-generator/HEAD/public/semicircle.png
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "next/babel"
4 | ],
5 | "plugins": [
6 | [
7 | "styled-components",
8 | {
9 | "ssr": true,
10 | "displayName": true,
11 | "preprocess": false
12 | }
13 | ]
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | .env*
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import styled from 'styled-components'
3 | import { Generator } from '../components'
4 |
5 | const Home = () => (
6 |
7 |
8 |
Separator Generator
9 |
10 |
13 |
14 |
15 |
16 |
17 | )
18 |
19 | export default Home
20 |
--------------------------------------------------------------------------------
/ui/constants.js:
--------------------------------------------------------------------------------
1 | export const lightBlue = '#017a8c'
2 | export const greenBlue = '#00C6A7'
3 | export const blue = '#1E4D92'
4 | export const lightGrey = '#d5d8dc'
5 | export const middleGrey = '#969fa8'
6 | export const darkGrey = '#2c3e50'
7 | export const greyBlue = '#5B6F82'
8 |
9 | export const boxShadow = '0 16px 48px #E3E7EB'
10 | export const gradient = `linear-gradient(57deg, ${greenBlue} 0%, ${blue} 100%)`
11 | export const breakpoint = '640px'
12 | export const breakpointSmall = '480px'
13 | export const breakpointLarge = '960px';
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "separator-generator",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "@material-ui/core": "^4.9.7",
12 | "@material-ui/icons": "^4.9.1",
13 | "next": "9.3.2",
14 | "react": "16.13.0",
15 | "react-dom": "16.13.0",
16 | "styled-components": "^5.0.1"
17 | },
18 | "devDependencies": {
19 | "babel-plugin-styled-components": "^1.10.7"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # separator-generator
2 |
3 | This is a collection of pure css section separators with the possibility to customize and copy the code.
4 |
5 | [Live Demo](https://wweb.dev/resources/css-separator-generator)
6 |
7 | 
8 |
9 |
10 | ## Getting Started
11 |
12 | First, install the dependencies
13 |
14 | ```bash
15 | npm i
16 | ```
17 |
18 |
19 | Then you can start the development server
20 |
21 | ```bash
22 | npm run dev
23 | # or
24 | yarn dev
25 | ```
26 |
27 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
28 |
29 |
30 | ## License
31 | [MIT](https://choosealicense.com/licenses/mit/)
32 |
--------------------------------------------------------------------------------
/_documents.js:
--------------------------------------------------------------------------------
1 | import Document, { Head, Main, NextScript } from 'next/document';
2 | // Import styled components ServerStyleSheet
3 | import { ServerStyleSheet } from 'styled-components';
4 |
5 | export default class MyDocument extends Document {
6 | static getInitialProps({ renderPage }) {
7 | // Step 1: Create an instance of ServerStyleSheet
8 | const sheet = new ServerStyleSheet();
9 |
10 | // Step 2: Retrieve styles from components in the page
11 | const page = renderPage((App) => (props) =>
12 | sheet.collectStyles(),
13 | );
14 |
15 | // Step 3: Extract the styles as