Javascript is required for this site.
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "neonclear", 3 | "version": "0.1.0-alpha.4", 4 | "description": "An ef-based frontend UI library", 5 | "main": "dist/neonclear.full.js", 6 | "module": "src/neonclear.js", 7 | "unpkg": "dist/neonclear.js", 8 | "scripts": { 9 | "dev": "BUILD_ENV=DEMO rollup -c ./config/rollup.dev.js -w", 10 | "build": "NODE_ENV=production rollup -c ./config/rollup.prod.js", 11 | "lint": "eslint --ext .js src" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/TheNeuronProject/Neonclear.git" 16 | }, 17 | "keywords": [ 18 | "template", 19 | "framework", 20 | "ef", 21 | "ui" 22 | ], 23 | "author": "ClassicOldSong", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/TheNeuronProject/Neonclear/issues" 27 | }, 28 | "homepage": "https://neon.atm.re", 29 | "devDependencies": { 30 | "chalk": "^2.4.1", 31 | "chokidar": "^2.0.3", 32 | "cssnano": "^3.10.0", 33 | "eslint": "^4.19.1", 34 | "postcss-cssnext": "^3.1.0", 35 | "postcss-import": "^11.1.0", 36 | "postcss-modules": "^1.1.0", 37 | "postcss-nested": "^3.0.0", 38 | "postcss-simple-vars": "^4.1.0", 39 | "rollup": "^0.58.2", 40 | "rollup-plugin-browsersync": "^0.2.6", 41 | "rollup-plugin-buble": "^0.19.2", 42 | "rollup-plugin-commonjs": "^9.1.3", 43 | "rollup-plugin-eft": "^0.3.0", 44 | "rollup-plugin-eslint": "^4.0.0", 45 | "rollup-plugin-json": "^2.3.0", 46 | "rollup-plugin-node-resolve": "^3.3.0", 47 | "rollup-plugin-postcss": "^1.6.1", 48 | "rollup-plugin-progress": "^0.4.0", 49 | "rollup-plugin-replace": "^2.0.0", 50 | "rollup-plugin-uglify": "^3.0.0" 51 | }, 52 | "dependencies": { 53 | "ef.js": "^0.8.1", 54 | "normalize.css": "^8.0.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/_template/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | 6 | // Apply style to the component 7 | const ModuleName = styled(tpl, style) 8 | 9 | // Export the module 10 | export { ModuleName } 11 | -------------------------------------------------------------------------------- /src/components/_template/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | -------------------------------------------------------------------------------- /src/components/_template/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >div.{{style.something}} 3 | -------------------------------------------------------------------------------- /src/components/article/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | 6 | const Article = styled(tpl, style) 7 | 8 | // Export the module 9 | export { Article } 10 | -------------------------------------------------------------------------------- /src/components/article/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .article { 8 | width: 100%; 9 | position: relative; 10 | & article { 11 | position: relative; 12 | margin: 0 auto; 13 | width: 100%; 14 | max-width: 1200px; 15 | padding: 10px; 16 | } 17 | & hr { 18 | border: none; 19 | border-bottom: #88888888 1px solid; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/article/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >div.{{style.article}} 3 | #id = {{id}} 4 | >article 5 | >h1 6 | .{{title = Title}} 7 | >div 8 | .by {{author = Author}}, created {{time = 1990-1-1}} 9 | >hr 10 | +contents 11 | -------------------------------------------------------------------------------- /src/components/banner_logo/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | 6 | const BannerLogo = class extends styled(tpl, style) { 7 | constructor(text) { 8 | super({ 9 | $data: {text} 10 | }) 11 | } 12 | } 13 | 14 | // Export the module 15 | export { BannerLogo } 16 | -------------------------------------------------------------------------------- /src/components/banner_logo/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .banner_logo { 8 | height: 100px; 9 | width: 460px; 10 | max-width: 100%; 11 | font-size: 80px; 12 | line-height: 100px; 13 | text-align: center; 14 | font-family: 'Megrim', cursive; 15 | background: var(--gradient-90); 16 | color: #FFF; 17 | user-select: none; 18 | cursor: default; 19 | overflow: hidden; 20 | } 21 | -------------------------------------------------------------------------------- /src/components/banner_logo/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >div.{{style.banner_logo}} 3 | .{{text}} 4 | -------------------------------------------------------------------------------- /src/components/body/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | 6 | const Body = styled(tpl, style) 7 | 8 | // Export the module 9 | export { Body } 10 | -------------------------------------------------------------------------------- /src/components/body/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .neonclear { 8 | font-family: 'Abel', sans-serif; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/body/tpl.ef: -------------------------------------------------------------------------------- 1 | >body.{{style.neonclear}}.{{style.names}} 2 | +contents 3 | -------------------------------------------------------------------------------- /src/components/drawer/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import section from './section.ef' 4 | import item from './item.ef' 5 | import style from './style.css' 6 | import styled from '../../utils/styled.js' 7 | import { inform, exec } from 'ef-core' 8 | 9 | const Drawer = styled(tpl, style) 10 | 11 | const DrawerSection = styled(section, style) 12 | 13 | const makeActive = ({state: {$data}, value}) => { 14 | if (value) $data.style.activeClass = style.active 15 | else $data.style.activeClass = '' 16 | } 17 | 18 | const DrawerItem = class extends styled(item, style) { 19 | constructor(state) { 20 | inform() 21 | // Init component 22 | super() 23 | // Make subscriptions 24 | this.$subscribe('active', makeActive) 25 | // Apply user state 26 | this.$update(state) 27 | // Trigger render 28 | exec() 29 | } 30 | } 31 | 32 | // Export the module 33 | export { Drawer, DrawerSection, DrawerItem } 34 | -------------------------------------------------------------------------------- /src/components/drawer/item.ef: -------------------------------------------------------------------------------- 1 | >li.{{style.activeClass}} 2 | @click = click 3 | >span 4 | .{{title = Item Title}} 5 | -------------------------------------------------------------------------------- /src/components/drawer/section.ef: -------------------------------------------------------------------------------- 1 | >section 2 | >h3 3 | .{{title = Section Title}} 4 | >ul 5 | +items 6 | -------------------------------------------------------------------------------- /src/components/drawer/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | $framecolor: #88888888; 8 | 9 | .drawer { 10 | position: fixed; 11 | top: 0; 12 | left: 0; 13 | width: 0; 14 | height: 100vh; 15 | width: 100vw; 16 | max-width: 320px; 17 | transform: translate3d(-320px, 0, 0); 18 | transition: transform cubic-bezier(0.18, 0.89, 0.32, 1.06) .5s; 19 | background: linear-gradient(-30deg, #000, #333); 20 | outline: none; 21 | & .menu_button { 22 | position: absolute; 23 | box-sizing: border-box; 24 | top: 10px; 25 | right: 10px; 26 | transform: translate3d(60px, 0, 0); 27 | height: 40px; 28 | width: 40px; 29 | border: $framecolor 2px solid; 30 | color: $framecolor; 31 | user-select: none; 32 | cursor: pointer; 33 | transition: transform cubic-bezier(0.18, 0.89, 0.32, 0.92) .5s; 34 | & i { 35 | height: 100%; 36 | line-height: 36px; 37 | width: 100%; 38 | text-align: center; 39 | font-size: 30px; 40 | } 41 | &.retract { 42 | visibility: hidden; 43 | outline: none; 44 | } 45 | } 46 | &:focus { 47 | transform: translate3d(-20px, 0, 0); 48 | & .menu_button { 49 | transform: translate3d(0, 0, 0); 50 | &.expand { 51 | visibility: hidden; 52 | } 53 | &.retract { 54 | visibility: visible; 55 | } 56 | } 57 | } 58 | & h3 { 59 | position: relative; 60 | &::after { 61 | content: ''; 62 | height: 2px; 63 | width: 24px; 64 | position: absolute; 65 | bottom: -5px; 66 | left: 0; 67 | background: var(--gradient-90); 68 | transition: width .2s; 69 | } 70 | &:hover { 71 | &::after { 72 | width: 30px; 73 | } 74 | } 75 | } 76 | & ul { 77 | width: 100%; 78 | padding-left: 16px; 79 | box-sizing: border-box; 80 | list-style: none; 81 | position: relative; 82 | & li { 83 | font-weight: lighter; 84 | cursor: pointer; 85 | margin: 8px 0; 86 | position: relative; 87 | & span { 88 | position: relative; 89 | display: inline-block; 90 | &::after { 91 | content: ''; 92 | width: 0; 93 | height: 2px; 94 | position: absolute; 95 | bottom: -2px; 96 | left: 0; 97 | background-color: #FFF; 98 | transition: width .2s; 99 | } 100 | } 101 | &::before { 102 | content: ''; 103 | opacity: 0; 104 | transform: translate3d(-15px, 6px, 0) rotate(45deg); 105 | border-top: #FFF 2px solid; 106 | border-right: #FFF 2px solid; 107 | height: 6px; 108 | width: 6px; 109 | box-sizing: border-box; 110 | position: absolute; 111 | top: 0; 112 | left: 0; 113 | transition: transform .2s, opacity .2s; 114 | pointer-events: none; 115 | } 116 | &.active::before { 117 | opacity: 1; 118 | transform: translate3d(-12px, 6px, 0) rotate(45deg); 119 | } 120 | &:hover { 121 | & span::after { 122 | width: 100%; 123 | } 124 | } 125 | } 126 | } 127 | } 128 | 129 | .holder { 130 | width: 100%; 131 | padding: 0 20px 0 30px; 132 | color: #FFF; 133 | box-sizing: border-box; 134 | & h1 { 135 | display: inline-block; 136 | margin: 0; 137 | height: 60px; 138 | line-height: 60px; 139 | background: var(--gradient-90); 140 | -webkit-background-clip: text; 141 | -webkit-text-fill-color: transparent; 142 | text-shadow: $colorShadow 0px 2px 3px; 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /src/components/drawer/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >div.{{style.drawer}} 3 | #tabindex = 0 4 | >div.{{style.menu_button}}.{{style.retract}} 5 | #onclick 6 | #tabindex = 0 7 | >i.material-icons 8 | .menu 9 | >div.{{style.menu_button}}.{{style.expand}} 10 | #onclick 11 | >i.material-icons 12 | .menu 13 | >div.{{style.holder}} 14 | >h1 15 | .{{title = Menu}} 16 | +contents 17 | -------------------------------------------------------------------------------- /src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | 6 | const Footer = class extends styled(tpl, style) { 7 | constructor(author, year) { 8 | if (!year) year = (new Date()).getFullYear() 9 | super({ 10 | $data: {author, year} 11 | }) 12 | } 13 | } 14 | 15 | // Export the module 16 | export { Footer } 17 | -------------------------------------------------------------------------------- /src/components/footer/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .footer { 8 | height: 150px; 9 | border: 0; 10 | border-bottom: 2px solid; 11 | border-image: var(--gradient-90); 12 | border-image-slice: 1; 13 | box-shadow: #FFFFFF33 0px -2px 4px; 14 | position: relative; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | & a { 19 | color: #000; 20 | text-decoration: none; 21 | background: var(--gradient-90); 22 | -webkit-background-clip: text; 23 | -webkit-text-fill-color: transparent; 24 | } 25 | &::before { 26 | content: ''; 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | height: 100%; 31 | width: 100%; 32 | backdrop-filter: blur(20px); 33 | background: hsla(0,0%,100%,.7); 34 | z-index: -1; 35 | } 36 | } 37 | 38 | .copyright { 39 | text-align: center; 40 | flex-grow: 0; 41 | min-height: 18px; 42 | line-height: 18px; 43 | font-size: 14px; 44 | } 45 | -------------------------------------------------------------------------------- /src/components/footer/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >footer.{{style.footer}} 3 | >p.{{style.copyright}} 4 | .Copyright © {{year}} {{author}} 5 | >br 6 | .Built with & 7 | >b 8 | >a 9 | #href = https://neon.atm.re 10 | #rel = noopener 11 | #target = _blank 12 | .Neonclear 13 | -------------------------------------------------------------------------------- /src/components/header/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | import { inform, exec } from 'ef-core' 6 | 7 | const scrollTop = () => { 8 | window.scrollTo(0, 0) 9 | } 10 | 11 | const Header = class extends styled(tpl, style) { 12 | constructor(state) { 13 | inform() 14 | // Apply methods 15 | super({$methods: {scrollTop}}) 16 | // Apply user state 17 | this.$update(state) 18 | // Trigger render 19 | exec() 20 | } 21 | } 22 | 23 | // Export the module 24 | export { Header } 25 | -------------------------------------------------------------------------------- /src/components/header/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .header { 8 | height: 60px; 9 | width: 100%; 10 | border: 0; 11 | border-bottom: 2px solid; 12 | border-image: var(--gradient-90); 13 | border-image-slice: 1; 14 | box-shadow: $colorShadow 0px 2px 4px; 15 | font-family: 'PT Sans Narrow', sans-serif; 16 | position: relative; 17 | top: 0; 18 | line-height: 60px; 19 | position: fixed; 20 | top: 0; 21 | left: 0; 22 | &::before { 23 | content: ''; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | height: 100%; 28 | width: 100%; 29 | backdrop-filter: blur(20px); 30 | background: hsla(0, 0%, 100%, .7); 31 | z-index: -1; 32 | } 33 | } 34 | 35 | .left { 36 | float: left; 37 | height: 100%; 38 | padding-left: 10px; 39 | } 40 | 41 | .container { 42 | position: relative; 43 | height: 100%; 44 | width: 100%; 45 | box-sizing: border-box; 46 | } 47 | -------------------------------------------------------------------------------- /src/components/header/tpl.ef: -------------------------------------------------------------------------------- 1 | >header.{{style.header}} 2 | @dblclick = scrollTop 3 | >div.{{style.container}}.{{style.classes}} 4 | >div.{{style.left}} 5 | +left 6 | -middle 7 | -right 8 | -------------------------------------------------------------------------------- /src/components/logo_page/btn.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >div.{{style.button}} 3 | @click = click 4 | .{{caption = Caption}} 5 | -------------------------------------------------------------------------------- /src/components/logo_page/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import btn from './btn.ef' 4 | import style from './style.css' 5 | import styled from '../../utils/styled.js' 6 | 7 | const LogoPage = styled(tpl, style) 8 | 9 | const LogoButton = styled(btn, style) 10 | 11 | // Export the module 12 | export { LogoPage, LogoButton } 13 | -------------------------------------------------------------------------------- /src/components/logo_page/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .page { 8 | height: 100%; 9 | width: 100%; 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .caption { 17 | margin: 20px; 18 | text-align: center; 19 | } 20 | 21 | 22 | .button { 23 | height: 40px; 24 | min-width: 40px; 25 | padding: 0 8px; 26 | line-height: 40px; 27 | font-size: 20px; 28 | background: var(--gradient-90); 29 | -webkit-background-clip: text; 30 | -webkit-text-fill-color: transparent; 31 | border: 2px solid; 32 | border-image: var(--gradient-90); 33 | border-image-slice: 1; 34 | position: relative; 35 | display: inline-block; 36 | margin: 0 5px; 37 | cursor: pointer; 38 | user-select: none; 39 | box-shadow: $colorShadow 0px 0px 0px; 40 | transition: box-shadow .2s; 41 | &:hover { 42 | box-shadow: $colorShadow 0px 3px 5px;; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/logo_page/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >section.{{style.page}}.{{classes}} 3 | -logo 4 | >p.{{style.caption}} 5 | .{{caption}} 6 | >div.{{style.buttons}} 7 | +buttons 8 | -------------------------------------------------------------------------------- /src/components/page/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | 6 | const Page = styled(tpl, style) 7 | 8 | // Export the module 9 | export { Page } 10 | -------------------------------------------------------------------------------- /src/components/page/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .page { 8 | width: 100%; 9 | overflow: hidden; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/page/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >section.{{style.page}}.{{classes}} 3 | +contents 4 | -------------------------------------------------------------------------------- /src/components/text_logo/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from './style.css' 4 | import styled from '../../utils/styled.js' 5 | 6 | const TextLogo = class extends styled(tpl, style) { 7 | constructor(text) { 8 | super({ 9 | $data: {text} 10 | }) 11 | } 12 | } 13 | 14 | // Export the module 15 | export { TextLogo } 16 | -------------------------------------------------------------------------------- /src/components/text_logo/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../../variables.css'; 6 | 7 | .text_logo { 8 | height: 100%; 9 | font-size: 40px; 10 | font-family: 'Megrim', cursive; 11 | background: var(--gradient-90); 12 | -webkit-background-clip: text; 13 | -webkit-text-fill-color: transparent; 14 | user-select: none; 15 | cursor: default; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/text_logo/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >div.{{style.text_logo}}.{{style.names}} 3 | .{{text}} 4 | -------------------------------------------------------------------------------- /src/demo/components/logo/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from '../../style.css' 4 | import styled from '../../../utils/styled.js' 5 | 6 | // Apply style to the component 7 | const Logo = class extends styled(tpl, style) { 8 | constructor(colorLeft, colorRight) { 9 | const $data = {} 10 | if (colorLeft) $data.colorLeft = colorLeft 11 | if (colorRight) $data.colorRight = colorRight 12 | super({$data}) 13 | } 14 | } 15 | 16 | // Export the module 17 | export default Logo 18 | -------------------------------------------------------------------------------- /src/demo/components/logo/tpl.ef: -------------------------------------------------------------------------------- 1 | >svg.{{style.logo}} 2 | #width = 100% 3 | #height = 100% 4 | #viewBox = 0 0 2048 1024 5 | #version = 1.1 6 | #xmlns = http://www.w3.org/2000/svg 7 | #xmlns:xlink = http://www.w3.org/1999/xlink 8 | #xml:space = preserve 9 | #style = fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421; 10 | >path 11 | #d = M645.657,133.657l-567.514,567.514l189.172,189.172l567.514,-567.514l-189.172,-189.172Z 12 | #style = fill:url(#_Linear1); 13 | >path 14 | #d = M1213.17,133.657l-567.514,567.514l189.172,189.172l567.514,-567.514l-189.172,-189.172Z 15 | #style = fill:url(#_Linear2); 16 | >path 17 | #d = M1496.93,606.586l283.757,283.757l189.172,-189.172l-283.757,-283.757l-189.172,189.172Z 18 | #style = fill:url(#_Linear3); 19 | >path 20 | #d = M1780.68,133.657l-378.342,378.343l189.171,189.171l378.343,-378.342l-189.172,-189.172Z 21 | #style = fill:url(#_Linear4); 22 | >defs 23 | >linearGradient 24 | #id = _Linear1 25 | #x1 = 0 26 | #y1 = 0 27 | #x2 = 1 28 | #y2 = 0 29 | #gradientUnits = userSpaceOnUse 30 | #gradientTransform = matrix(567.514,-567.514,189.171,189.171,172.729,795.757) 31 | >stop 32 | #offset = 0 33 | #style = stop-color:{{colorLeft = #00fffa}};stop-opacity:1 34 | >stop 35 | #offset = 1 36 | #style = stop-color:{{colorRight = #00b9ee}};stop-opacity:1 37 | >linearGradient 38 | #id = _Linear2 39 | #x1 = 0 40 | #y1 = 0 41 | #x2 = 1 42 | #y2 = 0 43 | #gradientUnits = userSpaceOnUse 44 | #gradientTransform = matrix(567.514,-567.514,189.171,189.171,740.243,795.757) 45 | >stop 46 | #offset = 0 47 | #style = stop-color:{{colorLeft}};stop-opacity:1 48 | >stop 49 | #offset = 1 50 | #style = stop-color:{{colorRight}};stop-opacity:1 51 | >linearGradient 52 | #id = _Linear3 53 | #x1 = 0 54 | #y1 = 0 55 | #x2 = 1 56 | #y2 = 0 57 | #gradientUnits = userSpaceOnUse 58 | #gradientTransform = matrix(-283.757,-283.757,189.171,-189.171,1875.27,795.757) 59 | >stop 60 | #offset = 0 61 | #style = stop-color:{{colorLeft}};stop-opacity:1 62 | >stop 63 | #offset = 1 64 | #style = stop-color:{{colorRight}};stop-opacity:1 65 | >linearGradient 66 | #id = _Linear4 67 | #x1 = 0 68 | #y1 = 0 69 | #x2 = 1 70 | #y2 = 0 71 | #gradientUnits = userSpaceOnUse 72 | #gradientTransform = matrix(378.343,-378.343,189.171,189.171,1496.93,606.586) 73 | >stop 74 | #offset = 0 75 | #style = stop-color:{{colorLeft}};stop-opacity:1 76 | >stop 77 | #offset = 1 78 | #style = stop-color:{{colorRight}};stop-opacity:1 79 | -------------------------------------------------------------------------------- /src/demo/components/logo/tpl.ef.bak: -------------------------------------------------------------------------------- 1 | >svg 2 | #width = 100% 3 | #height = 100% 4 | #viewBox = 0 0 2048 1024 5 | #version = 1.1 6 | #xmlns = http://www.w3.org/2000/svg 7 | #xmlns:xlink = http://www.w3.org/1999/xlink 8 | #xml:space = preserve 9 | #style = fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421; 10 | >g 11 | >g 12 | #id = N 13 | >path 14 | #d = M645.657,133.657l-567.514,567.514l189.172,189.172l567.514,-567.514l-189.172,-189.172Z 15 | #style = fill:url(#_Linear1); 16 | >path 17 | #d = M1213.17,133.657l-567.514,567.514l189.172,189.172l567.514,-567.514l-189.172,-189.172Z 18 | #style = fill:url(#_Linear2); 19 | >g 20 | #id = C 21 | >path 22 | #d = M1496.93,606.586l283.757,283.757l189.172,-189.172l-283.757,-283.757l-189.172,189.172Z 23 | #style = fill:url(#_Linear3); 24 | >path 25 | #d = M1780.68,133.657l-378.342,378.343l189.171,189.171l378.343,-378.342l-189.172,-189.172Z 26 | #style = fill:url(#_Linear4); 27 | >g 28 | >g 29 | #id = N1 30 | >path 31 | #d = M645.657,133.657l-567.514,567.514l189.172,189.172l567.514,-567.514l-189.172,-189.172Z" style = fill:url(#_Linear5); 32 | >path 33 | #d = M1213.17,133.657l-567.514,567.514l189.172,189.172l567.514,-567.514l-189.172,-189.172Z" style = fill:url(#_Linear6); 34 | >g 35 | #id= C1 36 | >path 37 | #d = M1496.93,606.586l283.757,283.757l189.172,-189.172l-283.757,-283.757l-189.172,189.172Z" style = fill:url(#_Linear7); 38 | >path 39 | #d = M1780.68,133.657l-378.342,378.343l189.171,189.171l378.343,-378.342l-189.172,-189.172Z" style = fill:url(#_Linear8); 40 | >defs 41 | >linearGradient 42 | #id = _Linear1 43 | #x1 = 0 44 | #y1 = 0 45 | #x2 = 1 46 | #y2 = 0 47 | #gradientUnits = userSpaceOnUse 48 | #gradientTransform = matrix(567.514,-567.514,189.171,189.171,172.729,795.757) 49 | >stop 50 | #offset = 0 51 | #style = stop-color:#b200ff;stop-opacity:1 52 | >stop 53 | #offset = 1 54 | #style = stop-color:#6f00e8;stop-opacity:1 55 | >linearGradient 56 | #id = _Linear2 57 | #x1 = 0 58 | #y1 = 0 59 | #x2 = 1 60 | #y2 = 0 61 | #gradientUnits = userSpaceOnUse 62 | #gradientTransform = matrix(567.514,-567.514,189.171,189.171,172.729,795.757) 63 | >stop 64 | #offset = 0 65 | #style = stop-color:#b200ff;stop-opacity:1 66 | >stop 67 | #offset = 1 68 | #style = stop-color:#6f00e8;stop-opacity:1 69 | >linearGradient 70 | #id = _Linear3 71 | #x1 = 0 72 | #y1 = 0 73 | #x2 = 1 74 | #y2 = 0 75 | #gradientUnits = userSpaceOnUse 76 | #gradientTransform = matrix(-283.757,-283.757,189.171,-189.171,1875.27,795.757) 77 | >stop 78 | #offset = 0 79 | #style = stop-color:#b200ff;stop-opacity:1 80 | >stop 81 | #offset = 1 82 | #style = stop-color:#6f00e8;stop-opacity:1 83 | >linearGradient 84 | #id = _Linear4 85 | #x1 = 0 86 | #y1 = 0 87 | #x2 = 1 88 | #y2 = 0 89 | #gradientUnits = userSpaceOnUse 90 | #gradientTransform = matrix(378.343,-378.343,189.171,189.171,1496.93,606.586) 91 | >stop 92 | #offset = 0 93 | #style = stop-color:#b200ff;stop-opacity:1 94 | >stop 95 | #offset = 1 96 | #style = stop-color:#6f00e8;stop-opacity:1 97 | >linearGradient 98 | #id = _Linear5 99 | #x1 = 0 100 | #y1 = 0 101 | #x2 = 1 102 | #y2 = 0 103 | #gradientUnits = userSpaceOnUse 104 | #gradientTransform = matrix(567.514,-567.514,189.171,189.171,172.729,795.757) 105 | >stop 106 | #offset = 0 107 | #style = stop-color:#b200ff;stop-opacity:1 108 | >stop 109 | #offset = 1 110 | #style = stop-color:#6f00e8;stop-opacity:1 111 | >linearGradient 112 | #id = _Linear6 113 | #x1 = 0 114 | #y1 = 0 115 | #x2 = 1 116 | #y2 = 0 117 | #gradientUnits = userSpaceOnUse 118 | #gradientTransform = matrix(567.514,-567.514,189.171,189.171,172.729,795.757) 119 | >stop 120 | #offset = 0 121 | #style = stop-color:#b200ff;stop-opacity:1 122 | >stop 123 | #offset = 1 124 | #style = stop-color:#6f00e8;stop-opacity:1 125 | >linearGradient 126 | #id = _Linear7 127 | #x1 = 0 128 | #y1 = 0 129 | #x2 = 1 130 | #y2 = 0 131 | #gradientUnits = userSpaceOnUse 132 | #gradientTransform = matrix(-283.757,-283.757,189.171,-189.171,1875.27,795.757) 133 | >stop 134 | #offset = 0 135 | #style = stop-color:#b200ff;stop-opacity:1 136 | >stop 137 | #offset = 1 138 | #style = stop-color:#6f00e8;stop-opacity:1 139 | >linearGradient 140 | #id = _Linear8 141 | #x1 = 0 142 | #y1 = 0 143 | #x2 = 1 144 | #y2 = 0 145 | #gradientUnits = userSpaceOnUse 146 | #gradientTransform = matrix(378.343,-378.343,189.171,189.171,1496.93,606.586) 147 | >stop 148 | #offset = 0 149 | #style = stop-color:#b200ff;stop-opacity:1 150 | >stop 151 | #offset = 1 152 | #style = stop-color:#6f00e8;stop-opacity:1 153 | -------------------------------------------------------------------------------- /src/demo/components/section/index.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import tpl from './tpl.ef' 3 | import style from '../../style.css' 4 | import styled from '../../../utils/styled.js' 5 | 6 | // Apply style to the component 7 | const Section = styled(tpl, style) 8 | 9 | // Export the module 10 | export default Section 11 | -------------------------------------------------------------------------------- /src/demo/components/section/tpl.ef: -------------------------------------------------------------------------------- 1 | Write your template here: 2 | >div.{{style.section}} 3 | #id = {{id}} 4 | >article 5 | >h1 6 | .{{title = Title}} 7 | +contents 8 | -------------------------------------------------------------------------------- /src/demo/demo.js: -------------------------------------------------------------------------------- 1 | // Import basic elements 2 | import { 3 | Body, Header, TextLogo, LogoButton, Page, 4 | LogoPage, Footer, Drawer, DrawerSection, DrawerItem 5 | } from '../neonclear.js' 6 | 7 | import {inform, exec, mountOptions} from 'ef-core' 8 | 9 | import Logo from './components/logo' 10 | import Section from './components/section' 11 | 12 | import style from './style.css' 13 | 14 | const author = 'Yukino Song' 15 | 16 | inform() 17 | const body = new Body() 18 | const header = new Header({$data: {style: {classes: style.header}}}) 19 | const logo = new TextLogo('Neonclear') 20 | const BL = new Logo() 21 | const buttonSoon = new LogoButton({$data: {caption: 'Coming Soon...'}}) 22 | const buttonGH = new LogoButton({ 23 | $data: { 24 | caption: 'View on GitHub' 25 | }, 26 | $methods: { 27 | click: function() { 28 | window.open('https://github.com/TheNeuronProject/Neonclear') 29 | } 30 | } 31 | }) 32 | const LP = new LogoPage({ 33 | $data: { 34 | caption: 'The ef.js based progressive UI framework', 35 | classes: style.demo 36 | }, 37 | logo: BL, 38 | buttons: [buttonSoon, buttonGH] 39 | }) 40 | const page1 = new Page({ 41 | $data: { 42 | classes: style.page 43 | }, 44 | contents: [new Section({$data: {title: 'Create websites with minimal design.', id: 'intro'}})] 45 | }) 46 | const footer = new Footer(author) 47 | const drawer = new Drawer({ 48 | contents: [ 49 | new DrawerSection({ 50 | $data: { 51 | title: 'Intro' 52 | }, 53 | items: [ 54 | new DrawerItem({ 55 | $data: { 56 | title: 'ef.js', 57 | active: true 58 | }, 59 | $methods: { 60 | click() { 61 | window.open('https://ef.js.org') 62 | } 63 | } 64 | }) 65 | ] 66 | }), 67 | new DrawerSection({ 68 | $data: { 69 | title: 'Usage' 70 | } 71 | }), 72 | new DrawerSection({ 73 | $data: { 74 | title: 'Components' 75 | }, 76 | items: [ 77 | new DrawerItem({ 78 | $data: { 79 | title: 'bPlayer-ef' 80 | }, 81 | $methods: { 82 | click() { 83 | window.open('https://bplayer-ef.ccoooss.com') 84 | } 85 | } 86 | }) 87 | ] 88 | }), 89 | new DrawerSection({ 90 | $data: { 91 | title: 'About' 92 | }, 93 | items: [ 94 | new DrawerItem({ 95 | $data: { 96 | title: 'Author' 97 | }, 98 | $methods: { 99 | click() { 100 | window.open('https://ccoooss.com') 101 | } 102 | } 103 | }), 104 | new DrawerItem({ 105 | $data: { 106 | title: 'TheNeuronProject' 107 | }, 108 | $methods: { 109 | click() { 110 | window.open('https://github.com/TheNeuronProject') 111 | } 112 | } 113 | }), 114 | new DrawerItem({ 115 | $data: { 116 | title: 'Donate' 117 | }, 118 | $methods: { 119 | click() { 120 | window.open('https://www.patreon.com/classicoldsong') 121 | } 122 | } 123 | }) 124 | ] 125 | }) 126 | ] 127 | }) 128 | body.contents.push(LP, page1, footer, header, drawer) 129 | header.left.push(logo) 130 | body.$mount({target: document.body, option: mountOptions.REPLACE}) 131 | exec() 132 | 133 | window.$body = body 134 | 135 | const ls = ` 136 | color: #0ddf79; 137 | ` 138 | console.warn('%c[NEON]', ls, 'This is a DEMO build of Neonclear. Additional contents are included in this bundle. DO NOT use this build in your project.') 139 | -------------------------------------------------------------------------------- /src/demo/loader.js: -------------------------------------------------------------------------------- 1 | import './demo.js' 2 | -------------------------------------------------------------------------------- /src/demo/style.css: -------------------------------------------------------------------------------- 1 | /* Write the style of the module here. 2 | * No manual namespace needed, it will be done automatically 3 | */ 4 | 5 | @import '../variables.css'; 6 | 7 | html { 8 | background-image: url('https://i.loli.net/2017/08/03/59820ac27a362.png'); 9 | background-size: cover; 10 | background-position: center; 11 | background-attachment: fixed; 12 | } 13 | 14 | .demo { 15 | & p { 16 | background: var(--gradient-90); 17 | -webkit-background-clip: text; 18 | -webkit-text-fill-color: transparent; 19 | } 20 | } 21 | 22 | .logo { 23 | max-width: 600px; 24 | height: auto; 25 | filter: drop-shadow(0 5px 10px $colorShadow); 26 | } 27 | 28 | .header { 29 | padding-left: 50px; 30 | } 31 | 32 | .page { 33 | backdrop-filter: blur(10px); 34 | background: rgba(0,0,0,.5); 35 | color: #FFF; 36 | } 37 | 38 | .section { 39 | position: relative; 40 | margin: 0 auto; 41 | width: 100%; 42 | max-width: 1200px; 43 | padding: 0 10px; 44 | } 45 | -------------------------------------------------------------------------------- /src/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow'); 2 | @import url('https://fonts.googleapis.com/css?family=Megrim'); 3 | 4 | html, body { 5 | height: 100%; 6 | } 7 | -------------------------------------------------------------------------------- /src/neonclear.js: -------------------------------------------------------------------------------- 1 | // Version 2 | import { version } from '../package.json' 3 | // Normalize 4 | import 'normalize.css' 5 | // Import global style 6 | import './global.css' 7 | // Import utilities 8 | import styled from './utils/styled.js' 9 | 10 | // Add fonts 11 | const fonts = ['Megrim', 'Abel', 'Material Icons'] 12 | 13 | const fontLink = document.createElement('link') 14 | fontLink.rel = 'stylesheet' 15 | fontLink.href = `https://fonts.googleapis.com/css?family=${fonts.map(item => item.replace(/\s/g, '+')).join('|')}` 16 | ;(document.head || document.getElementsByTagName('head')[0]).appendChild(fontLink) 17 | 18 | // Export every module 19 | export * from './components/body' 20 | export * from './components/header' 21 | export * from './components/footer' 22 | export * from './components/text_logo' 23 | export * from './components/banner_logo' 24 | export * from './components/page' 25 | export * from './components/logo_page' 26 | export * from './components/drawer' 27 | export * from './components/article' 28 | 29 | // Export utilities 30 | export { styled } 31 | 32 | // Log style 33 | const ls = ` 34 | color: #b200fb; 35 | ` 36 | if (process.env.NODE_ENV !== 'production') console.log('%c[NEON]', ls, `Neonclear v${version} loaded!`) 37 | -------------------------------------------------------------------------------- /src/utils/styled.js: -------------------------------------------------------------------------------- 1 | import { inform, exec } from 'ef-core' 2 | 3 | // Return a styled component 4 | export default (component, style) => { 5 | const styledComponent = class extends component { 6 | constructor(state) { 7 | // Hold render 8 | inform() 9 | // Apply style 10 | super({$data: {style}}) 11 | // Apply user state 12 | this.$update(state) 13 | // Unhold render 14 | exec() 15 | } 16 | } 17 | return styledComponent 18 | } 19 | -------------------------------------------------------------------------------- /src/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gradient-90: linear-gradient(90deg, $colorLeft, $colorRight); 3 | } 4 | -------------------------------------------------------------------------------- /test/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheNeuronProject/Neonclear/109c170109b514c601060df0336dd1f2bc8ee178/test/favicon.png -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |Javascript is required for this site.
16 | 17 | 18 | 19 | --------------------------------------------------------------------------------