Nick LaDart nladart

Animated swinging panels/grid

An idea for a dashboard type page or something. Pure css. JS is only used to bypass the transition on page load. Still needs work.

A Pen by Seth Abbott on CodePen.

License.

Full Width Image Grid

An example of an image grid where the images expand to always cover the entire width of the page while staying in rows of three with minimal (ideally no) space in between. I will have a live example of this soon in a site I'm doing.

A Pen by Nick LaDart on CodePen.

License.

Responsive Grid Extender

A small bit of SASS which lets you define new breakpoints and will automatically generate new grid classes for that breakpoint.

A Pen by Nick LaDart on CodePen.

License.

Flying Letters

Change name variable and let it fly.

A Pen by hakanersu on CodePen.

License.

Page Scroll Content Animation

Animating the appearance of the grid items in each row - jQuery triggers change in position - sliding grid items into position. [UNDER CONSTRUCTION]

A Pen by Nick LaDart on CodePen.

License.

A Pen by Airen

A Pen by Airen on CodePen.

License.

Golden Ratio

Protip: You can debug in Sass with something like: .row:before{content:"#{$height}"}

A Pen by Chris Nager on CodePen.

License.

Custom Checkboxes and Radio Buttons

How to Customize Checkbox and Radio Inputs with Custom CSS Source: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/ Hide the original radios and checkboxes (but still accessible)

:not(#foo) > is a rule filter to block browsers
             that don't support that selector from

applying rules they shouldn't

Toggles

Collection of some fresh, flat toggles. All utilize the "checkbox" hack. See: http://css-tricks.com/the-checkbox-hack/

Which # do you like best?

A Pen by Bennett Feely on CodePen.

License.

	<!-- another practice logo -->
	<link href='http://fonts.googleapis.com/css?family=Dosis:300,400' rel='stylesheet' type='text/css'>
	<div id="container"></div>

	<div class="dog_container">
	<div class="blue_left"></div>
	<div class="blue_right"></div>
	<div class="dark_blue_banner"></div>
	<div class="white_line_right"></div>