Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Create Tucked In corners quickly and unobtrusively using CSS and Javascript. Packaged into a nice little jQuery plugin for your enjoyment. Happy Tucking!

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 css
Octocat-spinner-32 js
Octocat-spinner-32 scss
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.md
Octocat-spinner-32 config.rb
Octocat-spinner-32 index.html
Octocat-spinner-32 soft_wallpaper.png
README.md

Tucked In v1.1.2

A simple and unobtrusive way to create tucked–in corners quickly using progressive enhancement as our guide.

View the Live Example → http://tuckedin.grayghostvisuals.com

http://tuckedin.grayghostvisuals.com

Requires

  1. jQuery
  2. tuckedin.styles.css styles plugin reference <link rel="stylesheet" src="tuckedin.styles.css">
  3. tuckedin.corners-min.js plugin reference <script src="tuckedin.corners-min.js"></script>
  4. 1 line of jQuery to target the element and call the plugin with the ability to pass in custom options

The Tucked–In Recipe

Feel free to add a background to the tuckedin CSS corner classes below in order to match the background color of your tuckedin corners to the main background of your design / theme. Tucked In comes with the ability to pass in custom options for the tucked-in corners containing element.


<style>
  /* tucked-in top corners bg */
  .tuckedin-corners-frame .top-corners:before,
  .tuckedin-corners-frame .top-corners:after,
  /* tucked-in bottom corners bg */
  .tuckedin-corners-frame .bottom-corners:before,
  .tuckedin-corners-frame .bottom-corners:after {
    /*background: <your choice here>*/
  }
  /*
   * TuckedIn container
   * in case you want to do some @media query stuff
   */
  .tuckedin-corners-frame {<customize here>}
</style>


<!-- tuckedin corners plugin -->
<script src="js/minified/tuckedin.corners-min.js"></script>
<script>
  $(document).ready(function(){
    $('element').tuckedInCorners({
      // default options for the containing
      // element of your tucked-in corners
      'background' : 'transparent',
      'border'     : 'none',
      'height'     : 'auto',
      'margin'     : 'auto',
      'padding'    : 'auto',
      'width'      : 'auto'
    });
  });
</script>

Important Notes

Tucked In strictly uses Compass and Sass to compile so you will need to use these in order to contribute to this project's repo. The compiled production ready CSS has been provided

Something went wrong with that request. Please try again.