at-import / singularity Goto Github PK
View Code? Open in Web Editor NEWGrids without limits
License: MIT License
Grids without limits
License: MIT License
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.
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.
As Above
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.
z-index errors on Chrome for Android.
Compass background mixin needs to be added back in. Audit what else might need to be imported as well.
Compound grid math above 2 grids isn’t very accurate yet. Needs work.
The column/gutter/padding finder in grid-span needs to be reusable. Do it.
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.
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.
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.
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
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.
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.
Gridpak uses borders and border-box to allow for fixed-width gutters. Look into using it in singularity.
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.
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
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.
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.
Above
Is it possible to run Singularity just using SASS, without Compass?
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>
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?
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.
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.
The website is falling a bit out of date thanks to rapid development cycle we have and it needs to be updated.
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.
Create a mixin to generate class based or silent objects for every position on the grid.
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.
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.
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.
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
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.
Before 1.0, any features like vertical rhythm, vertical grid (+ modular grid), skewed grids … ?
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.
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.
Write docs showing how to use the grid and everything included in it.
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.
Create a gem for Compass
Optimize styles written by mixins. Consolidate general styles to make file size tiny.
We need to be able to push/pull around the grid.
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
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.
Lots of testing needed, especially in IE. Probably not too many issues but should test.
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.
background grid still requires % gutters.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.