search

Using CitronJS

Step by Step

Samples are reusable pieces of HTML content defined within a .xml or .citron file. You can make as many samples and files as you want. Here's how to create one:

hashtag
Step 1 - Creating a Sample

hello_world.xml
<citron>
    <export sample="Hello World"></export>
    
    <sample name="Hello World">
        <h1>Hello, World!</h1>
    </sample>
</citron>

In this example, we define a sample named "Hello World" that displays a heading saying "Hello, World!".

That's pretty much it. Just keep in mind that all samples need to be exported with the <export> tag shown above.

hashtag
Step 2 - Importing Samples

To use a sample in your HTML file, you need to import it using the <c-import> tag. Place this tag in the <head> of your HTML document:

index.html
<html>
    <head>
        <c-import src="hello_world.xml"></c-import>
    </head>
    <body></body>
</html>

Replace "hello_world.xml" with the path to your .xml file containing the sample definitions.

hashtag
Step 3 - Using Samples

Once imported, you can place your sample anywhere in the body of your HTML document by using the <sample> tag with the name attribute matching the name of your sample:

This will render the "Hello World" sample wherever the <sample> tag is placed. Like so:

Website displaying our Hello World sample
circle-exclamation

Keep in mind that nesting sample elements within eachother might cause issues.

hashtag
Conclusion

Thank you for taking the time to learn about CitronJS! We hope this guide has helped you get started on your journey with our library.

Remember, the best way to learn is by doing, so don't hesitate to experiment and create your own samples.

hashtag
Happy Coding! ❤️

PreviousInstallationNextVariables

Last updated