sucrose-framework
v1.1.0
Published
Sucrose is a microframework for frontend developers. It's designed for use in small projects like a portfolio site that doesn't need to be that reactive but still requires some reactivity.
Downloads
11
Maintainers
maxall4Readme
Sucrose
Sucrose is a microframework for frontend developers. It's designed for use in small projects like a portfolio site that doesn't need to be that reactive but still requires some reactivity
Documentation
installation with npm
- run
npm install sucrose-framework - add
<script src='node_modules/sucrose-framework/Framework.js'></script>to your head tag. - Thats it now you can use sucrose.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="Framework.js"></script>
</head>
<body>
<input data-bind="example" >Text</input>
<input data-bind="test2" >Text</input>
<h1 data-hook="example" ></h1>
<h1 data-hook="test2" ></h1>
<button onclick="reset();">Reset</button>
<button onclick="getstuff();">Log test2</button>
</body>
</html>
<script>
PerformanceMode();
function reset(){
man('test2','')
man('example','')
}
function getstuff(){
var t2 = get('test2')
console.log(t2);
}
</script>In this example we have 2 headers wich are linked to the text of the input boxes.
the man() function can manipulate data and the get() function can give you the data. You can learn more about man() and get() below
man(name,changeto)
the man function takes two parameters the name of the data and what to change the data too.
Example
man('test','Hello World!')
get(name)
the get function takes one paremator wich is the name of the data you would like to get. It returns the value of the data.
data-bind
data-bind takes in the name of the data you would like to create.
data-hook
data-hook takes in the name of the data you would like to display.
PerformanceMode()
PerformanceMode greatly increases the performance of the framework