Skip to content

Instantly share code, notes, and snippets.

View SimonPadbury's full-sized avatar

Simon Padbury SimonPadbury

56 followers · 4 following
View GitHub Profile
@SimonPadbury
SimonPadbury / viewport-width-indicator.html
Created January 16, 2020 09:44
<!--
Just put this at the inside your closing </body> tag.
Vanilla JavaScript.
-->
<div id="vp" style="position: fixed; bottom: 0.5rem; right: 0.5rem; z-index: 999; display: inline-block; background: #555; color: #ffffff; padding: 0 0.5rem 0.125rem; border-radius: 0.25rem;"></div>
<script>
var vp = document.body.querySelector('#vp');
var viewportWidth = window.innerWidth + 'px';
@SimonPadbury
SimonPadbury / partial-bleed.css
Created January 16, 2020 09:28
CSS partial bleed utility
/**
* Iterating from Andy Bell's full-bleed CSS utility (https://hankchizljaw.com/wrote/creating-a-full-bleed-css-utility/)
* simply set a max-width for those blocks you want to be wider than your centered prose column.
* Useful if you have an image (or background image) that doesn't look good on massively wide viewports.
*/
.partial-bleed {
width: 100vh;
max-width: 1200px; /* example assumes your main prose max-width is e.g. 800px */
margin-left: 50%;
@SimonPadbury
SimonPadbury / scss-color-palette-generator.scss
Last active July 15, 2024 21:43
SCSS color palette generator — use to generate a range of color utilities (text color, background, border-color).
// Example: Set your color variables
$color--gray: #888888;
$color--blue: #3366FF;
$color--teal: #43E7F9;
$color--green: #5BD642;
$color--orange: #ffae18;
$color--red: #FF4732;
// Example: Set a color shade step interval
@SimonPadbury
SimonPadbury / README.md
Last active June 23, 2018 06:38
Container Query (max-width) JavaScript

Container Query (max-width)

This tiny JavaScript (no jQuery etc. required) looks for every data attribute data-max-width and records its value (that you set, in pixels). Example:

<div data-max-width="1000" class="my-container">
  ...
</div>
@SimonPadbury
SimonPadbury / container-responsive.css
Last active June 18, 2018 10:18
Responsive container for Bootstrap 4
.container-responsive {
width: 100%;
max-width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar > .container-responsive {
@SimonPadbury
SimonPadbury / container-responsive.css
Last active January 22, 2020 10:16
container-responsive class for Bootstrap 4
/* Responsive Container (because Bootstrap 4.0.0 doesn't have this) */
.container-responsive {
width: 100%;
max-width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@SimonPadbury
SimonPadbury / sticky-note.css
Last active September 30, 2025 05:58
.sticky {
position: absolute;
right: 0;
z-index: 150;
transform: rotate(5deg);
width: 200px;
min-height: 150px;
margin: -10px 10px 10px;
padding: 10px;
font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
@SimonPadbury
SimonPadbury / bootstrap-4-nav-walker.php
Last active April 1, 2018 10:28
See accompanying blog post, http://simonpadbury.github.io/2016/03/09/bootstrap-4-navbar-with-dropdowns-for-wordwress.html
<?php
/*
Bootstrap 4.0.0-alpha2 nav walker extension class
=================================================
Add this to your `functions.php`
*/
class bootstrap_4_walker_nav_menu extends Walker_Nav_menu {
@SimonPadbury
SimonPadbury / style.scss
Created January 1, 2016 17:26
WordPress: Using featured images (thumbnails) as hero backgrounds (2 of 2).
.hero-background-image[style] {
height: 340px !important;
background-color: #888 !important;
background-size: auto 340px !important;
@media (min-width: 768px) {
height: 440px !important;
background-size: auto 440px !important;
}
@media (min-width: 1024px) {
height: 500px !important;
@SimonPadbury
SimonPadbury / single.php
Last active January 1, 2016 17:47
WordPress: Using featured images (thumbnails) as hero backgrounds (1 of 2).
<?php $hero = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="hero-background-image" style="background: url('<?php echo $hero['0'];?>') center top no-repeat;">
<!-- Put your loop <header> in here. -->
</div>