roecrew / Zam
Licence: mit
⚡️ A component based library that encourages single-page applications.
Stars: ✭ 156
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Zam
Kunafa
Easy to use, high level framework in Kotlin for front-end web-development
Stars: ✭ 148 (-5.13%)
Mutual labels: single-page-app, single-page-applications
amazon-ivs-chime-web-demo
A demo web application intended as an educational tool for demonstrating how to load and play Amazon IVS streams alongside the Amazon Chime SDK.
Stars: ✭ 35 (-77.56%)
Mutual labels: single-page-app, single-page-applications
hafcaf
When you only want a little JavaScript in your SPA.
Stars: ✭ 17 (-89.1%)
Mutual labels: single-page-app, single-page-applications
Knockout Spa
A mini but full-fledged SPA framework and boilerplate to build SPAs fast and scalable
Stars: ✭ 145 (-7.05%)
Mutual labels: single-page-app, single-page-applications
Vanilla Ui Router
Simple vanilla JavaScript router
Stars: ✭ 42 (-73.08%)
Mutual labels: single-page-app, single-page-applications
CRUD-Laravel-Livewire-SPA
CRUD Laravel 7 & Livewire (SPA) Single Page Application
Stars: ✭ 34 (-78.21%)
Mutual labels: single-page-app, single-page-applications
wordpress-svelte
Frontend writen on svelt
Stars: ✭ 17 (-89.1%)
Mutual labels: single-page-app, single-page-applications
laravel-vue-starter
Well Documented Laravel Starter App From Development to Production. For Full Blown RESTFUL API and SPA with Beautiful UI Using Buefy / ElementUi For Reusable Vue Components
Stars: ✭ 80 (-48.72%)
Mutual labels: single-page-app, single-page-applications
Erlach
☣⚫⚫ SPA Imageboad on WebSockets written on Erlang
Stars: ✭ 23 (-85.26%)
Mutual labels: single-page-app, single-page-applications
zeldaPlay
A Single Page Application to help zeldaPlay players to track their characters and progress
Stars: ✭ 95 (-39.1%)
Mutual labels: single-page-app, single-page-applications
FlexDotnetCMS
A powerful, flexible, decoupled and easy to use and Fully Featured ASP .NET CMS, it can also be used as a Headless CMS
Stars: ✭ 45 (-71.15%)
Mutual labels: single-page-app, single-page-applications
Laravel Vue Starter
Well Documented Laravel Starter App From Development to Production. For Full Blown RESTFUL API and SPA with Beautiful UI Using Buefy / ElementUi For Reusable Vue Components
Stars: ✭ 76 (-51.28%)
Mutual labels: single-page-app, single-page-applications
peasy-js-samples
Showcases business logic built with peasy-js and consumed by multiple clients
Stars: ✭ 19 (-87.82%)
Mutual labels: single-page-app, single-page-applications
Vue-router
Tutorial About vue-router in Vue.js version 2
Stars: ✭ 60 (-61.54%)
Mutual labels: javascript-library, single-page-applications
Nativescript Ionic Template
📱 🖥 Create Mobile First apps, Web and Native sharing the code with Angular 🎉
Stars: ✭ 65 (-58.33%)
Mutual labels: single-page-app, single-page-applications
Vue Soundcloud
🎧 A SoundCloud client built with Vue and Nuxt
Stars: ✭ 141 (-9.62%)
Mutual labels: single-page-app, single-page-applications
Liowebrtc
An event-based WebRTC library that makes it easy to embed real-time peer to peer communication into UI components.
Stars: ✭ 138 (-11.54%)
Mutual labels: javascript-library
Photojshop
🎨 Photo editing JavaScript library
Stars: ✭ 137 (-12.18%)
Mutual labels: javascript-library
Ag Psd
Javascript library for reading and writing PSD files
Stars: ✭ 135 (-13.46%)
Mutual labels: javascript-library
Zetawar
Zetawar is a turn based tactical strategy game implemented in 100% ClojureScript.
Stars: ✭ 144 (-7.69%)
Mutual labels: single-page-app
Fast - Minimal - Easy
https://codepen.io/roecrew/project/editor/AOVjne#0
https://codepen.io/roecrew/project/editor/ZGkKbq
Overview
Zam is a component-based micro-library (around 1.1KB).
Zam objects can be thought of as components. These components generate a specified structure of elements, which are mounted to the DOM.
By confining/compartmentalizing the DOM elements that make up a structure to a Zam component, we create a cleaner coding environment.
Basically Zam can build this.
By essentially doing this.
let uiswitch = new UISwitch();
Under the hood, the UISwitch component has a structure similar to the following.
'use strict';
import Zam from './zam.js';
export default class UISwitch extends Zam {
constructor() {
super(
`component-name`, // The name of the custom component
`html`, // The HTML for the component
elem => {}, // The render function where 'elem' is the component itself. Render is auto called on .append() and .prepend()
`css` // The CSS for the component
);
}
}
Import
Current Stable Build is 12.1.0
import Zam from "https://cdn.jsdelivr.net/npm/[email protected]/zam.min.js"
npm install [email protected]
Example
example.js
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<script type="module">
import Zam from "./zam.js";
import UISwitch from "./uiswitch.js";
let root = new Zam(`root`);
let uiswitch = new UISwitch('yellow');
root.append(uiswitch); // or .prepend()
document.querySelector('body').appendChild(root);
</script>
</body>
</html>
uiswitch.js
'use strict';
import Zam from './zam.js';
export default class UISwitch extends Zam {
constructor(color) {
super(
`uiswitch`, `
<div class="ui-switch">
<span class="ui-switch-text">
Off
</span>
<div class="ui-switch-circle">
</div>
</div>
`,
elem => {
elem.querySelector('.ui-switch-circle').style.backgroundColor = color
elem
.querySelector('.ui-switch-circle')
.addEventListener('click', function() {
let circleStyle = this.style;
circleStyle.left === ''
? (circleStyle.left = '45px')
: (circleStyle.left = '');
let switchStyle = this.parentNode.style;
switchStyle.backgroundColor === ''
? (switchStyle.backgroundColor = 'rgb(76, 218, 99)')
: (switchStyle.backgroundColor = '');
let textStyle = this.parentNode.querySelector('.ui-switch-text')
.style;
textStyle.left === ''
? (textStyle.left = '10px')
: (textStyle.left = '');
let textNode = this.parentNode.querySelector('.ui-switch-text');
textNode.innerText === 'Off'
? (textNode.innerText = 'On')
: (textNode.innerText = 'Off');
});
}, `
.ui-switch {
position: relative;
background-color: #d0d2d3;
margin: 50px;
padding: 10px;
width: 60px;
height: 20px;
border: none;
border-radius: 50px;
text-align: right;
transition: background-color 0.1s ease-out;
}
.ui-switch-circle {
position: absolute;
left: 5px;
top: 5px;
width: 30px;
height: 30px;
background-color: white;
border: 1px solid clear;
border-radius: 50px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 11px 0 rgba(0, 0, 0, 0.08),
-1px 3px 3px 0 rgba(0, 0, 0, 0.14);
transition: left 0.1s ease-out;
cursor: pointer;
}
.ui-switch-text {
position: absolute;
background-color: initial;
top: 11px;
left: 45px;
transition: left 0.1s ease-out;
}
`
);
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].