DEV Community

Cover image for FSCSS CDN
FSCSS tutorial for FSCSS tutorial

Posted 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" async></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"async></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)