Getting Started!
Well trying this out is a good idea, here are ways to get started!
1. Use a CDN!Recommended
A CDN is a content delivery network that allows you to consume packages such as serato.css without any further setup, it just works on the go, just add this link below to your head tag in your html.
<link rel="stylesheet" href="https://cdn.jsdeliver.net/npm/serato-css/serato-css.min.css" />For use with css:
Say you want to use serato css along your custom css, just add the code below on top most line to your css file and you start using the handy classes on the fly!
@import "https://cdn.jsdeliver.net/npm/serato-css/serato-css.min.css";2. Use Npm or Yarn!Recommended
This option is the most recommended for any project that uses other ways of making stuff happen on web other than plain html, say react, vue or svelte. This approach suits those well, so you just open your terminal, and make sure to be or navigate into your project's main or root directory and enter the following command.
npm install serato-cssNow after the installation is complete, add this too to your top most component or page, usually anindex.js file.
import 'serato-css/serato.css';3. Download and use Serato CSS
This is kind of advanced but again easy, just click ondownloadand an archive containing both the minified and non minified serato css files will be downloaded to your device, then just extract that using any archiving software such as winrar or 7zip and then import the file into your project and your ready to go.
For example:
Assuming your project is using plain html and you have now placed theserato.css file in your project's main or root directory, you import it as below in your html document's head tag. The usual stuff of importing any css file into any html project, right!
<link rel="stylesheet" href="serato.css" /># Tips And Recommendations
Consider the following for a super dope experince, and firstly if you used the cdn approach to use serato css, here is an example of how you can use it right away!
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Important meta tag for reponsive scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- serato css cdn link -->
<link
rel="stylesheet"
href="https://cdn.jsdeliver.net/npm/serato-css/serato-css.min.css"
/>
<title>Serato</title>
</head>
<body>
<section class='center-with-grid'>
<h1 class="serato-gradient-on-text font-heading">
Serato CSS
</h1>
<section>
</body>
</html>
In the example above we're grabbing serato css using a cdn link and then use it's handy helper classcenter-with-grid on a section to center the containing stuff, in this case, the h1 with other serato css helper classes which give the text a cool gradient and make it bold with title looks. So go on and start using other cool handy classes of serato css, but also consider the following tips.
# Use Vscode extension to get autocompletion on classes.
This is super handy cause starting out you won't know what the framework has in house for everything though you won't struggle to remember class names as is with other frameworks cause here we use a flat naming covention for almost everything so button is button or it's variance and others such as button-primary, margin-top-1, background-gray-900, color-white etc. Everything is quite relatable and predictable no complex class names to make you check docs everytime.
Assuming you use visual studio code, "IntelliSense for CSS class names in HTML" extension by Zignd can get the work done.
IntelliSense For CSS Class Names In HTML - Vscode Extention
# Look into Serato CSS resources and examples to see it in action!
You can ofcourse get theSerato CSS Starter Kitwhich contains the theming kit, some serato css cheat sheet and other great resources to get you started including links to other projects that are using serato css. But if that's too much for you, you can then just check out this codepen!
Serato CSS Theming Kit Codepen