Phoenix Toolkit

CSS modularized toolkit for beautiful and simple websites.

Set up

CDN

<link rel="stylesheet" href="https://raw.githubusercontent.com/elenatorro/phoenix-toolkit/master/dist/src/phoenix-toolkit.min.css"/>

npm

npm install --save phoenix-toolkit

GitHub

git clone git@github.com:elenatorro/phoenix-toolkit.git
cd phoenix-toolkit
npm install & gulp

Features

6 Grid System

Enough for your needs.

Functional Syntax

Build templates faster.

Color Palette

Materialize Colors.

Responsive

Works on different screen sizes.

Clean

Reduce noise in your templates.

Spacing

Create balanced interfaces.

The Grid

.pk-1

.pk-5

.pk-2

.pk-4

.pk-3

.pk-2

.pk-4

.pk-2

.pk-5

.pk-1

.pk-2

.pk-1

Code

<section class="pk-grid">
 <section class="pk-row">
  <section class="pk-col pk-1">
    Column 1
  </section>
  <section class="pk-col pk-5">
    Column 5
  </section>
 </section>
</section>

Buttons

Rounded Buttons

Code

<button class="pk-btn pk-btn-s pk-btn-rnd pk-bg-blue300">
  Button
</button>

<button class="pk-btn pk-btn-m pk-btn-rnd pk-bg-blue300">
  Button
</button>

<button class="pk-btn pk-btn-l pk-btn-rnd pk-bg-blue300">
  Button
</button>

Squared Buttons

Code

<button class="pk-btn pk-btn-s pk-fill pk-bg-orange800">
  Button
</button>
<button class="pk-btn pk-btn-m pk-fill pk-bg-orange800">
  Button
</button>
<button class="pk-btn pk-btn-l pk-fill pk-bg-orange800">
  Button
</button>

Empty Buttons

Code

<button class="pk-btn pk-btn-s pk-btn-empty pk-bdr-green500 pk-f-green500">
  Button
</button>
<button class="pk-btn pk-btn-m pk-btn-empty pk-bdr-green500 pk-f-green500">
  Button
</button>
<button class="pk-btn pk-btn-l pk-btn-empty pk-bdr-green500 pk-f-green500">
  Button
</button>
<button class="pk-btn pk-btn-s pk-btn-empty pk-btn-rnd pk-bdr-green500 pk-f-green500">
  Button
</button>
<button class="pk-btn pk-btn-m pk-btn-empty pk-btn-rnd pk-bdr-green500 pk-f-green500">
  Button
</button>
<button class="pk-btn pk-btn-l pk-btn-empty pk-btn-rnd pk-bdr-green500 pk-f-green500">
  Button
</button>

Bordered Buttons

Code

<button class="pk-btn pk-btn-m pk-bg-teal600 pk-bdr-teal800 pk-bdr-l-l">
  Button
</button>
<button class="pk-btn pk-btn-m pk-bdr-l-l pk-bg-purple200 pk-bdr-purple700">
  Button
</button>
<button class="pk-btn pk-btn-m pk-bdr-l-r  pk-bg-green400 pk-bdr-green600">
  Button
</button>
<button class="pk-btn pk-btn-m pk-bdr-l-t pk-bg-amber500 pk-bdr-amber700">
  Button
</button>
<button class="pk-btn pk-btn-m pk-bdr-l-t pk-bdr-l-b pk-bg-red600 pk-bdr-red800">
  Button
</button>
<button class="pk-btn pk-btn-m pk-bdr-l-r  pk-bdr-l-l pk-bg-blue600 pk-bdr-blue900">
  Button
</button>
<button class="pk-btn pk-btn-m pk-bdr-l-r  pk-bdr-l-l pk-btn-rnd pk-bg-orange300 pk-bdr-orange600">
  Button
</button>
<button class="pk-btn pk-btn-m pk-bdr-l-t pk-bdr-l-b pk-btn-rnd pk-bg-pink500 pk-bdr-pink700">
  Button
</button>

Color Palette

Code

<section class="pk-grid">
    <section class="pk-col pk-1">
       <section class="pk-bg-blue900">blue900</section>
       <section class="pk-bg-pink200">pink200</section>
       <section class="pk-bg-red100">red100</section>
       <section class="pk-bg-yellow700">yellow700</section>
       <section class="pk-bg-teal300">teal300</section>
       <section class="pk-bg-purpleA700">purpleA700</section>
    </section>
  </section>

Tables

Month	Savings
Sum	$180
January	$100
February	$80

Month	Savings
Sum	$180
January	$100
February	$80

Month	Savings
Sum	$180
January	$100
February	$80

Code

<section class="pk-col-tbl">
  <table class="pk-tbl">
    <thead class="pk-f-blue700">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
    </thead>
    <tfoot class="pk-f-blue600">
      <tr>
        <td>Sum</td>
        <td>$180</td>
      </tr>
    </tfoot>
    <tbody class="pk-f-blue700">
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </tbody>
  </table>
</section>

Navigation Bar

Code

<section class="pk-grid">
  <nav class="pk-row pk-nav pk-bg-blue400">
    <ul class="pk-nav-link-list pk-col pk-col-row pk-6">
      <li><a class="pk-nav-link pk-bg-hv-orange700" href="#">Link 1</a></li>
      <li><a class="pk-nav-link pk-bg-hv-orange700" href="#">Link 2</a></li>
      <li><a class="pk-nav-link pk-bg-hv-orange700" href="#">Link 3</a></li>
      <li><a class="pk-nav-link pk-bg-hv-orange700" href="#">Link 4</a></li>
      <li><a class="pk-nav-link pk-bg-hv-orange700" href="#">Link 5</a></li>
    </ul>
  </nav>
</section>

Forms

Code

<form class="pk-form pk-inl pk-pdd-m-all">
  <section class="pk-form-group-inl">
    <label class="pk-lbl pk-inl pk-w20 pk-f-blue600">Name</label>
    <input type="text" class="pk-input pk-inl pk-w80 pk-bdr-blue600" placeholder="Write your name">
  </section>
  <section class="pk-form-group-inl">
    <label class="pk-lbl pk-inl pk-w20 pk-f-blue600">Password</label>
    <input type="password" class="pk-input pk-inl pk-w80 pk-bdr-blue600" placeholder="Write your password">
  </section>
  <section class="pk-form-group-inl pk-sbmt-r">
    <input type="submit" class="pk-btn pk-btn-m pk-sbmt-button pk-w30 pk-bg-blue300 pk-bdr-blue600" value="Init Session" />
  </section>
</form>

Code

<form class="pk-form pk-pdd-m-all">
  <label class="pk-lbl pk-f-blue800">Textarea</label>
  <textarea class="pk-txtarea pk-w100 pk-bdr-s-b pk-bdr-blue300" placeholder="Write here..."></textarea>
  <button class="pk-btn pk-sbmt-button pk-btn-rnd pk-bg-blue800 pk-f-white pk-btn-l pk-w50 pk-pdd-s-all pk-mg-s-tb">Send</button>
</form>

Code

<form class="pk-form pk-inl pk-pdd-l-all pk-bg-blue300">
  <section class="pk-form-group pk-w80">
    <label class="pk-lbl">Social Network</label>
    <section class="pk-slct-arrow pk-f-white"></section>
    <select class="pk-slct pk-bg-blue600 pk-f-white">
      <option value="twitter">Twitter</option>
      <option value="facebook">Facebook</option>
      <option value="linkedin">LinkedIn</option>
      <option value="github">GitHub</option>
     </select>
  </section>
</form>

Code

<form class="pk-form pk-inl pk-pdd-m-all pk-bg-blue100">
  <section class="pk-form-group-inl pk-pdd-m-all">
    <label class="pk-lbl pk-inl pk-w20">Search</label>
    <input type="text" class="pk-input pk-inl pk-w50 pk-bdr-blue600" placeholder="Example: Elena">
    <button class="pk-form-btn pk-inl pk-w30 pk-bg-blue300 pk-bdr-blue600 pk-form-group-inl-right">Click</button>
  </section>
  <section class="pk-form-group-inl pk-pdd-m-all">
    <button class="pk-form-btn pk-inl pk-w20 pk-bdr-blue800 pk-bg-blue400 pk-form-group-inl-left"> Search </button>
    <input type="text" class="pk-input pk-inl pk-w80 pk-bdr-s-b pk-bdr-blue800 pk-bg-blue200">
  </section>
  <section class="pk-form-group pk-pdd-m-all pk-w100">
    <label class="pk-lbl pk-f-blue900">Search</label>
    <input type="email" class="pk-input pk-bdr-s-b pk-bdr-blue900 pk-w100" placeholder="hello, world...">
  </section>
</form>

Glossary

Sides & Positions

top	t
right	r
left	l
left + right	lr
top + bottom	tb
top + bottom	all
center	c

Sizes

small	s
medium	m
large	l

Properties

border	bdr
background	bg
color	f
margin	mg
padding	pdd

Classes

Buttons

<button class="pk-btn"></button>

<button class="pk-btn pk-btn-rnd"></button>

<button class="pk-btn pk-btn-empty"></button>

<button class="pk-btn pk-btn-s"></button>

<button class="pk-btn pk-btn-m"></button>

<button class="pk-btn pk-btn-l"></button>

Code

<pre class="pk-pre"><code></code></pre>

Form

<form class="pk-form"></form>

<input class="pk-input"/>

<textarea class="pk-txtarea"></textarea>

<label class="pk-lbl"></label>

<section class="pk-form-group">Label + input group</section>

<section class="pk-form-group-inl">Label + input group inline</section>

<button class="pk-btn pk-form-btn"></button>

<button type="submit" class="pk-btn pk-sbmt-r">Right Submit Button</button>

<button type="submit" class="pk-btn pk-sbmt-l">Left Submit Button</button>

<div class="pk-slct-arrow"></div><select class="pk-slct"></select>

Grid

<section class="pk-grid"></section>

<section class="pk-row"></section>

<section class="pk-col"></section>

<section class="pk-col pk-1"></section>

<section class="pk-col pk-2"></section>

<section class="pk-col pk-3"></section>

<section class="pk-col pk-4"></section>

<section class="pk-col pk-5"></section>

<section class="pk-col pk-6"></section>

<section class="pk-col-row"></section>

<section class="pk-col-row"></section>

<section class="pk-w10"></section>

<section class="pk-w20"></section>

<section class="pk-w30"></section>

<section class="pk-w40"></section>

<section class="pk-w50"></section>

<section class="pk-w60"></section>

<section class="pk-w70"></section>

<section class="pk-w80"></section>

<section class="pk-w90"></section>

<section class="pk-w100"></section>

<section class="pk-centered"></section>

Links

<a href="#" class="pk-link"></a>

Navigation Bars

<nav class="pk-nav"></nav>

<ul class="pk-nav-link-list"></ul>

<ul class="pk-nav-link-list pk-nav-link-list-l"></ul>

<ul class="pk-nav-link-list pk-nav-link-list-r"></ul>

<a class="pk-nav-link"></a>

Tables

<section class="pk-col-tbl"></section>

<table class="pk-tbl"></table>