peterramsing / lost Goto Github PK

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);
        }
    }
}

This would get rid of the extra markup but break masonry.

Users would have to set cycle for every batch of elements.

Worth?

Was kinda handy

• edit
• cf
• center
• align
• block
• offset
• move
• masonry-row

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.?

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

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

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!

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.

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

To create layouts like:

1 3
2 4

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

Do you still need to support Sass 3.2?

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

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

Looks like Safari 8+ is expecting the following:

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

Was just too fresh

Run extensive tests to see how fluid it feels

closingtag/calc-polyfill#10

Users should be able to override settings on a per-project basis.

#11 (comment)

Just as clearing mechanisms.

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

$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.

Thing is getting prrrretty bulky. X_X

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

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.

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.

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.

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

For row boxes anyway

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

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.

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

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

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.

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.

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