at-import / singularity Goto Github PK

While probably not a blocker for a 1.0 release, we seriously need to update the documentation for Singularity as it can do so frickin much right now that I don't even think I know all of the nooks and crannies of the system. At the least for the 1.0 release, we need to document Grid Output API and then work on a cleanup.

The website is falling a bit out of date thanks to rapid development cycle we have and it needs to be updated.

This was an issue that @canarymason brought up to me on Twitter that I believe I've tracked down and solved. column-span currently doesn't take $gutter as an input variable, and as such, grid-span function doesn't pass the one it takes in, and as such custom gutters don't currently work. I'm going to do some more Q/A on this, but I do believe this is solved.

What is the purpose of specifying padding as part of the grid definition? Is was my assumption that that's what the gutters were for, and if additional padding was needed, a per-element padding would be added. Is it to help with calculations of widths? If so, thoughts on using border-box and not having this issue? Just a little confused as to the thinking here.

I'm experiencing a weird column alignment issue on a very simple 12 column grid.

.grid {
@include grid-objects(a, 12, 2%, $selector: ".");
}

a3-6 and a6-9 are aligned further to the right than they should be. they go off the proposed grid, because the margin-left calculation appears to be off.

It seems as if the background-grid mixin isn't so smart, especially with non-uniform grids, and we should come up with a better mixin for this.

If the display: inline-table; stuff in #28 doesn’t flex nicely look into this method to reduce rounding errors by @JohnAlbin in zen grids: http://palantir.net/blog/responsive-design-s-dirty-little-secret

Optimize styles written by mixins. Consolidate general styles to make file size tiny.

I'm diving into this and gridset this week, and the feature both are lacking (or maybe I'm missing it) is what I'm calling recursive contexts. I've got a layout with a main content section, and a sidebar section. I want to subdivide the main section and align nested elements in there to an overall grid. This is done in even grids like susy by setting the 'context' of the nested elements. I think singularity needs that concept as well.

Here's an illustration for clarity.

Got this on paper in my notebook, for writing grids like this:

Check out inline-table on columns. They might be more flexible and widths calculated with fewer rounding errors. Also no need for floats. Another advantage is that all elements in a row will be equal height, no need to clear anything in new columns. Trivial to center-align content by must using display: table-cell;.

Watch out for white space messing with layout as inline elements tend to have stray spaces.

CSS grid layout is going to nullify most grid frameworks in the coming years. Might as well start honoring the syntax here.

Reference: http://dev.w3.org/csswg/css3-grid-layout/#repeating-columns-and-rows

Could potentially almost polyfil most functionality using display: table-cell but that will be incredibly difficult and problematic.

Im getting this error while compiling using the latest version (singularitygs 0.0.13):

error main.scss (Line 34 of _singularitygs.scss: File to import not found or unreadable: singularitygs/helpers.
Load paths:
/Users/luismartins/Sites/LAB/singularity/css-src
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-rgbapng-0.1.1/lib/stylesheets
/Library/Ruby/Gems/1.8/gems/bootstrap-sass-2.1.0.0/vendor/assets/stylesheets
/Library/Ruby/Gems/1.8/gems/sassy-math-1.2/stylesheets
/Library/Ruby/Gems/1.8/gems/modular-scale-1.0.2/stylesheets
/Library/Ruby/Gems/1.8/gems/breakpoint-1.3/stylesheets
/Library/Ruby/Gems/1.8/gems/singularitygs-0.0.13/stylesheets
Compass::SpriteImporter)
overwrite main.css

Create a gem for Compass

I know this is a little premature, but I can see that the complexity of Singularity is starting to affect compile performance, so we should probably rewrite this in Ruby. This is most definitely blocked on sass/sass#310

Not a bug, just a question.
When you have something like, for instance:

How can you apply the grid-span at once for the three elements?
If I try @include grid-span(1); so that each article span one column i get the following error:

error main.scss (Line 140: Mixin grid-span is missing argument $location.)

I know what location is, but to explicitly apply it i would need to target each article individually which is not the goal here.

Just wanted to know if theres anyway to do this.

This is an exciting project and thank you for sharing it.

Started this in the branch for issue #32 and what we need is an API to plug in different styles of grids. CSS is evolving with better tools to create grids. Making a way to expand and evolve output with those features is just as important as the API for creating different kinds of grids.

In trying to test for IE I found that the grid-span call inside of test-grid was failing saying there was no margin or padding value. Also using transparent backgrounds for the test-grid does not work for most IE. Need to update that to a solid color fallback.

Write docs showing how to use the grid and everything included in it.

I just ran into this issue when trying to create a test example. In our Examples config.rb file, it's loading Scott's local Singularity framework which no one else is going to have. I think we need to clean this up so that all of our examples are loading off of the stylesheets dir that we have in the branch, specifically:

@import '../../stylesheets/singularitygs';

This will make it so that any of us can run and build examples easily, off of our own boxes, and off of the current version of singularity in the branch we're on.

Just ran into this issue, working on a fix.

Add defaults for padding as well as support for padding in multi dimensional lists.

Equal padding on all columns:

$padding: 2%

Override padding on specific columns, This results in 2% padding on the second column:

$columns: 1, 1 2%, 1

Compound grids and scales are just functions that plug into Singularity column lists. These should be broken out into a folder and documented.

This will allow functionality to grow as well as community developed extensions to Singularity and pull requests.

Most designs that I'm aware of don't but up right against the edges of the screen and instead have some sort of edge gutter, but singularity doesn't have this concept. Thoughts on adding it in?

Above

Like @canarymason had suggested, it would be awesome to have a simple way of creating ratio based grids, and I think Singularity is basically all set up to do this already, sans the actual math behind it (which I think I've figured out!)

Singularity currently supports floating point grid items as well as integers, and we'd need these in order to effectively create ratio grids. The syntax for ratio would be fairly simple as I see it:

ratio($ratio, $steps, $order: 'increase')

I'm currently experimenting to see if my math is right, and if it is, and you're interested in including it, happy to post it here/issue a pull request.

With the traditional Float style output, we now need to include a way to pull/push columns.

Create a mixin to write the grid as a gradient to the elements background.

We need to be able to push/pull around the grid.

There seem to be rounding errors.

I have a 5 column grid with 188px each column and 10px gutter width, which sums up to 188 * 5 = 940px + 40px gutters = 980px.
Singularity calculates the gutters like so: 10px, 11px, 11px, 13px and the columns are all only 187px wide.

here is the scss file

@import "compass/reset";
@import "compass";
@import "singularitygs";


$columns:   188px 188px 188px 188px 188px;
$gutter:    10px;
$color:     #888;
$padding:   20px;

@include grid-objects(a, $columns, $gutter, $padding, $selector:".");

.wrapper
{
    max-width:980px;
    height:100%;
    margin:0 auto;
    background:green;
}

.foo 
{
    background:$color;
    padding-top:$padding;
    padding-bottom:$padding;
}

and the html code

<html>
    <head>
        <title>Grid test page</title>
        <link href="stylesheets/screen.css" rel="stylesheet">
    </head>
    <body>
        <section class="wrapper">
            <section class="foo a0-1">
                bla
            </section>
            <section class="foo a1-2">
                bla
            </section>
            <section class="foo a2-3">
                bla
            </section>
            <section class="foo a3-4">
                bla
            </section>
            <section class="foo a4-5">
                bla
            </section>
        </section>
    </body>
</html>

Unlike Susy, Singularity doesn't seem to have a container mixin (at least not one I could see). Interested in adding one in? It also may make doing things like having adjustable grid layouts at different breakpoints more feasible.

objects and mixins use different language for how they fit on the grid. I have no idea what I was smoking when making that happen but extendable classes/% need to follow the same naming conventions as mixins.

Compound grid math above 2 grids isn’t very accurate yet. Needs work.

Create a mixin to generate class based or silent objects for every position on the grid.

Currently the functions treat all values as numbers. Pixels can be used for columns but they aren’t given special treatment.

Some features would be easier ability to implement photoshop pixel based designs and pixel based gutters would be added to the context instead of subtracted.

This also adds complexity to the code. This framework is designed for designing in the browser and I don’t see the value in adding support for this.

On the fence about this. If you want it, convince me.

background grid still requires % gutters.

Singularity can do a lot, a hell of a lot witch introduces a learning curve to new users. We need to identify a standard use case to recommend and present as the way to do things. Of coarse other stuff should be documented but holding one thing up will give people one point of introduction.

Yeah, Singularity is all ratio based but people often think in percents. Might as well support it

Added conversion here: https://github.com/scottkellum/Singularity/blob/7f5c29c5049402d41757d30e6a27a981d5a112c0/stylesheets/singularitygs/_gutter.scss#L2-20

As Above

Any reason why $grids is not an appropriate variable? Short, simple, easily typed and simply the plural of $grid.

Also distancing Singularity from gridset might be a good idea. Not that we should go out of our way to do so but this is an easy area to avoid confusion.

A bit far off, but the ability to have different grids at different breakpoints would be awesome. We're going to need to think long and hard about the DX for this though.

Lots of testing needed, especially in IE. Probably not too many issues but should test.

Not as bad as the last one, but will take a few tweaks to work. Might be a good place for the SassyMath rand function to build a silent hash selector to extend upon.

sass/sass#456 (comment)

Before 1.0, any features like vertical rhythm, vertical grid (+ modular grid), skewed grids … ?

Compass background mixin needs to be added back in. Audit what else might need to be imported as well.

The column/gutter/padding finder in grid-span needs to be reusable. Do it.

Gridpak uses borders and border-box to allow for fixed-width gutters. Look into using it in singularity.

z-index errors on Chrome for Android.

Is it possible to run Singularity just using SASS, without Compass?

NOTE: Slight rounding errors happen in gutter calculations causing a slight offset to the overall column width. Different than browser rounding errors which almost every grid system has, these only effect gutters and the larger the gutters, the higher the probability the errors will be noticeable.
— Scott

If I've got a setup as follows:

$columns: 8, 4, 3;

and I want something to span the whole width, I should be able to do something like this:

#foo {
  @include grid-span(3, 1)

which does give me it spanning the full 3 columns, but also adds in the $gutter to the side. I know this something that susy solves by having a full row be clear: both, but we either need to realize that should be full width and do it, or we need to explicitly define how to do a full width in the docs.