Get started with rollercss

rollercss is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

Content on this page

expand_less

Quick start

Get started by including rollercss’s production-ready CSS and JavaScript via CDN without the need for any build steps.

1. Create a new index.html file in your project root. Include the <meta name="viewport">tag as well for proper responsive behavior in mobile devices.

content_paste
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rollercss demo</title>
</head>
<body>
<h1>Hello, world</h1>
</body>
</html>

2. Include rollercss’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>.

content_paste
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rollercss demo</title>
<link href="https://cdn.statically.io/gh/abtp2/gw/main/roller.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world</h1>
<script src="https://cdn.statically.io/gh/abtp2/gw/main/roller.js">
</script>
</body>
</html>

3. Hello, world! Open the page in your browser of choice to see your page. Now you can start building with Rollercss by creating your own layout, adding dozens of components, and utilizing our official templates.

CDN links

As reference, here are our primary CDN links.

Next step

Now, the document is ready to work with our library.

You can see the docs section to read more about our library.

To start using components visit our components page.

You can also download our library to use it offline.

Share you experience by joining our community given at bottom of this page.

JS Components

Our library has many inbuilt Components like Navbar, card, button, etc. that you can learn to use by viewing Components page of our website.