oleg
/
Puppertino
spiegel van https://github.com/codedgar/Puppertino.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
							<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Layout - Puppertino Framework</title>
    <link
      href="https://rsms.me/inter/inter.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
    />
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation for layout on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-176821843-1');
</script>
  </head>
  <body class="p-layout">
    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
        >Examples</a
      >
      <p>/</p>
      <a href="layout.html" class="p-btn p-btn-scope">Layout</a>
    </div>
    <h1>Layout</h1>
    <div class="master">
      <p>
        Text is the motor of websites and apps. Without them there would be no
        actual usage for them. So in Puppertino we created a font sizing to rule
        them all. Puppertino includes a base font called <strong>Inter</strong>.
        We also have included a curated list of font sizes. You can use the
        layout component using the
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/layout.css"
          target="_blank"
          >CSS of Layout</a
        >
        or
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css"
          target="_blank"
          >downloading the full CSS</a
        >
        (Not recommended if you are just going to use this component).
      </p>

      <div class="talk-about-it">
        <div class="row middle-xs around-xs">
          <div class="col-xs-9 col-md-4">
            <h1 class="p-large-title">Aa<br />Inter</h1>
          </div>

          <div class="col-xs-9 col-md-4">
            <p>
              The font is defined in every CSS that exists, it can be change easily if you desire to use another one.
            </p>
          </div>
        </div>
      </div>

      <div class="talk-about-it">
        <h2>Layout.</h2>

        <p>
          We have included a curated list of font sizes for you to use based on
          human guidelines and transformed into <strong>rem</strong> for
          accesibility. You can use all of these font sizes just by adding the
          <code class="code">p-layout</code> class to your body tag. And it
          looks like this:
        </p>

        <h1>Title 1 (h1)</h1>
        <h2>Title 2 (h2)</h2>
        <h3>Title 3 (h3)</h3>
        <p>Content (p)</p>
      </div>

      <div class="talk-about-it">
        <h2>Other classes.</h2>

        <p>
          There also are other classes that feature other optional sizes. These
          sizes can come in handy in other types of scenarios.
        </p>

        <h1 class="p-large-title">Large Title (p-large-title)</h1>
        <h3 class="p-headline">Title 3 (p-headline)</h3>
        <p class="p-callout">Callout (p-callout)</p>
        <p class="p-subhead">Subhead (p-subhead)</p>
        <p class="p-footnote">Footnote (p-footnote)</p>
        <p class="p-caption">Caption (p-caption)</p>
      </div>
    </div>
 
</body>

  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
</html>