Skip to main content

Introduction

Get started with Fullmoon, the powerful framework for building responsive, mobile-first sites, with {/jsDelivr and/} a template starter page.

Quick start

Looking to quickly add Fullmoon to your project? {/Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files?/} Head to the downloads page.

CSS

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

<link href="/dist/css/fullmoon.min.css" rel="stylesheet" crossorigin="anonymous">

JS

Components

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="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Fullmoon CSS -->
    <link href="/dist/css/fullmoon.min.css" rel="stylesheet" crossorigin="anonymous">

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

For next steps, visit the Layout docs or our official examples to start laying out your site’s content and components.

Best practices

Doctype

You should use the HTML5 doctype. It is short, easy to remember, and backwards compatible:

<!DOCTYPE html>
<html>
  ...

Document language

Set the document language using the lang attribute on your <html> element:

<html lang="en-US">
  ...

This is good for accessibility and search engines, helps with localizing content, and reminds people to use best practices.

Document characterset

You should also define your document's characterset like so:

<head>
  <meta charset="utf-8">
  ...
</head>

Use UTF-8 unless you have a very good reason not to; it will cover your character needs pretty much regardless of what language you are using in your document.

Viewport meta tag

Finally, you should always add the viewport meta tag into your HTML <head>, to give the example a better chance of working on mobile devices. You should include at least the following in your document, which can be modified later on as the need arises:

<head>
  <meta name="viewport" content="width=device-width">
  ...
</head>

Box-sizing

We switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

.selector-for-some-widget {
  box-sizing: content-box;
}

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Fullmoon and reach out to the community with these helpful resources.

  • Read and subscribe to The Official Fullmoon Blog. {/*- Join the official Slack room.
  • Chat with fellow Developers in IRC. On the irc.libera.chat server, in the #fullmoon channel.*/}
  • Implementation help may be found at Stack Overflow (tagged fullmoon). {/*- Developers should use the keyword fullmoon on packages that modify or add to the functionality of Fullmoon when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @fullmoon on Twitter for the latest gossip and awesome music videos.*/}