chalarangelo / mocka

Simple, elegant content placeholder

mocka

Simple, elegant content placeholder

npm install mocka-placeholder

Introduction

The mocka placeholder is a very simple content placeholder that you can use for your website or web application, while loading your page's content. It weighs very little (about 500 bytes minified and gzipped), is fully customizable and you can easily include it in your project's CSS file, by using the Sass mixin provided. Alternatively, you can copy its code and inline it in your HTML for even faster loading.

Usage

After loading the css, you can create a placeholder using the code provided below:

<div class="mocka-container">
  <span class="mocka-media"></span>
  <span class="mocka-heading"></span>
  <span class="mocka-text"></span>
</div>

Customization

Download the npm package, add the mixin to your project, then @import the file and @include the mixin, passing a single map as an argument. The map contains all the information needed to generate the classes from the mixin. You can find the map with the default values in the mocka.scss file.

License

Mocka is an open-source Sass/CSS component and is licensed under the MIT License.

mocka's Issues

Subheading top property doesn't apply

When I modify the subheading top property, it doesn't apply. Every other property has changed properly so far. I post my mocka-custom.scss file in case you need it.

$mocka: (
	prefix: 'mocka',
	container: (
    name: 'container',
    margin: 15px,
		width: 100%,
		height: 13rem,
		background: inherit,
    border-radius: 16px,
		border: 0
	),
	media: (
		name: 'media',
		top: 1.5rem,
		left: 2rem,
		width: 6rem,
		height: 6rem,
		border-radius: 50%
	),
	heading: (
		name: 'heading',
		top: 1.125rem,
		left: 10rem,
		width-base: 90%,
		width-offset: 5.5rem,
		height: 2rem,
		border-radius: 0
	),
	subheading: (
		top: 1.7rem,
		width: 85%,
		height: 0.875rem,
		border-radius: 0
	),
	text: (
		name: 'text',
		top: 7rem,
		left: 0.5rem,
		line1-width-base: 85%,
		line1-width-offset: 1rem,
		height: 1.2rem,
		line2-top: 2rem,
		line2-width-base: 120%,
		line2-width-offset: 1rem,
		line3-top: 4rem,
		line3-width-base: 90%,
		line3-width-offset: 0,
		border-radius: 15px
	),
	dots: (
		top: 3rem,
		height: 0.5rem,
		width: 0.5rem,
		space-around: 0.75rem,
		space-between: 0.5rem,
		border-radius: 1rem,
		background: rgba(0, 0, 0, .2)
	),
	animation: (
		name: 'dot',
		duration: 1.8s,
		timing-function: ease,
		iteration-count: infinite,
		dot1-y-offset: -0.3125rem,
		dot2-y-offset: -0.4375rem,
		dot3-y-offset: -0.3125rem
	),
	background: rgba(0, 0, 0, .06)
);
@import '../../node_modules/mocka-placeholder/src/mocka/mocka';
@include mocka($mocka);

Can i use it in normal html website?

Hello guys

I recently working on my website. its a simple html, css website. I want to use mocka placeholder. Let me know how i can use mocka.

Thank you