Skip to content

Commit

Permalink
Added Buttons and Navbar
Browse files Browse the repository at this point in the history 
Signed-off-by: praveenjuge <[email protected]>
  • Loading branch information
praveenjuge committed Dec 11, 2020
1 parent 025dfa8 commit d7715fc
Show file tree
Hide file tree
Showing 9 changed files with 370 additions and 68 deletions.
1 change: 1 addition & 0 deletions docs/config.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ enableEmoji = true
enableGitInfo = true
enableRobotsTXT = true
canonifyURLs = true
pygmentsUseClasses=true

[params]
author = "Praveen Juge"
Expand Down
38 changes: 38 additions & 0 deletions docs/content/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,25 @@ Requires Bootstrap JS 5.0.0-beta1 which is not included in this package. Learn h
</div>
{{< /code >}}

## Buttons

Tailwind needs an `active` class with your own color. Learn more about adding [custom styles here](https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply).

```css
/* tailwind.css */
@layer components {
.active {
@apply bg-indigo-900 !important;
}
}
```

{{< code html >}}
<button type="button" class="inline-flex px-4 py-2 my-2 text-sm font-medium text-white transition bg-indigo-600 rounded-md shadow-sm hover:bg-indigo-700" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="inline-flex px-4 py-2 my-2 text-sm font-medium text-white transition bg-indigo-600 rounded-md shadow-sm hover:bg-indigo-700 active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="inline-flex px-4 py-2 my-2 text-sm font-medium text-white transition bg-indigo-400 rounded-md shadow-sm " disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
{{< /code >}}

## Collapse

{{< code html >}}
Expand Down Expand Up @@ -102,7 +121,26 @@ Requires Bootstrap JS 5.0.0-beta1 which is not included in this package. Learn h
</div>
</div>
</div>
{{< /code >}}

## Navbar

Responsive `navbar-collapse` classes are available for specifying collapsible breakpoint.

{{< code html >}}

<nav class="relative flex flex-wrap items-center justify-between px-4 py-2 bg-white rounded">
<a href="#" class="flex mr-4">Navbar</a>
<button class="inline-flex px-3 py-2 text-sm font-medium bg-white border rounded-md shadow-sm lg:hidden navbar-toggler hover:bg-gray-50" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
<div class="items-center justify-start w-full flex-nowrap lg:justify-end lg:w-auto collapse lg:navbar-collapse" id="navbarNav">
<nav class="flex flex-col mt-4 space-x-0 space-y-2 lg:mt-0 lg:space-x-1 lg:space-y-0 lg:flex-row">
<button class="inline-flex px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded" aria-current="page" href="#">Home</button>
<button class="inline-flex px-3 py-2 text-sm font-medium bg-white rounded hover:bg-gray-100" href="#">Features</button>
<button class="inline-flex px-3 py-2 text-sm font-medium bg-white rounded hover:bg-gray-100" href="#">Pricing</button>
<button class="inline-flex px-3 py-2 text-sm font-medium bg-gray-100 rounded pointer-events-none" href="#" tabindex="-1" aria-disabled="true">Disabled</button>
</nav>
</div>
</nav>
{{< /code >}}

## Popovers
Expand Down
2 changes: 1 addition & 1 deletion docs/layouts/404.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{ define "main"}}

<main class="w-full px-6 py-20 mx-auto md:w-full lg:w-1/2 md:py-40">
<main class="px-5 py-12 mx-auto col-span-full">
<h1 class="mb-4 text-3xl font-semibold leading-tight text-gray-900">Page Not Found (404)</h1>
<p class="mb-5 text-base text-gray-600 md:text-lg">Sorry about that.</p>

Expand Down
4 changes: 2 additions & 2 deletions docs/layouts/_default/baseof.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}" prefix="og: http://ogp.me/ns#" class="text-gray-900 bg-gray-50">
<html lang="{{ .Site.LanguageCode }}" prefix="og: http://ogp.me/ns#" class="text-gray-900 bg-white">
<head itemscope itemtype="{{ .Site.BaseURL }}">
{{ partial "meta" . }}
</head>
<body class="container relative px-0 pt-0 pb-0 mx-auto md:pb-16 md:pt-16 md:px-4">
<body class="container relative grid grid-cols-1 px-0 py-0 mx-auto md:py-16 md:px-4 md:grid-cols-5">
{{ block "main" . }}{{ end }} {{ partial "js" . }}
</body>
</html>
108 changes: 53 additions & 55 deletions docs/layouts/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,63 @@
{{ define "main"}}

<section class="grid grid-cols-1 gap-0 md:grid-cols-5 sm:gap-4">
<aside class="hidden px-0 py-6 prose md:block">
<div class="sticky top-5">{{ .TableOfContents }}</div>
</aside>
<main class="col-span-4 px-5 py-12 bg-white rounded-none shadow sm:px-12 md:rounded-lg">
<header class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-extrabold sm:text-4xl">{{ .Title }}</h1>
<a
href="https://github.com/praveenjuge/windstrap"
target="_blank"
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<aside class="hidden px-0 prose md:block">
<section class="sticky top-5">{{ .TableOfContents }}</section>
</aside>
<main class="col-span-4 px-5 py-12 md:py-5 sm:px-12">
<header class="flex items-center justify-between mb-8">
<h1 class="text-3xl font-extrabold sm:text-4xl">{{ .Title }}</h1>
<a
href="https://github.com/praveenjuge/windstrap"
target="_blank"
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<svg class="w-5 h-5 mr-2 -ml-1" role="img" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
GitHub
</a>
</header>
<article class="max-w-full prose prose-indigo">{{ .Content }}</article>
<footer class="grid grid-cols-1 gap-4 pt-10 mt-10 border-t border-gray-200 lg:grid-cols-2">
<a
href="https://github.com/praveenjuge/windstrap/discussions"
target="_blank"
class="flex items-center justify-between w-full px-6 py-4 text-sm font-medium text-white transition bg-gray-900 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
role="alert"
>
<span class="flex items-center">
<svg class="w-5 h-5 mr-2 -ml-1" role="img" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
GitHub
</a>
</header>
<article class="max-w-full prose prose-indigo">{{ .Content }}</article>
<footer class="grid grid-cols-1 gap-4 pt-10 mt-10 border-t border-gray-200 lg:grid-cols-2">
<a
href="https://github.com/praveenjuge/windstrap/discussions"
target="_blank"
class="flex items-center justify-between w-full px-6 py-4 text-sm font-medium text-white transition bg-gray-900 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
role="alert"
>
<span class="flex items-center">
<svg class="w-5 h-5 mr-2 -ml-1" role="img" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/>
</svg>
<span class="pl-1">Discuss on GitHub</span>
</span>
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a
href="https://twitter.com/praveenjuge"
target="_blank"
class="flex items-center justify-between w-full px-6 py-4 text-sm font-medium text-white transition bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600"
role="alert"
>
<span class="flex items-center">
<svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
/>
</svg>
<span class="pl-1">Follow on Twitter</span>
</span>
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
<span class="pl-1">Discuss on GitHub</span>
</span>
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<a
href="https://twitter.com/praveenjuge"
target="_blank"
class="flex items-center justify-between w-full px-6 py-4 text-sm font-medium text-white transition bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600"
role="alert"
>
<span class="flex items-center">
<svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
/>
</svg>
</a>
</footer>
</main>
</section>
<span class="pl-1">Follow on Twitter</span>
</span>
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</footer>
</main>

{{ end }}
2 changes: 1 addition & 1 deletion docs/layouts/shortcodes/code.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- To display the component -->
<div class="w-full p-5 -mb-5 overflow-y-visible bg-gray-200 rounded-md">{{ .Inner }}</div>
<section class="w-full p-5 -mb-5 overflow-y-visible bg-gray-200 rounded-md">{{ .Inner }}</section>

<!-- To display the code -->
{{ if len .Params | eq 2 }} {{ highlight (trim .Inner "\n\r") (.Get 0) (.Get 1) }} {{ else }} {{ highlight (trim .Inner "\n\r") (.Get 0) "" }} {{ end }}
Loading

0 comments on commit d7715fc

Please sign in to comment.