DEV Community

Cover image for FSCSS CDN
FSCSS tutorial for FSCSS tutorial

Posted on • Edited on

FSCSS CDN

You can access the FSCSS (Figured Shorthand Cascading Style Sheet) compiler and styling tools via a CDN by using jsdelivr or including the library on codepen.io To implement it, include the FSCSS script in the <head> section of your HTML file, for example: <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" async></script>. Then, you can write your FSCSS styles in a style tag or a separate style.fscss file and include it as a stylesheet: <link type="text/fscss" href="style.fscss">,
Avoid adding rel="stylesheet", do type="fscss" for compilation.

How to use the FSCSS CDN

Add the script to your HTML: In the <head> section of your HTML, add the following script tag to load the FSCSS compiler.
Code


<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

Create your FSCSS file: write styles or Create a file named anyname.fscss and write your styling rules in it. FSCSS offers shorthand syntax and variables to simplify CSS coding.
Link to your FSCSS file: In the same <head> section of your HTML, add the following line to link your style.fscss file.
Code

  <link type="fscss" href="style.fscss">
Enter fullscreen mode Exit fullscreen mode

Example Implementation
Code

<!DOCTYPE html>
<html>
<head>
    <title>FSCSS Example</title>
    <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" defer></script>
    <link type="text/fscss" href="style.fscss">
</head>
<body>
    <!--- elements --->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Where to find more informations

Top comments (0)