<commit_before><!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="<NAME>">
  <meta name="description" content="vishnucss provides a minimal setup of styles for a fast and clean starting point.">
  <title>Vishnu | A simple and minimalist toolkit with modern css.</title>
  <link rel="icon" href="./logo.png">
  <link rel="stylesheet" href="https://unpkg.com/vishnucss"/>
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <main class="wrapper">
    <a href="https://github.com/vishnucss/vishnu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    <section class="hero container flex center">
      <div class="txt-center">
        <img src="./logo.png" alt="Vishnu Logo" height="180">
        <h1>Vishnu</h1>
        <h5>A simple and minimalist toolkit with modern css</h5>
        <a class="github-button" href="https://github.com/vishnucss/vishnu" data-icon="octicon-star" data-size="large" aria-label="Star vishnucss/vishnu on GitHub">Star</a>
        <small class="full-width">Currently v1.0.0-beta.2</small>
      </div>
    </section>

    <hr>

    <section id="installation" class="container center">
      <div>
        <h2>Why should I use it?</h2>
        <p class="description">A simple style guide provides a setup of styles using Modern CSS for a fast and clean starting point. Everything you need to create a basic project is included.</p>
        <h3 class="title">Install</h3>
        <p class="description">You can install Vishnu in multiple ways, but it's as simple as adding a single <code>link</code> tag to your project.</p>

        <h5>CDN</h5>
        <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/vishnucss&quot;/&gt;</code></pre>

        <h5>NPM</h5>
        <pre><code>$ npm install vishnucss</code></pre>
      </div>
		</section>
		
		<hr>

    <section id="docs" class="container center">
      <div>
        <h2 id="docs">Documentation</h2>
        <p class="description">Here is a docs of all the things styled by Vishnu, how to use the grid, tables, utils and how to use some components.</p>
				
				<!-- Typhography -->	
				<div class="section" id="section-typhography">
          <h3 class="title">Typhography</h3>
          <p class="description">Based on <code>rem</code> units. All <code>rem</code> units are converted to base 10, so <code>1rem</code> is equal
            to <code>10px</code>. By default, all headings, paragraphs, and code use system fonts, using the most modern
            one available on a user's operating system.</p>
          <div class="row">
            <div class="col-xs-5">
              <h1>H1 Heading</h1>
              <h2>H2 Heading</h2>
              <h3>H3 Heading</h3>
              <h4>H4 Heading</h4>
              <h5>H5 Heading</h5>
              <h6>H6 Heading</h6>
            </div>
            <div class="col-xs-7">
              <p>Paragraph</p>
              <p><strong>Bold</strong></p>
              <p><i>Italic</i></p>
              <a href="#">Links</a>
            </div>
          </div>
				</div>
				
				<!-- Button -->
				<div class="section" id="section-button">
					<h3 class="title">Buttons</h3>
					<p class="description">The Button, an essential part of any user experience. Buttons come in some basic styles: The <code>&lt;button&gt;&lt;/button&gt;</code> element has default color, whereas <code>.outline</code> has a simple outline around, <code>.flat</code> is entirely clear., and <code>.rounded</code> is rounded border radius.</p>
					<div class="row">
						<div class="col-xs-4 col-sm-12">
							<button>Default Button</button>
						</div>
						<div class="col-xs-8 col-sm-12">
							<p>This button is available by default</p><code>&lt;button&gt;Content&lt;/button&gt;</code>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4 col-sm-12">
							<button class="outline">Outlined Button</button>
						</div>
						<div class="col-xs-8 col-sm-12"><commit_msg>Improves documentation<commit_after><!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="<NAME>">
  <meta name="description" content="vishnucss provides a minimal setup of styles for a fast and clean starting point.">
  <title>Vishnu | A simple and minimalist toolkit with modern css.</title>
  <link rel="icon" href="./logo.png">
  <link rel="stylesheet" href="https://unpkg.com/vishnucss"/>
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <main class="wrapper">
    <a href="https://github.com/vishnucss/vishnu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
    <section class="hero container flex center">
      <div class="txt-center">
        <img src="./logo.png" alt="Vishnu Logo" height="180">
        <h1>Vishnu</h1>
        <h5>A simple and minimalist toolkit with modern css</h5>
        <a class="github-button" href="https://github.com/vishnucss/vishnu" data-icon="octicon-star" data-size="large" aria-label="Star vishnucss/vishnu on GitHub">Star</a>
        <small class="full-width">Currently v1.0.0-beta.2</small>
      </div>
    </section>

    <hr>

    <section id="installation" class="container center">
      <div>
        <h2>Why should I use it?</h2>
        <p class="description">A simple style guide provides a setup of styles using Modern CSS for a fast and clean starting point. Everything you need to create a basic project is included.</p>
        <h3 class="title">Install</h3>
        <p class="description">You can install Vishnu in multiple ways, but it's as simple as adding a single <code>link</code> tag to your project.</p>

        <h5>CDN</h5>
        <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/vishnucss&quot;/&gt;</code></pre>

        <h5>NPM</h5>
        <pre><code>$ npm install vishnucss</code></pre>
      </div>
		</section>
		
		<hr>

    <section id="docs" class="container center">
      <div>
        <h2 id="docs">Documentation</h2>
        <p class="description">Here is a docs of all the things styled by Vishnu, how to use the grid, tables, utils and how to use some components.</p>
				
				<!-- Typhography -->	
				<div class="section" id="section-typhography">
          <h3 class="title">Typhography</h3>
          <p class="description">Based on <code>rem</code> units. All <code>rem</code> units are converted to base 10, so <code>1rem</code> is equal
            to <code>10px</code>. By default, all headings, paragraphs, and code use system fonts, using the most modern
            one available on a user's operating system.</p>
          <div class="row">
            <div class="col-xs-5">
              <h1>H1 Heading</h1>
              <h2>H2 Heading</h2>
              <h3>H3 Heading</h3>
              <h4>H4 Heading</h4>
              <h5>H5 Heading</h5>
              <h6>H6 Heading</h6>
            </div>
            <div class="col-xs-7">
              <p>Paragraph</p>
              <p><strong>Bold</strong></p>
              <p><i>Italic</i></p>
              <a href="#">Links</a>
            </div>
          </div>
				</div>
				
				<!-- Button -->
				<div class="section" id="section-button">
					<h3 class="title">Buttons</h3>
					<p class="description">The Button, an essential part of any user experience. Buttons come in some basic styles: The <code>&lt;button&gt;&lt;/button&gt;</code> element has default color, whereas <code>.outline</code> has a simple outline around, <code>.flat</code> is entirely clear., and <code>.rounded</code> is rounded border radius.</p>
					<div class="row">
						<div class="col-xs-4 col-sm-12">
							<button>Default Button</button>
						</div>
						<div class="col-xs-8 col-sm-12">
							<p>This button is available by default</p><code>&lt;button&gt;Content&lt;/button&gt;</code>
						</div>
          </div>
          <div class="row">
            <div class="col-xs-4 col-sm-12">
              <button class="large">Large Button</button>
            </div>
            <div class="col-xs-8 col-sm-12">
              <p>This button is available by class <code>.large</code></p><code>&lt;button class='large'&gt;Content&lt;/button&gt;</code>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-4 col-sm-12">
              <button class="small">Small Button</button>
            </div>
            <div class="col-xs-8 col-sm-12">
              <p>This button is available by class <code>.small</code></p><code>&lt;button class='small'&gt;Content&lt;/button&gt;</code>
            </div>
          </div>
					<div class="row">
						<div class="col-xs-4 col-sm-12">
							<button class="outline">Outlined Button</button>
						</div>
						<div class="col-xs-8 col-sm-12">
{'fraction_non_alphanumeric': 0.16042446941323346, 'fraction_numerical': 0.046192259675405745, 'mean_word_length': 2.8529058116232466, 'pattern_counts': {'":': 0, '<': 317, '<?xml version=': 0, '>': 317, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5647422', 'n_tokens_mistral': 3625, 'n_tokens_neox': 3196, 'n_words': 764}