All posts by Ruhul Amin

About Ruhul Amin

Hello, This is Ruhul from Bangladesh living in Dhaka. Graduate from Bangladesh University. Currently, I'm working as Senior UX Engineer in Brain Station-23.

Bootstrap v4 final soon!

Bootstrap 4
Bootstrap 4

A great note from:

https://www.bootstrapdash.com/bootstrap-4-release-date/

“After Beta 3, we’re hoping to quickly move into a final v4 release. Ideally, it’ll also be a smoother and more focused release than the Alpha 6 to Beta 1 move. We heard from a lot of you that the delta between those two releases was too great.”

 

Advertisements

Use Bootstrap Grid system only

If you are ignoring Awesome Bootstarp framework for it’s huge CSS classes then it is really sad 😦 But anyway, I come up here with the most important part of Bootstarp which is GRID system. I separated only grid scss files and compile it with Compass. Now you can use Bootstrap grid only. I hope it will help you sometimes.

Bootstap_grid_system_only

You can continue compile with Compass…
How to compile SASS to CSS in Compass

How to create skeleton screen

“A skeleton screen is essentially a blank version of a page into which information is gradually loaded.”

Luke Wroblewski

A skeleton screen gives a visual cue that content is loading one after the other into each UI element area. It has been found that skeleton screens play a major role in the perception of users who appear to think that these are not as slow as spinners or progress bars. In fact, many users seem to love them for its look and feel. More power to Skeleton Screens.

The HTML






<div class="skeleton-screen"></div>





The CSS

.skeleton-screen:empty {
    margin: auto;
		width: 500px;
		height: 600px; /* change height to see repeat-y behavior */
    
		background-image:
			radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
			linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 );

		background-repeat: repeat-y;

		background-size:
			100px 200px, /* circle */
			50px 200px, /* highlight */
			150px 200px,
			350px 200px,
			300px 200px,
			250px 200px;

		background-position:
			0 0, /* circle */
			0 0, /* highlight */
			120px 0,
			120px 40px,
			120px 80px,
			120px 120px;

		animation: shine 1s infinite;
	}

	@keyframes shine {
		to {
			background-position:
				0 0,
				100% 0, /* move highlight to right */
				120px 0,
				120px 40px,
				120px 80px,
				120px 120px;
		}
	}