Code Monkey home page Code Monkey logo

lemonade's Introduction

Lemonade

Lemonade is a a simple, flexible and easy-to-customise grid system. It was created in order to give designers & developers a kickstart with their projects. It currently supports Chrome, Firefox, Safari, Opera & IE 9+, also supports major phone devices too.

Lemonade


Installation

Getting Started

Getting started couldn't be easier

First you need to link the stylesheets

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

lemonade.css is the main grid (which can be easily customised) styles.css is your base styles on top of your grid

Structuring your layouts

<div class="frame">
	<div class="bit-3">Content here</div>
	<div class="bit-3">Content here</div>
	<div class="bit-3">Content here</div>
</div>

Creating a three-column layout (for galleries for example) is really simple, this will scale down to 100% on mobile. Wrap the .bit's in a .frame class to clear the floats.

Customising your grid

Maybe you want to go old school and create a two-column layout, It's so easy all you need is basic math (along as the .bit- classes equal to 100%, it will be perfect).

<div class="frame">
	<div class="bit-75">Content here</div>
	<div class="bit-25">Content here</div>
</div>

Creating the css is also simple:

.bit-75 {width:75%;}
.bit-25 {width:25%;}

Support

If you have any questions or you're struggling with it, get in touch:

Tutorials

Build a Freshly Squeezed Responsive Grid System If you have written about Lemonade or want too - let me know

###Lets make Lemonade Currently building the real documentation website for Lemonade, If you've got any finished results of using Lemonade or you've got any kind words to say - get in touch

Thank you!

I've had some amazing feedback since creating Lemonade and I am glad it can help people.

Also want to thank people who are testing and contributing to the product.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.