Skip to content

Instantly share code, notes, and snippets.

@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)
View diy-to-grid.css
.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
View knowledge-base-grid-styles.css
#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;
View youtube-video-embed.html
<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%;
}
View list-to-grid.html
<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
View craigslist-clone.html
<style>
.gv-list-multiple-container.gv-container {
display:flex;
flex-wrap: wrap;
justify-content:center;
margin-top:20px;
}
.gv-container img {
width:100% !important;
}
@crbdev
crbdev / job-board.html
Created May 17, 2023 08:03
Styles used for the job board featured on the GravityKit demo site and blog
View job-board.html
<div class="job-type">
<div>
<p>
<span>{Type:3}</span><span>{Category:2}</span>
</p>
</div>
<div class="job-info">
<p class="job-featured">
{Listing properties:7:value}
</p>
@crbdev
crbdev / zillow-clone-styles.html
Last active May 16, 2023 09:34
As used in the "How to create a Zillow clone on WordPress with no code" blog post
View zillow-clone-styles.html
<style>
.gv-list-multiple-container.gv-container {
display:flex;
flex-wrap: wrap;
justify-content:center;
margin-top:20px;
}
.gv-container img {
width:100% !important;
}
@crbdev
crbdev / yellow-pages-clone.html
Last active May 16, 2023 09:05
Style for the geolocation directory demo and "Yellow Pages clone"
View yellow-pages-clone.html
<style>
.gv-list-multiple-container.gv-container{
display:flex;
flex-wrap: wrap;
justify-content:center;
}
.gv-list-multiple-container.gv-container .gv-list-view {
margin-right: 10px;
@crbdev
crbdev / gv-table-styles.css
Last active January 4, 2023 12:55
Styles applied to the GV Table layout when used to create a report card (GravityKit blog)
View gv-table-styles.css
.gv-container table td {
border:1px solid #444444 !important;
}
.gv-container table {
border-collapse:collapse;
}
.gv-container table td, #customers th {
border: 1px solid #ddd;
View esports.css
.e-wrapper {text-align:center; color:#ffffff;}
.e-socials {display: flex; justify-content:space-between; max-width:100px; margin:0 auto;}
.e-alias {font-size:22px; color: #FBCC01;}
.e-name {font-size:18px;}
.e-position {font-size:16px;}
.e-socials img {width:20px; filter: invert(70%) sepia(0%) saturate(2%) hue-rotate(5deg) brightness(100%) contrast(100%); margin-bottom:15px !important; margin-top:10px !important;}