Skip to content

Instantly share code, notes, and snippets.

@andresgalante

andresgalante/test.html

Created March 22, 2018 17:31
Show Gist options
  • Save andresgalante/2e64b2edf5e3df8a81f4caf909fdbfa9 to your computer and use it in GitHub Desktop.
Save andresgalante/2e64b2edf5e3df8a81f4caf909fdbfa9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="container">
<section>
<article>Box 1</article>
<article>Box 2</article>
<article>Box 3</article>
<article>Box 4</article>
</section>
</div>
</body>
</html>
<div class="pf-l-page">
<div class="pf-l-page__header">
<div class="pf-l-page__header-left">
<div class="pf-c-brand"></div>
<div class="pf-c-context-selector"></div>
</div>
<!-- pf-l-page__header-left -->
<div class="pf-l-page__header-right">
<div class="pf-l-toolbar">
<div class="pf-l-toolbar-group">
component component component
</div>
<div class="pf-l-toolbar-group">
component component component
</div>
</div>
<!-- ends pf-l-toolbar -->
<div class="pf-c-secondary-nav"></div>
</div>
<!-- ends header right -->
</div>
<!-- ends header -->
<div class="pf-l-page__sidebar">
<div class="pf-c-main-nav"></div>
</div>
<!-- pf-l-page__sidebar -->
<main class="pf-l-page__main">
<div class="pf-c-main-header">
<div class="pf-l-tollbar">
input group 2 btn
drop menu
</div>
</div>
<ul class="pf-c-list">
<li class="pf-c-list__item">
<div class="pf-c-list__header">
<div class="pf-l-split">
<div class="pf-l-split__secondary">
>
</div>
<div class="pf-l-split__main">
<div class="pf-c-generic-something">
<h3 class="pf-c-generic-something__title">Title</h3>
<p class="pf-c-generic-something__description">Desc</p>
</div>
</div>
<div class="pf-l-split__secondary">
<div class="pf-l-toolbar"></div>
</div>
</div><!-- pf-l-split -->
</div><!-- pf-c-list__header -->
<div class="pf-c-list__body">
Content here
</div><!-- pf-c-list__body -->
</li><!-- ends item -->
</ul>
</main>
<!-- pf-l-page__main -->
</div>
pf-is-lg
pf-is-primary
<div class="pf-l-toolbar">
<div class="pf-l-toolbar-group">
components
</div>
<div class="pf-l-toolbar-group">
components
</div>
</div>
<div class="pf-l-page">
header 6fr
top left 1fr
top right 5fr
bottom left 1fr side-bar
bottom right 5fr main
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment