hatemhosny

Flat Preloader (keyframes demo)

Tried to improve Jack Rimell's demo code at http://jackrimell.co.uk/how-to-create-flat-preloaders-in-css-using-keyframes-part-one/.

*Note to self, do this with 1 element using box-shadows.

A Pen by Codrin Pavel on CodePen.

License.

hatemhosny

<button id="toggle">toggle</button>

<svg 
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 250 250" class="svg">
   <path id="gear" d="M78.70226,123.79905c-0.26775,25.2445,20.35263,45.59713,45.59712,45.86488c24.95867,0,45.86489-20.62038,45.86489-45.59714
	c0-24.95865-20.62401-45.31128-45.59713-45.5935C99.32265,78.22001,78.70226,98.57264,78.70226,123.79905z M151.43623,2.77236
	c1.0891,8.40879,2.44594,16.54985,3.5314,24.6909c0,0.82136,0,1.35684,0.27138,2.17819
	c0.81772,2.71368,14.38614,7.31972,16.8176,5.42737c5.96286-4.33827,11.94383-8.68017,17.63895-13.30067
	c2.17819-1.89235,3.80278-1.35684,5.69513,0c13.03291,8.9624,23.88765,20.08488,32.83195,33.0997
	c1.35684,1.89597,1.35684,3.25281,0,5.15963c-4.60603,5.69511-8.95877,11.94382-13.29706,17.63895

hatemhosny

import { v4 } from 'uuid';

document.body.innerHTML = v4();

hatemhosny

Bootstrap Button Mixin

This SCSS mixin makes it easy to make bootstrap buttons by passing in only one color.

A Pen by Andrew on CodePen.

License.

hatemhosny

Bootstrap Button Mixin

This SCSS mixin makes it easy to make bootstrap buttons by passing in only one color.

A Pen by Andrew on CodePen.

License.

hatemhosny

Auto Custom Bootstrap Buttons

Automatically creates button classes with your custom styles for bootstrap via SCSS.

A Pen by Chris Johnson on CodePen.

License.

hatemhosny

Bootstrap tab panel example

This works on html 5 supported browsers.

A Pen by weiss on CodePen.

License.

hatemhosny

<!-- Overlay for fixed sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-default open" role="navigation">
    <!-- Sidebar header -->
    <div class="sidebar-header header-cover" style="background-image: url(https://2.bp.blogspot.com/-2RewSLZUzRg/U-9o6SD4M6I/AAAAAAAADIE/voax99AbRx0/s1600/14%2B-%2B1%2B%281%29.jpg);">
        <!-- Top bar -->
        <div class="top-bar"></div>
        <!-- Sidebar toggle button -->

hatemhosny

<div class="calculator">
  <p>FreeCodeCalc</p>
  <div class="calc-row">
    <div class="screen">0123456789</div>
  </div>
  
  <div class="calc-row">
    <div class="button">C</div><div class="button">CE</div><div class="button backspace">back</div><div class="button plus-minus">+/-</div><div class="button">%</div>
  </div>
  

hatemhosny

Apple's Calculator

An html/css version of Apple's Calculator. Fonts are guessed.

Calculator logic done using Angular.js

A Pen by Sarah Frisk on CodePen.

License.