CINXE.COM
Jigsaw – Static Sites for Laravel Developers
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Jigsaw – Static Sites for Laravel Developers</title> <link rel="icon" type="image/png" href="/assets/img/jigsaw-logo.png"> <meta name="msapplication-TileColor" content="#773580"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://use.typekit.net/fac7rzg.css"> <link rel="stylesheet" type="text/css" href="/assets/build/css/app.css?id=0d55c5e4bbb4ac97f5876748b1633cff"> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital@0;1&display=swap" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> </head> <body class="min-h-screen font-sans leading-tight"> <main id="vue-app"> <div class="w-full bg-brown-lightest border-t-[5px] border-purple"></div> <div class="pt-6 font-normal text-xl bg-brown-lightest"> <header class="container-content px-4 sm:px-6"> <nav class="flex justify-between items-center mb-8" aria-role="navigation"> <div class="flex items-center"> <img src="/assets/img/jigsaw-logo.svg" alt="Jigsaw logo" class="logo-icon rounded-lg shadow border-2 border-white mr-2 sm:mr-3 w-10 sm:w-11" /> <h1 class="uppercase tracking-wide text-blue-darker text-xl sm:text-2xl font-normal">Jigsaw</h1> </div> <div class="tracking-wide flex items-center"> <a href="https://github.com/tighten/jigsaw" title="Contribute to Jigsaw on GitHub" class="mr-4 block text-sm text-blue-darker hover:text-purple-darker uppercase font-medium"> <span class="hidden md:inline-block hover:underline">Contribute</span> <img src="/assets/img/GitHub.svg" alt="GitHub alien logo" class="md:hidden -mb-1"> </a> <a href="/docs/installation" title="Read the Jigsaw documentation" class="block text-sm py-2 px-4 md:py-3 md:px-4 bg-purple hover:bg-purple-dark rounded text-white uppercase font-medium shadow-md">Docs</a> </div> </nav> </header> <div class="container-content px-4 sm:px-6 py-4 sm:py-8"> <div class="flex-col mb-0 sm:mb-8 pb-4"> <h1 class="text-4xl md:text-5xl text-blue-darker leading-none"> Static sites for <br /> modern developers </h1> <p class="max-w-xl mt-4 text-grey-dark text-lg md:text-xl leading-normal"> Jigsaw is a framework for rapidly building static sites using the <br class="hidden sm:block"> same modern tooling that powers your web applications. </p> </div> </div> <section class="flex relative container-content -mb-32 px-4"> <div class="flex flex-col w-full md:w-4/5 lg:w-2/3 -mr-2"> <div class="bg-indigo-dark rounded-lg shadow-lg"> <div class="flex"> <div class="flex flex-1 max-w-[25px] lg:bg-indigo-darker rounded-l-lg pt-4 pl-2 pr-8"></div> <div class="-ml-6 flex flex-1 flex-col pt-4 pr-2"> <div class="editor-row"> <p class="ln">1</p> <div class="line-code">---</div> </div> <div class="editor-row"> <p class="ln">2</p> <div class="line-code"> <span class="text-pink">title</span>: <span class="text-yellow">"Jigsaw is awesome!"</span> </div> </div> <div class="editor-row"> <p class="ln">3</p> <div class="line-code">---</div> </div> <div class="editor-row"> <p class="ln">5</p> <div class="line-code">@extends('layouts.master')</div> </div> <div class="editor-row"> <p class="ln">6</p> <div class="line-code"></div> </div> <div class="editor-row"> <p class="ln">7</p> <div class="line-code">@section('content')</div> </div> <div class="editor-row"> <p class="ln">8</p> <div class="line-code ml-4"> <span class="text-pink"><h1></span>{{ $page->title }}<span class="text-pink"></h1></span> </div> </div> <div class="editor-row"> <p class="ln">9</p> <div class="line-code ml-4"> <span class="text-pink"><p></span>Contact us at <br class="hidden md:block lg:hidden"> {{ $page->contact_email }}<span class="text-pink"></p></span> </div> </div> <div class="editor-row"> <p class="ln">10</p> <div class="line-code">@endsection</div> </div> </div> </div> </div> </div> <div class="absolute hidden md:flex flex-col right-0 w-[26rem] lg:w-[32rem] h-80 lg:h-96 justify-center items-center select-none lg:-mt-12 mr-4" style="background:url('/assets/img/browser-illustration.svg') no-repeat center top; background-size: contain;" > <h1 class="text-grey-darker text-2xl lg:text-4xl">Jigsaw is awesome!</h1> <p class="text-grey-darker text-base"> <a href="/contact" class="text-blue-lighter">Get in touch</a> with the lovely humans at Tighten. </p> </div> </section> <section class="bg-gradient-purple py-12 md:py-16 px-4 sm:px-6"> <div class="container-content flex flex-col items-center text-center pt-32"> <h2 class="text-white text-2xl md:text-4xl font-normal mb-6">Getting started is easy</h2> <p class="text-pink-lighter text-lg mb-10">Just make a new project directory and install Jigsaw using Composer</p> <code class="bg-purple-darker w-auto py-3 px-4 sm:px-12 mb-2 rounded-lg"> <pre class="!my-0 text-white text-xs sm:text-sm md:text-lg text-center !border-none !overflow-visible"><span class="select-none">$ </span>composer require tightenco/jigsaw</pre> </code> </div> </section> <section class="bg-brown-lightest py-12 md:py-16 px-4 sm:px-6"> <div class="container-content flex flex-col items-center text-center"> <div class="w-full max-w-xs flex justify-around items-center mb-12"> <img class="w-1/3 bg-white rounded-2xl sm:rounded-3xl shadow border-4 border-white" src="/assets/img/jigsaw-logo.svg" alt="Jigsaw logo"> <span class="font-bold text-blue-darker text-4xl">+</span> <img class="w-1/3 bg-white rounded-2xl sm:rounded-3xl shadow border-4 border-white" src="/assets/img/fieldgoal-logo.svg" alt="FieldGoal logo"> </div> <h2 class="text-blue-darker text-2xl md:text-4xl font-normal mb-6">Don't build a whole backend<br> just for one stupid form.</h2> <p class="text-grey-dark text-lg mb-10">Is that one form on your site holding you back<br class="hidden sm:block"> from building a static site with Jigsaw?</p> <p class="font-bold text-blue-darker text-lg mb-10">FieldGoal solves that exact problem.</p> <a href="https://fieldgoal.io" title="Visit fieldgoal.io" class="hover:bg-grey-light text-grey-darker hover:text-purple-dark no-underline tracking-wide uppercase rounded-lg text-sm bg-grey-lightest shadow-md hover:shadow-lg py-4 px-6"> Visit fieldgoal.io </a> </div> </section> <section class="flex flex-col items-center bg-white py-12 md:py-16"> <div class="flex flex-col md:flex-row items-center container-content mb-8 px-4 sm:px-6"> <div class="flex-col md:w-1/2 md:pr-10 lg:pr-20 pb-8 md:pb-0"> <h3 class="mb-5 text-blue-darker"> Blade templating, just like your Laravel apps. </h3> <p class="text-blue mb-0"> Blade is a powerful, simple, and beautiful templating language, but until now it wasn't an option if you were building a simple static site that didn't need a complex PHP backend. Jigsaw brings Blade to the static site world, so you can use the same templating engine for simple websites as you do for complex web applications. </p> </div> <div class="w-full md:w-1/2"> <div class="bg-indigo-dark rounded-lg shadow-lg"> <div class="flex"> <div class="flex flex-1 max-w-[25px] lg:bg-indigo-darker rounded-l-lg pt-4 pl-2 pr-8"></div> <div class="-ml-6 flex flex-1 flex-col pt-4 pr-2"> <div class="editor-row"> <p class="ln">1</p> <div class="line-code">@extends('_layouts.master')</div> </div> <div class="editor-row"> <p class="ln">2</p> <div class="line-code">@section('body')</div> </div> <div class="editor-row"> <p class="ln">3</p> <div class="line-code ml-4"><span class="text-pink-dark"><h1></span>Hello World<span class="text-pink-dark"></h1></span></div> </div> <div class="editor-row"> <p class="ln">4</p> <div class="line-code">@endsection</div> </div> </div> </div> </div> </div> </div> <div class="flex flex-col md:flex-row items-center container-content mt-6 px-4 sm:px-6"> <div class="flex-col md:w-1/2 md:pr-10 lg:pr-20 pb-8 md:pb-0"> <h3 class="mb-5 text-blue-darker"> Use Markdown for content-driven pages. </h3> <p class="text-blue"> Markdown is a fantastic writing format for things like articles, blog posts, or documentation pages. Jigsaw makes it painless to create a layout in Blade, and fill it with content written in Markdown. </p> <a href="/docs/installation" title="Read the Jigsaw documentation" class="text-purple hover:text-purple-darker text-base no-underline hover:underline"> Learn more in the docs <img src="/assets/img/icon-arrow.svg" class="inline-block w-4 -mb-1" alt="Learn more in the documentation"> </a> </div> <div class="w-full md:w-1/2"> <div class="bg-indigo-dark rounded-lg shadow-lg"> <div class="flex"> <div class="flex flex-1 max-w-[25px] lg:bg-indigo-darker rounded-l-lg pt-4 pl-2 pr-8"></div> <div class="-ml-6 flex flex-1 flex-col pt-4 pr-2"> <div class="editor-row"> <p class="ln">1</p> <div class="line-code">---</div> </div> <div class="editor-row"> <p class="ln">2</p> <div class="line-code">extends: layouts.post</div> </div> <div class="editor-row"> <p class="ln">3</p> <div class="line-code">section: content</div> </div> <div class="editor-row"> <p class="ln">4</p> <div class="line-code">---</div> </div> <div class="editor-row"> <p class="ln">5</p> <div class="line-code"></div> </div> <div class="editor-row"> <p class="ln">6</p> <div class="line-code"># Hello World!</div> </div> <div class="editor-row"> <p class="ln">7</p> <div class="line-code">Welcome to the future.</div> </div> </div> </div> </div> </div> </div> </section> <section class="flex flex-col items-center bg-brown-lightest text-center px-4 sm:px-6 py-16"> <h3 class="text-blue-darker text-center text-3xl mb-6">Compile your assets using Laravel Mix.</h3> <p class="max-w-md mx-auto text-center text-blue text-lg leading-normal mb-12"> Jigsaw bakes in support for Laravel Mix so you can compile your CSS and Javascript assets the same way you're used to in Laravel. </p> <div class="flex flex-wrap max-w-xs sm:max-w-4xl h-32 mb-8 px-8 py-3"> <img class="w-1/2 sm:w-1/4 p-3 sm:p-4 md:p-6 sm:bg-white sm:border sm:border-r-0 border-indigo-lighter rounded-l-lg" src="/assets/img/less-logo.svg" alt="Less logo"> <div class="w-1/2 sm:w-1/4 flex flex-col items-center justify-center py-5 px-0 sm:px-4 md:px-6 sm:bg-white sm:border sm:border-r-0 border-indigo-lighter"> <img class="w-1/3 mt-2" src="/assets/img/tailwind-logo.svg" alt="Tailwind logo"> <p class="text-xl sm:text-base md:text-xl lg:text-2xl text-blue-darker font-semibold leading-tight pt-2 mb-0">Tailwind CSS</p> </div> <img class="w-1/2 sm:w-1/4 py-5 px-0 sm:px-4 md:px-6 sm:bg-white sm:border sm:border-r-0 border-indigo-lighter" src="/assets/img/webpack-logo.svg" alt="Webpack logo"> <img class="w-1/2 sm:w-1/4 py-5 px-6 sm:px-8 md:px-12 sm:bg-white sm:border border-indigo-lighter rounded-r-lg" src="/assets/img/sass-logo.svg" alt="Sass logo"> </div> </section> <section class="flex flex-col items-center bg-gradient-purple text-center px-4 sm:px-6 py-16"> <h2 class="text-white text-3xl font-normal mb-6">Need inspiration?</h2> <p class="text-pink-lighter text-lg mb-8">Browse websites built with Jigsaw, find articles, or get featured.</p> <a href="https://builtwithjigsaw.com" title="Built with Jigsaw"> <img class="mb-6" src="/assets/img/browsers-illustration.svg" alt="Built with Jigsaw by Tighten" /> </a> <a href="https://builtwithjigsaw.com" title="Showcase of websites built with Jigsaw" class="hover:bg-grey-light text-grey-darker hover:text-purple-dark no-underline tracking-wide uppercase rounded-lg text-sm bg-grey-lightest shadow-md hover:shadow-lg py-4 px-6"> Built With Jigsaw </a> </section> <section class="flex flex-col items-center bg-blue-darker text-center px-4 sm:px-6 py-16"> <h4 class="text-white font-light text-3xl mb-6">Ready to get started?</h4> <p class="text-teal-light text-lg font-light mb-10 leading-normal"> Check out our installation instructions and you'll be up and running in no time. </p> <a href="/docs/installation/" title="Start building your site with Jigsaw" class="hover:bg-grey-light text-grey-darker hover:text-purple-dark no-underline tracking-wide uppercase rounded-lg text-sm bg-grey-lightest shadow-md hover:shadow-lg py-4 px-6"> Build your site </a> </section> </div> <footer class="bg-blue-darkest py-8 flex flex-col sm:flex-row justify-center items-center text-center"> <p class="text-teal-light font-normal text-xs sm:text-sm my-1">Brought to you by the lovely humans at <a href="https://tighten.com?ref=jigsaw" class="text-white hover:text-purple-lighter font-normal no-underline sm:pr-4" title="Tighten | Product Development for Web + Mobile | Laravel + Vue.js">Tighten</a> </p> <a href="https://github.com/tighten/jigsaw" class="sm:border-l border-teal-light sm:pl-4 text-white text-xs sm:text-sm hover:text-purple-lighter font-normal no-underline my-1" title="Jigsaw on GitHub">Issues/Feature Requests</a> </footer> </main> </body> </html>