Skip to content

Instantly share code, notes, and snippets.

@crbdev
crbdev / contact-list-cards.html
Last active April 22, 2025 07:21
Contact List cards as seen on the GravityKit blog tutorial.
<!--
Place the HTML in a Custom Content field and replace the merge tags with your own.
You can then plce the CSS inside the "Custom Code" panel in the View settings.
-->
<div class="contact-card">
<div class="contact-header">
<h2>{Name (Name):1.3} {Name (Name):1.6}</h2>
<p class="position">{Job Title:3}</p>
</div>
@crbdev
crbdev / health-tracker-notes.css
Created April 18, 2025 03:47
Health tracker CSS
.gv-list-view {border:none !important;}
/* Grid container */
.gv-list-view-content {
background-color: #fff;
border: 1px solid #e5e7eb;
border-left: 5px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
@crbdev
crbdev / leaderboard-table-styles.css
Created February 13, 2025 06:45
Modern table styles
/* Modern Table Styling */
table.gv-table-view {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
@crbdev
crbdev / task-priority.html
Created December 31, 2024 08:16
Color-coded priorities in GravityView as seen on the GravityKit blog
[gvlogic if="{Priority:3}" is="1st Priority"]
<span class="gk-priority gk-priority-critical">{Priority:3}</span>
[/gvlogic]
[gvlogic if="{Priority:3}" is="2nd Priority"]
<span class="gk-priority gk-priority-high">{Priority:3}</span>
[/gvlogic]
[gvlogic if="{Priority:3}" is="3rd Priority"]
<span class="gk-priority gk-priority-medium">{Priority:3}</span>
@crbdev
crbdev / fundraising-dashboard.html
Last active September 30, 2024 01:44
HTML and styles used for the "total raised" and "total donated" amounts on the fundraising dashboard tutorial
<div class="total-raised-container">
<div class="total-raised">
<span class="raised-amount">
<!-- replace the form ID and merge tag with your own -->
$[gravitymath scope="form" id="3"] {Donation amount:5:sum} [/gravitymath]
</span>
<span class="raised-text">Total Raised</span>
</div>
</div>
@crbdev
crbdev / diy-to-grid.css
Created January 12, 2024 04:31
Custom CSS to turn the DIY layout into a grid (as seen on the GravityKit blog)
.gv-diy-multiple-container.gv-container {
display:flex;
flex-wrap: wrap;
justify-content:center;
margin-top:20px;
}
.gv-container img { width:100% !important; }
.gv-diy-multiple-container.gv-container .gv-diy-view {
@crbdev
crbdev / knowledge-base-grid-styles.css
Created December 8, 2023 10:31
Styles used in "How to build a knowledge base" article on the GravityKit blog
#gv-view-2303-1 .gv-list-multiple-container {
display:flex;
flex-wrap: wrap;
justify-content:center;
margin-top:20px;
}
#gv-view-2303-1 .gv-list-multiple-container img {
max-width:70% !important;
margin: 0 auto;
<div class="video-container">
<iframe class="video" src="https://www.youtube.com/embed/yekXIobF3fk" allowfullscreen></iframe>
</div>
<style>
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
<style>
.gv-list-multiple-container.gv-container{
display:flex;
flex-wrap: wrap;
justify-content:center;
margin-top:20px;
}
.gv-list-multiple-container.gv-container .gv-list-view {
margin-right: 20px;
width: 340px;
@crbdev
crbdev / craigslist-clone.html
Created May 19, 2023 03:19
As used on the GravityKit blog
<style>
.gv-list-multiple-container.gv-container {
display:flex;
flex-wrap: wrap;
justify-content:center;
margin-top:20px;
}
.gv-container img {
width:100% !important;
}