Packages

surface

0.8.0
0.12.3 0.12.2 0.12.1 0.12.0 0.11.5 0.11.4 0.11.3 0.11.2 0.11.1 0.11.0 0.10.0 0.9.5 0.9.4 0.9.3 0.9.2 0.9.1 0.9.0 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.6 0.7.5 0.7.4 0.7.3 0.7.2 0.7.1 0.7.0 0.6.1 0.6.0 0.5.2 0.5.1 0.5.0 0.4.1 0.4.0 0.3.2 0.3.1 0.3.0 0.2.1 0.2.0 0.1.1 0.1.0 0.1.0-alpha.2 0.1.0-alpha.1 0.1.0-alpha.0

A component based library for Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
46 Versions
3 Dependencies
21 Dependants
Files
Activity
surface priv templates surface.init layouts tailwind index.sface
Raw

priv/templates/surface.init/layouts/tailwind/index.sface 

<section class="text-gray-700 body-font container mx-auto">

  <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">

    <div class="lg:flex-grow lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">

      <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">

        Welcome to Phoenix!

      </h1>

      <p class="mb-8 leading-relaxed">

        Start building rich interactive user-interfaces, writing minimal custom Javascript.

        Built on top of Phoenix LiveView, <strong>Surface</strong> leverages the amazing <strong>Phoenix Framework</strong> to provide a fast and productive solution to build modern web applications.

      </p>

      {#if Code.ensure_loaded?(<%= inspect(web_module) %>.Demo)}

        <div class="flex justify-center">

          <a href="/demo" class="inline-flex text-white bg-teal-500 border-0 py-2 px-6 focus:outline-none hover:bg-teal-600 rounded text-lg">

            Card demo

          </a>

          {#if Application.spec(:surface_catalogue)}

            <a href="/catalogue/components/<%= inspect(web_module) %>.Components.Card/example" class="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">

              Card examples

            </a>

          {/if}

        </div>

      {/if}

    </div>

  </div>

</section>

<footer class="text-center lg:text-left bg-gray-100 text-gray-600 w-full lg:fixed lg:bottom-0">

  <div class="mx-6 py-10 text-center md:text-left">

    <div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8 container mx-auto">

      <div class="">

        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">

          Surface

        </h6>

        <ul class="space-y-3">

          <li>

            <a href="https://surface-ui.org/">surface-ui.org</a>

          </li>

          <li>

            <a href="https://github.com/surface-ui/surface">Source</a>

          </li>

          <li>

            <a href={"https://github.com/surface-ui/surface/blob/v#{Application.spec(:surface, :vsn)}/CHANGELOG.md"}>

              v{Application.spec(:surface, :vsn)} Changelog

            </a>

          </li>

          <li>

            <a href="https://elixirforum.com/t/surface-a-component-based-library-for-phoenix-liveview/">Forum</a>

          </li>

          <li>

            <a href="https://elixir-slackin.herokuapp.com/">#surface on Slack</a>

          </li>

        </ul>

      </div>

      <div class="">

        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">

          Phoenix Framework

        </h6>

        <ul class="space-y-3">

          <li>

            <a href="https://phoenixframework.org/">phoenixframework.org</a>

          </li>

          <li>

            <a href="https://github.com/phoenixframework/phoenix">Source</a>

          </li>

          <li>

            <a href={"https://github.com/phoenixframework/phoenix/blob/v#{Application.spec(:phoenix, :vsn)}/CHANGELOG.md"}>

              v{Application.spec(:phoenix, :vsn)} Changelog

            </a>

          </li>

          <li>

            <a href="https://elixirforum.com/c/phoenix-forum">Forum</a>

          </li>

          <li>

            <a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>

          </li>

        </ul>

      </div>

      <div class="">

        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">

          Elixir Language

        </h6>

        <ul class="space-y-3">

          <li>

            <a href="https://elixir-lang.org/">elixir-lang.org</a>

          </li>

          <li>

            <a href="https://github.com/elixir-lang/elixir">Source</a>

          </li>

          <li>

            <a href="https://twitter.com/elixirlang">Twitter @elixirlang</a>

          </li>

          <li>

            <a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>

          </li>

          <li>

            <a href="https://discord.gg/elixir">Elixir on Discord</a>

          </li>

        </ul>

      </div>

      <div class="">

        <h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">

          Tailwind CSS

        </h6>

        <ul class="space-y-3">

          <li>

            <a href="https://tailwindcss.com/">tailwindcss.com</a>

          </li>

          <li>

            <a href="https://github.com/tailwindlabs/tailwindcss">Source</a>

          </li>

          <li>

            <a href="https://twitter.com/tailwindcss">Twitter @tailwindcss</a>

          </li>

        </ul>

      </div>

    </div>

  </div>

</footer>