Skip to content

Instantly share code, notes, and snippets.

View SimonPadbury's full-sized avatar

Simon Padbury SimonPadbury

55 followers · 4 following
View GitHub Profile
@SimonPadbury
SimonPadbury / really-simple-grid.css
Last active August 29, 2015 14:05
Really Simple Grid - HTML
/*
Really Simple Grid Sysrem
*/
.grid img {
max-width: 100%;
height: auto;
}
.grid {
width: 100%;
@SimonPadbury
SimonPadbury / meganav.css
Last active August 29, 2015 14:07
Simple supplement to Bootstrap 3 navbar. Allows GRAND-CHILD links to be displayed in a mega-menu format. If no grand-child links, then child links are displayed as normal.
/*
Meganav
*/
@media (min-width: 768px) {
.navbar-brand,
.navbar-nav .caret {
display: none
}
/* Delete the above if you wish to display the caret */
@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>
@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 / toggle_anything.css
Last active May 21, 2018 09:08
toggle_anything.js
#your-thing-id.your-toggle-class {
/*
Any styling you like can go in here, for example...
*/
background: yellow;
}
@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 / 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 / hovernav.css
Last active April 4, 2019 00:29
This is a simple supplement for Bootstrap 3 to transform the navbar so that the dropdown menu appears on hover instead of on click. No need to modify the Bootstrap 3 js or css at all – simply add this js and css below to your js and css files that are <head> linked *after* the Bootstrap 3 js and css files. Styles for both .navbar-default and .na…
/*
Navbar "hovernav" dropdown menu - this works only for screen sizes larger than phones.
The Bootstrap CSS is unchanged.
*/
@media (min-width: 768px) {
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
@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%;