peterramsing / lost Goto Github PK

View Code? Open in Web Editor NEW

4.5K 111.0 177.0 1.71 MB

LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.

Home Page: http://lostgrid.org

License: MIT License

JavaScript 58.37% Shell 0.06% TypeScript 41.57%

grid postcss javascript css

lost's Introduction

LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.

If you have any questions, comments, or concerns please feel free to open an issue. You're also welcome to tweet @LostGrid if an issue seems too formal.

Getting Started

LostGrid makes use of calc() to create stunning grids based on fractions you define without having to pass a lot of options.

Read the docs on LostGrid.org!

Browser Support

LostGrid relies on calc() to create the grid. Thus, LostGrid is limited to browsers that support calc(). The great thing is that calc() is widely supported in all current browsers and the LostGrid usage of calc() is supported as far back as IE9+.
If using LostGrid in flexbox mode browser support is limited to IE 10+.
Calc browser support
Flexbox browser support

Official Support

LostGrid is tested in the following browsers for compatibility
- IE10+ (IE9 has the same calc() support as IE10 except for background position which LostGrid doesn't affect)
- Evergreen Browsers (as they update automatically, tests are performed on the latest version of the following browsers)
  - Chrome
    - Chrome Canary + Chromium as well
  - Opera
  - Firefox
    - FirefoxDeveloperEdition as well
  - Edge
- Safari 9+
Automated browser testing with Selenium is coming soon. 👍

LostGrid Team

Peter Ramsing - Maintainer
Steve Holland - Maintainer
Jay Pick - LostGrid Website
You!

Thanks

Cory Simmons for creating this grid!
Alex Bass for being available to bounce ideas off of.
Maria Keller for the amazing logo. Be sure to hire her for all your design and motion graphic needs.
Everyone who files an Issue when something isn't working as expected.
Everyone who has contributed.

lost's People

Stargazers

Watchers

Forkers

vadimazzz umarmughal artlantis kublaj volutionmi skisliy glivera ampersandhq benjaminb10 outmost abstracthat alaev eduardosainz alexyans dmitrykiselyov imrefazekas dedaluz me4mike janusnic sameersemna subpixelch fredericksilva thedeeno razvancosmeanu jtrascap dezwilliams hmps sgtiria owlookit kezzbracey iest thram alimalibaev dinubs kuslahne killerdesigner agtlucas trashsydowdev nw marknewcomb1 wizrd michaelwiss jobsboris27 greyhwndz willjhaggard jeff-swearingen jeblister jeffjewiss radoslavmiladinov cloud4bpm kk9599 redrum1900 doomietrue perjohansson innakutsik ateszdn ilovezy markristjans maheshbabu jkoech zgreen bpetrieux leroidejesa otouc waltercassiano rolka pygy poxrud pkdevboxy margreetnannenberg gzentkovich chrisemoulton carlosmtzdev hudochenkov svitlanashepitsena intfrr radunanescu redgang kathcue jmarceli schelmo dotnetcarpenter bigredsquare he11yeah t--o gitter-badger zhanglingkang spid69 nathania isnan909 ronal2do onlywei mdings cmpereirasi sparefoot rexmac laxiston talo242 lcoutinho grodrigues

lost's Issues

Add testing

Preferably image-diff since Sass and Stylus will always fail at matching percentage values since they have different specificity on floats.

Test nested columns with old syntax

Change syntax from block() to column(), row(), and waffle()

This would be an easy change. I'm hoping to get some community feedback though.

Basically the change would be changing code like this:

.foo
  block('1/3', column)
  @media (min-width: 800px)
    block('1/2')
  @media (min-width: 1100px)
    block('1/3', both)

...to code like this:

.foo
  row('1/3')
  @media (min-width: 800px)
    column('1/2')
  @media (min-width: 1100px)
    waffle('1/3')

Personally I think it looks better and is more readable, but I want to get community feedback. Obviously this would be a major version bump up to 5.0.0.

Consider changing $cycle name

$cycle doesn't just control things looping to the next row anymore. It's sometimes part of the math involved.

Maybe something esoteric like Neat's $omega, or something descriptive like $ipr ("items per row").

Open to ideas on this, but I'd really like to move away from $cycle.

Fix $output so [class*="col-"]:nth-child(1n + 1) doesn't clear: both

What are the basic requirements to make this grid system work on IE8? Would it be enough to add Respond, html5shiv, and a calc-polyfill? I know that the align() mixin won't work, but that's ok, I just wonder if the main grid can be used with the simple addition of calc-polyfill? I have used selectivizr in the past but usually doesn't work very well when you combine it with respond, expecially in a complex layout.

Consider SassDoc comments

Update "Node Usage" to reflect string requirement.

Looks great man, just noticed the one typo. Trying out 3.0 today!

Nesting doesn't work in IE8

closingtag/calc-polyfill#10

Reduce fractions to lowest to minimize $items interaction

http://www.dummies.com/how-to/content/how-to-reduce-a-fraction-to-its-lowest-terms.html

Add cycle() and uncycle() mixins

Just as clearing mechanisms.

Update align so it mimics flexbox alignment

move() is broken, remove it

Make align() use older syntax

Add Flexbox support to align()

Uneven width elements don't compute to the correct size

Uneven width elements are the bane of this grid's existence in it's current state.

Problems

they need context (you have to define how many elements are on the row)
they don't compute to the exact right size

Align mixin in Safari not aligning vertically

Looks like Safari 8+ is expecting the following:

display:-webkit-flex;
-webkit-align-items: center;

[gh-pages] Remove margin-top on centered element (4th demo area)

It's causing it to not be vertically centered, so it looks a little funny. Just a reminder for you 😄

Horizontal Scroll on Chrome Mobile

I am getting horizontal scrolling on Chrome mobile. Here is my styl file:

@import 'lost'
html
     overflow-x hidden
section
    row()
    article
        cycle(3)
        column(1/3)

Here is my html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template</title>
    <link href="css/styles.css" rel="stylesheet">
  </head>
  <body>
    <section>
      <article>
        1
      </article>
      <article>
        2
      </article>
      <article>
        3
      </article>
      <article>
        4
      </article>
      <article>
        5
      </article>
      <article>
        6
      </article>
    </section>
  </body>
</html>

Is this a bug or am I missing somthing?

Thanks

Remove output normal on offsets

Lost with several CSS files

Hi,

I use lost in several CSS files (using Gulp). In this context, the following code is written in each file:

.container {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
}
.row {
  *zoom: 1;
  margin-left: -15px;
  margin-right: -15px;
}
.row:before,
.row:after {
  content: '';
  display: table;
}
.row:after {
  clear: both;
}
.container {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
}
.row {
  *zoom: 1;
  margin-left: -15px;
  margin-right: -15px;
}
.row:before,
.row:after {
  content: '';
  display: table;
}
.row:after {
  clear: both;
}

Would it be possible to have an option to write or not this part of the code (or another solution...)? In order to write only this code in one file.

Thanks

Consider converting to Jeet syntax

Was just too fresh

Use clearfix instead of overflow: hidden

For row boxes anyway

Update demo code to reflect new syntax

Add $cycle for columns

To create layouts like:

1 3
2 4

Reflect importance of $ipr in docs

The link to your example scss codepen uses center instead of container

When following along, I kept running into 'center not found' errors. Upon inspection I found that your codepen has "@include center($pad: 30px, $mw: 800px);" while the .scss lib has replaced that with container.

@align mixin wrong direction parameter ($dir vs $direction)

Zero gutter break block(column) layout

When you set block(... $gut:0) it breaks columns
http://codepen.io/mhotovec/pen/dPLpar

Consider including implicitly

No sense in making Stylus users write @import 'lost'.

Port to LESS

$output's output is somewhat gross for CSS classes

Adds a lot of ugly stuff and doesn't seem to work on various devices. col-6 works fine, but something like col-sm-6 breaks.

IE subpixel rounding breaks everything

Seriously, I hate this browser more and more every day.

If anyone is interested

First of all, I love this calc based grid. Good job Cory.
Second, If anyone is interested I have built a fully responsive 12 col grid system with 4 MQ breaks using Corys' code. I could share what I have done and maybe get some help to perfect it... My initial tests have shown that it works great.

Remove support for $old

With calc polyfill this works for ie8. IE9+ w/o. I don't think there's a need for old syntax - ever.

Setup Documentation

Hey Cory, first off i just want to say that I am extremely excited about this grid and can't wait to try it out. I think it will really add to the projects that I am currently working on. Now,excitement aside I cannot seem to get your grid working and would really love if you could create a step by step guide on how to setup the lost grid.

Thanks so much, Mooror

Add ToC to README

Thing is getting prrrretty bulky. X_X

$rtl variable is right-to-left when false

Using the SCSS version, I made a test using the sample code provided in the README:

<section>
  <figure>1</figure>
  <figure>2</figure>
  <figure>3</figure>
  <figure>4</figure>
</section>

section {
  @include cf;
}

figure {
  @include block('1/2');
}

However, it seems that right-to-left mode is the default. The list of numbers displays as: "2, 1, 4, 3" by default. When $rtl is set to true, it displays the way I would expect it to if $rtl was false: "1, 2, 3, 4". Either I've overlooked something or there is a faulty $rtl conditional in the code.

Full page width?

How to achieve full page width? (100%)
Currently pages look like this (default settings)(Notice those blue margins)

Namespacing!

Great project, Cory, but I strongly, strongly suggest that you namespace your mixins (and functions, if applicable). Names such as edit, center, block, etc. are very general and there is a high likelihood that this could cause naming collisions with mixins/functions in other projects.

Perhaps something like lost-block, lost-center, etc.?

Consider converting row to box

Run extensive tests to see how fluid it feels

Lost with Gulp

Hi,

I tried to use lost with Gulp but it does not work with this syntax: .pipe(stylus({use: [rupture(), lost()]}))

I solved the problem by using the code of "rupture" (index.js). Or should I write differently?

Thank you for this excellent project!

Fix move() formula

I couldn't figure out the new formula for move() and I didn't want to halt shipping 3.0.0 until it was done, so I shipped without it.

This needs added back in pretty badly and I'm sure it can be based off of one of the width or margin-left (from offset()) formulas: https://github.com/corysimmons/lost/blob/master/stylus/lost.styl

Would love some help on this if anyone is handy.

add optional parameter to enable/disable initialization

It would be nice if there was a parameter to enable/disable the initalization of the columns, this would decrease a lot the size of the stylesheet, expecially if you're trying to generate a custom grid (similar to bootstrap). See the example below, where the @include column($init: true); would simply output float and margins, the for loop would only output the width.

[class*="col-"] {  // init
    @include column($init: true);
}
@for $i from 1 through 12 {
    .col-#{$i} { 
        @include column(#{$i}/12, $init: false);
    }
}
@include media-query(min-width: 380px) {
    @for $i from 1 through 12 {
        .col-xs-#{$i} { 
            @include column(#{$i}/12, $init: false);
         }
    }
}
@include media-query(min-width: 480px) {
    @for $i from 1 through 12 {
        .col-md-#{$i} { 
            @include column(#{$i}/12, $init: false);
        }
    }
}