Skip to content

Instantly share code, notes, and snippets.

View cossssmin's full-sized avatar
💭
⌨

Cosmin Popovici cossssmin

💭
⌨
171 followers · 9 following
View GitHub Profile
@cossssmin
cossssmin / pine-media-query.css
Created November 14, 2017 08:57
Pine Media Query
@media only screen and (max-width: 699px) {
...
}
@cossssmin
cossssmin / pine-row-table-full-width.html
Last active November 23, 2017 17:51
Pine 12 Column Row Table
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" style="padding: 0 10px;">
Add your content here
</td>
@cossssmin
cossssmin / pine-2col-grid-columns.html
Last active January 7, 2018 11:27
Pine 2 Columns Grid
<td class="col" width="310" style="padding: 0 10px;">6 columns</td>
<td class="col" width="310" style="padding: 0 10px;">6 columns</td>
@cossssmin
cossssmin / pine-columns-for-mobile.css
Created November 14, 2017 09:11
Pine Grid Columns For Mobile
.col {
box-sizing: border-box;
display: inline-block!important;
line-height: 23px;
width: 100%!important;
}
.col-sm-1 {max-width: 8.33333%;}
.col-sm-2 {max-width: 16.66667%;}
.col-sm-3 {max-width: 25%;}
@cossssmin
cossssmin / pine-custom-container-padding.html
Last active November 23, 2017 17:51
Pine Custom Container Padding
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 20px 0 0;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col col-sm-5" width="320" style="padding: 0 10px 0 0; vertical-align: middle;">
<img src="https://picsum.photos/320/450?image=1011" alt="My image" width="320" style="max-width: 320px; width: 100%;">
</td>
<td class="col col-sm-7 py-sm-2" width="310" style="padding: 0 10px; font-weight: 300; vertical-align: middle;">
<h2 style="font-weight: 400; margin: 0;">Article title</h2>
@cossssmin
cossssmin / pine-col-class-example.html
Last active November 23, 2017 17:51
Pine .col Class Example
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="spacer" height="30" style="line-height: 30px;">&nbsp;</td>
</tr>
<tr>
<td style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" width="310" style="padding: 0 10px;">
<h2 style="font-weight: 500; margin: 0;">First column</h2>
@cossssmin
cossssmin / pine-columns-on-mobile-max-12.html
Last active November 23, 2017 17:51
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col col-sm-6" width="200" style="padding: 0 10px;">
<p>6 cols on mobile</p>
</td>
<td class="col col-sm-4" width="200" style="padding: 0 10px;">
<p>4 cols on mobile</p>
@cossssmin
cossssmin / pine-generic-image-reset.css
Last active January 7, 2018 11:27
Pine Image Resets
img {border: 0; display: block; line-height: 100%;}
@cossssmin
cossssmin / pine-native-font-stack.css
Last active January 7, 2018 11:27
Pine Native Font Stack
.col, td, th, div, p, h1, h2, h3, h4, h5, h6 {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}
@cossssmin
cossssmin / pine-google-fonts-example.html
Last active November 23, 2017 17:52
Pine Google Fonts Example
<table align="center" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="col" align="center" width="640" style="padding: 0 10px;">
<h1 class="display-font" style="color: #3FB58B; margin-bottom: 10px; line-height: 100%;">My two natures had memory in common</h1>
<span style="color: #666666; font-size: 14px;">- the heading above is using a display font from Google Fonts -</span>
</td>
</tr>