Sucrose-framework NPM

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