Introduction

Get started with LaarmWork, The most complete, responsive and optimizing CSS Framework, with a demo available.

Quick start

Looking to quickly add LaarmWork to your project? Use LaarmWorkCDN. Head to the downloads page.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/text.css">
<link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/block.css">
<link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/navbar.css">
<link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/main.css">

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing <body> tag, to enable them. jQuery must come first, and then our JavaScript plugins.*

We use jQuery’s slim build, but the full version is also supported.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://arnaudjacques.fr/LaarmWork/res/js/laarmwork.js"></script>

Curious which components explicitly require jQuery, our JS? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Show components requiring JavaScript
  • Navbar for fixed

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:


<!doctype html>
<html lang="fr">
  <head>
      <!-- Required meta tags -->
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- FONT -->
      <link href="https://fonts.googleapis.com/css?family=Poppins:100i,300,400,500,700&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
      <!-- LaarmWork CSS -->
      <link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/text.css">
      <link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/block.css">
      <link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/navbar.css">
      <link rel="stylesheet" href="https://arnaudjacques.fr/LaarmWork/res/css/main.css">

      <title>Hello, world!</title>
    </head>
    <body>
      <h1>Hello, world!</h1>

      <!-- Optional JavaScript -->
      <!-- jQuery first, then LaarmWork JS -->
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
      <script src="https://arnaudjacques.fr/LaarmWork/res/js/laarmwork.js"></script>
  </body>
</html>