matt-daniel-brown

<main>
	<section id="gallery-section">
  <ul>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
		</ul>

matt-daniel-brown

CSS Grid-Based Layout. Header/footer and many as will fit grid-template

A Pen by Matthew Daniel Brown on CodePen.

License.

matt-daniel-brown

header
	h1 (S)CSS Grid
	h2 Practice and fine-tuning

main#demo
	section#grid-demo-section
		ul.grid
			- for (var x = 0; x < 12; x++)
				li
					img(src="http://placehold.it/360", alt="img")

matt-daniel-brown

HTML & CSS - Study #1

HTML & CSS study based on: https://dribbble.com/shots/2262761-Mobile-Blog-App-Interface/attachments/424147

A Pen by Matthew Daniel Brown on CodePen.

License.

matt-daniel-brown

<div>
    <div class="search">
        <div class="bar">
            <div class="icon">
                <i></i>
            </div>
        </div>
        <form>
            <input type="text">
        </form>

matt-daniel-brown

<div class="container" id="app">

    <div class="col">

        <div class="box">
            <h3>Colors <small><span>Pro Tip</span>Edit Hex codes</small></h3>
            <div>

                <div class="demo-color">
                    <div class="preview">

matt-daniel-brown

<ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
  <li class="mdc-list-item">
    <span class="mdc-list-item__graphic material-icons" aria-hidden="true">face</span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">Item 1</span>
      <span class="mdc-list-item__secondary-text">Subtitle for item 1</span>
    </span>
    <span class="mdc-list-item__meta">10</span>
  </li>
  

matt-daniel-brown

<aside class="mdc-drawer mdc-drawer--dismissible mdc-drawer--open">
  <div class="mdc-drawer__header">
    <h3 class="mdc-drawer__title">Mail</h3>
    <h6 class="mdc-drawer__subtitle">[email protected]</h6>
  </div>
  <div class="mdc-drawer__content">
    <nav class="mdc-list"><a class="mdc-list-item mdc-list-item--activated" href="#" tabindex="0" aria-selected="true"><i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox</a><a class="mdc-list-item" href="#" tabindex="-1"><i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star</a>
      <a
        class="mdc-list-item" href="#" tabindex="-1"><i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>Sent Mail</a><a class="mdc-list-item" href="#" tabindex="-1"><i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>Drafts</a>
        <hr class="mdc-list-divider">

matt-daniel-brown

<header class="demo">
<!-- 	<h1>SCSS Button Styles and Mixins</h1> -->
	<h1>SCSS Buttons </h1>
	<p>{ Style & Mixins }</p>
	
</header>
<main id="demo">
	<section>
		<ul class="button-list">
			<li><button>Primary</button></li>

matt-daniel-brown

CSS Loading Animations

A Pen by Matthew Daniel Brown on CodePen.

License.