Skip to content

eliezerpujols/mocassin.css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mocassin.css

Mocassin.css is a responsive collection of hover effects for Captions, powered by Sass. Each caption is adapt the size of the image.

Installation

The production code is inside of dist folder, you can install it via npm:

Wait please

Or via Bower:

Wait please

Basic Usage

  1. Include the stylesheet on your document's:

    Non-responsive file:

    <head>
    	...
    	<link rel="stylesheet" href="css/mocassin.css"> <!-- Or *.min.css -->
    	...
    </head>

    Responsive file (The caption does not hide in small screen):

    <head>
    	...
    	<link rel="stylesheet" href="css/mocassin-r.css"> <!-- Or *.min.css -->
    	...
    </head>

    For touch event on touch screens, add:

    <body>
    	...
    	...		
    	<script src="js/mocassin.js"></script> <!-- Or *.min.js -->
    </body>
  2. Add class mc-item to the main, mc-item__image to the <img ...> element, and mc-item__caption to the content caption. Example:

    <figure class="mc-item">
    	<img class="mc-item__image" src="..." alt="...">
    	<figcaption class="mc-item__caption">
    		<h3>This is my content!</h3>
    	</figcaption>
    </figure>
  3. Finally you need to add one of the following class:

    • fadeIn Caption
      • mc-item--fadeIn
    • Sliding Caption and Image
      • mc-item--slideInUp
      • mc-item--slideInDown
      • mc-item--slideInUpBig
      • mc-item--slideInDownBig
    • Sliding Caption and ZoomIn Image
      • mc-item--slideInUp-zoomIn
      • mc-item--slideInDown-zoomIn
      • mc-item--slideInUpBig-zoomIn
      • mc-item--slideInDownBig-zoomIn
    • ZoomOut Image
      • mc-item--zoomOut
      • mc-item--zoomOutUp
      • mc-item--zoomOutDown
    • Sliding Caption and ZoomOut Image
      • mc-item--slideInUpBig-zoomOut
      • mc-item--slideInDownBig-zoomOut
      • mc-item--slideInLeftBig-zoomOut
      • mc-item--slideInRightBig-zoomOut
    • Sliding Caption and Image to the 50% (Half)
      • mc-item--slideInLeftHalf
      • mc-item--slideInRightHalf
    • Flip Out Caption
      • mc-item--flipOutUp
      • mc-item--flipOutDown
      • mc-item--flipOutLeft
      • mc-item--flipOutRight

    Example:

    <figure class="mc-item mc-item--zoomOut">
    	<img class="mc-item__image" src="..." alt="...">
    	<figcaption class="mc-item__caption">
    		<h3>This is my content!</h3>
    	</figcaption>
    </figure>

Custom Builds

Mocassin.css is powered by Gulp, and you can create custom builds. First you'll need Gulp and other dependencies:

$ cd path/to/mocassin.css/
$ sudo npm install

Now, you can eliminate in mocassin.scss or mocassin-r.scss those effects that do not want, and then run with:

$ gulp createCSS

Contributing

I only have three rules for submitting a pull request:

  1. Match the follow naming convention (camelCase):

    mc-item--[captionEffect] || [imageEffect] || [captionEffect]-[imageEffect] || [sameEffect]
    
    • mc-item--[captionEffect]: Effect that only happen to the Caption.
    • mc-item--[imageEffect]: Effect that only happen to the Image.
    • mc-item--[captionEffect]-[imageEffect]: Effect that happen to the Caption, and effect that happen to the Image.
    • mc-item--[sameEffect]: The same effect for those two.

    Example:

    <figure class="mc-item mc-item--slideInUp-zoomIn">
    	<!-- Caption [SlideInUp] and Image [ZoomIn] -->
    </figure>
  2. Let us see a demo of submitted effects in CodePen.

  3. The PR must aim to develop branch and not to master branch. The branch of the feature must be started as feature/[issue]-feature-name.

License

Mocassin.css is licensed under the MIT license.