Skip to content

thatgibbyguy/ply

Repository files navigation

ply

ply is a modernized, ratio based css framework built using flex-box. think of ply as the metric system for your grid-based layouts.

the purpose of ply is to provide front-end developers with an immediately understandable framework based on a ratio based grid system, versus arbitrary column based grid systems.

Using ply

You can use ply one of two ways:

Install via NPM

$ cd /your-app-path/
$ npm install plygrid --save

Install via Github

$ cd /your-app-path/
$ git clone https://github.com/thatgibbyguy/ply.git

ply versus foundation

An offset, three column layout in ply:

<section class="units-row">
    <div class="unit-25">
        <!-- A column of 25% width -->
    </div>
    <div class="unit-50">
        <!-- A column of 50% width -->
    </div>
    <div class="unit-25">
        <!-- A column of 25% width -->
    </div>
</section>

An offset, three column layout in foundation:

<div class="row">
    <div class="large-3 columns">
        <!-- A column of ~25% width -->
    </div>
    <div class="large-6 columns">
        <!-- A column of ~50% width -->
    </div>
    <div class="large-3 columns">
        <!-- A column of ~25% width -->
    </div>
</div>

Documentation

ply documentation is now live.

ply is a framework which aims to simplify the development process by allowing developers to think in rational, base-10, math versus arbitrary and ancient column based layouts.

built on top of flexbox, ply allows developers to ply their craft and focus on executing without worry about structure.

Version

ply v 0.8.0

  • added helper classes for most cases.

Tech

ply utilizes following technologies:

Linking ply in your document head

After cloning ply into your application, you will be able to link ply into your app by linking to it using the following code:

<link rel="stylesheet" type="text/css" href="/dist/css/ply.min.css">
<link rel="stylesheet" type="text/css" href="your-normal-css.css">

Importing ply this way will allow you to code CSS the way you always have, with ply providing you a base framework for your elements. Make sure that your css file(s) comes after the ply import so that your styles will extend ply functionality.

Using Gulp

ply comes with a predefined gulp file for you. To code continuously with gulp simply run:

$ npm install
$ gulp

This task will watch the file located at /src/scss/styles.scss. Each time you save this file, gulp will automatically compile, prefix and minify your code. This code is outputted to /dist/css/styles.css and /dist/css/styles.min.css.

To use these styles in your webapp, use the following code:

<link rel="stylesheet" type="text/css" href="/dist/css/styles.min.css">

Additional Gulp functions

Included with this gulp file are the following commands:

gulp styles gulp stylesMin gulp ply gulp plyMin

Each of these gulp commands will output to the /dist/css/ directory and you may use them as you see fit.

Development

Want to contribute? Great! Simply fork this repo and create a Pull Request with your added features!

Roadmap

  • Style all form elements
  • Add slideout rollover component seen on plygrid.com
  • Complete documentation

License

MIT

Special thanks to imperavi for creating the css framework I could only invision at the time and special thanks to dillinger.io for their awesome readme generator.