Rendering
Rendering; the render() function provided in Ice Cream's source file, the main function and currently the only function that Ice Cream provides.
The render() function is responsible for rendering the HTML and CSS code into the ./index.html file.
Parameters
The render() function has three parameters that are required in able to render your HTML and CSS code into the ./index.html file
The three parameters are appContainer, html and styles. The appContainer parameter is basically the ID of the div element that will hold all your HTML and CSS code.
Example
index.html
<html>
<head>
<title>My website!</title>
</head>
<body>
<div id="webview"></div>
</body>
</html>If that were the ./index.html's contents then your appContainer parameter would be webview.
The html parameter is self explanatory, it will be where you enter all your HTML code as such;
render('webview'
`
<h1>My HTML!</h1>
`,
// CSS here:
`
body {
font-family:sans-serif;
}
`
)The styles parameter is not so self explanatory. The styles parameter is responsible for all the CSS code. It will be where you enter all your CSS code as such;
render('webview'
// my html here!
`
<h1>My project 🍦</h1>
`,
// my css here!
`
body {
font-family:sans-serif;
}
`
)TIP
You are not restricted to the example code above this TIP. You can use whatever CSS code you want (styles) and you can use whatever HTML code you want (html).
Rendering functions
You can create your own function to return a value of HTML code or CSS code to put in your parameters.
Example:
const container = "webview"
function myhtml() {
return (
`
<h1>My HTML!</h1>
`
)
}
function mycss() {
return (
`
body {
font-family:sans-serif;
}
`
)
}
render(container, myhtml(), mycss())Since your myhtml() function returns a valid value of HTML code it will work as expected, same with your mycss() function!
What's Next?
IMPORTANT
You're at the end of the documentation. This website will be updated in the future with new documentation or rewrites when required.
Next up you'll check out the rest of the documentation.