List Code
foundation make row full width
Just incase you want a full screen width layout and still have it sitting in rows for foundation css .full-width { width: 100%; margin-left: auto; margin-right: auto; max-width: in..
angled divider line
I've seen this a few times now where the dividers on a site were at an angle, just to mix things up a bit and was wondering how hard it would be. angled divider example
css grid for layouts and how to use it
Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore...
recreate marquee element using css
as the marquee element has been removed from html5 (which is probably a good thing) its now unsupported, but you can use css and keyframes to recreate it. Yay.. CSS Marquee Demo Some Marquee ..
click through an overlay element pointer events
This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..
why are people so amazed that a column layout can have a full width element
Is it because its inside a grid still? i must me missing something anyway i have been noticing that there is this post (and this one) going around showing that you can break out of a css grid and go ..
margin padding framework
Just a quick margin and padding framework that i came up with, to make margins padding and basic styles a bit quicker. Usage Example margin-padding-example.html
more complex responsive tables css
i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..
remove border glow css from textarea on select
how to remove the glow around a text area when selected or in focus using css. Text Area Highlight Here is what it looks like just to show you where the textarea is while editing, but can look m..
transform rotate an element in css
good if you need to rotate elements using css code <div class='abox rotated'></div> <style> .abox { background:pink; height:150px; width:150px; margin:50px auto 0; }..
transform rotate a hexagon in css
if you ever needed a hexagon in css here is how you can do it. code <style> .hexagon { position: relative; width: 250px; height: 144.34px; background-color: #64C7CC; margin..
target internet explorer with css and html
target all internet explorer versions with this <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target ie 10 and 11 p { col..
darken background image using css
darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..
material design icons google font
you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..
flex align center vertical horizontal
lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..
targeting the printed version of a page with media print
there are 2 ways to target the printed version of a webpage, you can do it with a @media print query inside your css, or you can link the whole style sheet and target the print media. target print ..
simple dropin wordpress dropdown navigation css
this is good if you just want to drop in some css and get a dropdown navigation back using the default wordpress nav example of the default styles code (css) /* Menu Dropdown */ .nav ul { l..
make your images look non squished when not using image backgrounds
i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set the height and width of it. this method is fine u..
css accordion basics
can we create an accordion with out using jquery ui? I think yes, it will be basic but also keeping it simple it probably a good idea. tried adding transitions to make the divs showing a bit smooth..
use font awesome on elements lists ul
good if you need to use font awesome in list items like ul lists, etc. .element { position: relative; } /*replace the content value with the corresponding value from the list below*/ ..
set transparent menu over background image
this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its e..
table border collapse
I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..
stack a table using css responsive
this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..
design nice block header
I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..
wordpress get template directory
Get the current theme directory, good for use in wordpress templates. <?php echo get_template_directory_uri(); ?> Usage Example To link to an image located in the theme directory <..
check the server method post or get using php
Here is a basic usage method for checking if the server is in post or get mode. most normal pages are served in get mode. You can send data back to a page using get by adding variables to the string ..