Skip to content

Commit

Permalink
chore: new dashboard + kanban example (#40)
Browse files Browse the repository at this point in the history
  • Loading branch information
jmjuanes authored Oct 15, 2024
1 parent 2fca856 commit 2c0d15f
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 2 deletions.
2 changes: 1 addition & 1 deletion docs/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ nextPage: "installation"

# Introduction

**LowCSS** is a powerful **Utility CSS framework** built with SASS, designed to streamline your CSS development process and enable you to create beautiful, responsive web interfaces with ease. Inspired by the popular [Tailwind CSS](https://tainwindcss.com), LowCSS follows a similar structure and syntax, making it familiar and intuitive for developers already familiar with Tailwind CSS.
**LowCSS** is a powerful **Utility CSS framework** built with SASS, designed to streamline your CSS development process and enable you to create beautiful, responsive web interfaces with ease. Inspired by the popular [Tailwind CSS](https://tailwindcss.com), LowCSS follows a similar structure and syntax, making it familiar and intuitive for developers already familiar with Tailwind CSS.

## Intuitive Utility Classes

Expand Down
2 changes: 1 addition & 1 deletion examples/dashboard.html → examples/dashboard-01.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Dashboard"
title: "Dashboard-01"
---

<div class="w-full">
Expand Down
181 changes: 181 additions & 0 deletions examples/dashboard-02.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
---
title: "Dashboard-02"
navbar:
- logo: "kanban"
items: ["home", "layout", "folder", "users"]
- logo: ""
items: ["tool"]
kanban:
- title: "To Do"
color: "bg-neutral-500"
tasks:
- title: "Redesign About"
description: "We have to redesign the About page, and include the new team members."
tags: ["design", "marketing"]
comments_count: 3
- title: "Refactor main components"
tags: ["design"]
description: "We have to refactor the main components of the website to match new version 2.4."
comments_count: 5
- title: "In Progress"
color: "bg-blue-500"
tasks:
- title: "Create new landing page"
tags: ["design", "marketing"]
description: "We have to create a new landing page for the new product."
comments_count: 2
- title: "Update pricing page"
tags: ["design"]
description: "We have to update the pricing page with the new prices."
comments_count: 1
- title: "Move FAQ"
tags: ["design"]
description: "Client has decied to move the FAQ section to the About page."
comments_count: 5
- title: "Branding"
tags: ["design", "marketing"]
description: "Update the branding with the new colors."
comments_count: 12
- title: "Review"
color: "bg-yellow-500"
tasks:
- title: "Update footer"
tags: ["design", "marketing"]
description: "We have to update the footer with the new social media links."
comments_count: 3
- title: "Update header"
tags: ["design"]
description: "We have to update the header with the new logo."
comments_count: 2
- title: "Home Page bug fixes"
tags: ["bug"]
description: "We found some bugs in the home page. List attached on ticket."
comments_count: 10
- title: "Done"
color: "bg-green-500"
tasks:
- title: "Update blog"
tags: ["design", "marketing"]
description: "We have to update the blog with the new articles."
comments_count: 4
- title: "Update contact page"
tags: ["design"]
description: "We have to update the contact page with the new contact information."
comments_count: 2
---

<div class="w-full flex flex-col gap-4 bg-neutral-50 relative py-4 pl-20 pr-4">
<!-- Sidebar -->
<div class="bg-white w-16 absolute top-0 bottom-0 left-0 z-10 border-r border-neutral-200 flex flex-col justify-between">
{{#each navbar}}
<div class="flex flex-col gap-1 px-2 py-4">
{{#if logo}}
<a class="flex items-center justify-center text-white bg-neutral-950 rounded-full py-3 text-2xl mb-4">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#{{logo}}"></use></svg>
</a>
{{/if}}
{{#each items}}
<a class="flex items-center justify-center text-neutral-800 hover:text-neutral-950 hover:bg-neutral-100 rounded-xl py-3 text-xl cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#{{.}}"></use></svg>
</a>
{{/each}}
</div>
{{/each}}
</div>
<!-- Header -->
<div class="w-full flex items-center justify-between mb-6">
<div class="flex items-center gap-2">
<div class="text-neutral-700 hover:text-neutral-900 cursor-pointer hover:underline">Projects</div>
<div class="text-neutral-500">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-right"></use></svg>
</div>
<div class="text-neutral-700 hover:text-neutral-900 cursor-pointer hover:underline">ABCD Corp.</div>
<div class="text-neutral-500">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#chevron-right"></use></svg>
</div>
<div class="text-neutral-950">Website</div>
</div>
<div class="relative group">
<button class="flex items-center justify-center rounded-full border border-neutral-200 h-8 w-8 cursor-pointer text-neutral-900 text-lg bg-white">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#user"></use></svg>
</button>
<div class="absolute hidden group-focus-within:block top-full right-0 mt-1">
<div class="border border-neutral-200 p-1 rounded-lg bg-white text-sm shadow-sm w-40 select-none">
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Profile</a>
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Settings</a>
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Contact Support</a>
<div class="w-full h-px bg-neutral-200 my-1"></div>
<a class="flex items-center hover:bg-neutral-100 px-2 py-1 rounded-md font-medium cursor-pointer">Logout</a>
</div>
</div>
</div>
</div>
<!-- Description -->
<div class="w-full">
<div class="text-neutral-950 text-2xl font-bold">Website</div>
<div class="text-neutral-500 text-sm">This is the main project for the website of ABCD Corp.</div>
</div>
<!-- Filters and views -->
<div class="w-full flex items-center justify-between gap-4 select-none mt-3">
<div class="flex items-center gap-1 p-1 bg-neutral-100 rounded-lg border border-neutral-200">
<div class="bg-white text-neutral-900 font-medium text-xs px-2 py-1 rounded-md shadow-sm">Kanban</div>
<div class="cursor-pointer hover:bg-white text-neutral-700 text-xs px-2 py-1 rounded-md">List</div>
<div class="cursor-pointer hover:bg-white text-neutral-700 text-xs px-2 py-1 rounded-md">Calendar</div>
</div>
<div class="flex items-center gap-2">
<div class="relative">
<div class="absolute top-0 left-0 text-neutral-500 text-base px-2 py-2">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#search"></use></svg>
</div>
<input type="text" class="border-0 bg-white py-1 pr-2 pl-8 border border-neutral-200 rounded-lg bg-white text-sm" placeholder="Search for a task..." />
</div>
<div class="flex items-center justify-center gap-1 bg-white hover:bg-neutral-100 text-900 rounded-lg px-3 py-1 border border-neutral-200 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#filter"></use></svg>
<div class="text-sm font-medium">Filter</div>
</div>
<div class="flex items-center justify-center gap-1 bg-white hover:bg-neutral-100 text-900 rounded-lg px-3 py-1 border border-neutral-200 cursor-pointer">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#download"></use></svg>
<div class="text-sm font-medium">Export</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="w-full grid grid-cols-4 gap-4 items-start mb-16">
{{#each kanban}}
<div class="w-full flex flex-col gap-2">
<div class="flex items-center gap-2">
<div class="flex {{color}} rounded-full w-3 h-3"></div>
<div class="text-neutral-700 font-bold">{{title}}</div>
</div>
<div class="cursor-pointer w-full bg-white hover:bg-neutral-100 rounded-lg border border-neutral-200 flex items-center gap-1 justify-center py-2 px-2">
<div class="text-base">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#plus"></use></svg>
</div>
<div class="text-sm font-medium">Add task</div>
</div>
{{#each tasks}}
<div class="w-full bg-white rounded-lg border border-neutral-200 p-4">
<div class="text-neutral-900 font-medium mb-1">{{title}}</div>
<div class="text-neutral-500 text-xs">{{description}}</div>
<div class="flex items-center gap-1 mt-4">
<div class="flex items-center gap-1">
{{#each tags}}
<div class="text-2xs bg-neutral-100 text-neutral-600 px-2 py-1 rounded-full">
<span>{{.}}</span>
</div>
{{/each}}
</div>
<div class="ml-auto flex items-center gap-1 text-neutral-500">
<div class="text-sm">
<svg width="1em" height="1em"><use xlink:href="/sprite.svg#message-dots"></use></svg>
</div>
<div class="text-xs">{{comments_count}}</div>
</div>
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>

0 comments on commit 2c0d15f

Please sign in to comment.