I'm using singularitygs as my grid system and am really like the flexibility but I have come across a fairly unique situation and I'm not sure if singularity (or any other grid system) addresses
I have a row that span the entire column width, that breaks up the header portion and the content portion of the document. There is an element, div.b, that sits within above the full column bars next to div.a in larger layout. But on a medium sized layout and below, that element falls below the full span row. Here is the source order and the desired output, showed using a 10 column layout for simplicity.
Source Order
div.a
div.b
div.c
div.d
div.e
div.f
div.g
div.h
Large Layout
Medium Layout
Thanks in advance for any help and ++ to the creators of the grid system
Interesting use case. Honestly it’s going to be pretty hard until CSS grid layout comes out. While Singularity can handle any order horizontally, the vertical reordering like "D" and "G" stacked is going to be tricky. There might be a clever use of floats to get this working but it will probably be more hand manipulation of elements than pure Singularity magic.
Related
I am trying to display text on an SSRS report in a fixed position, regardless of the content above it. The problem is the content above may be one to three lines. As the above content fluctuates, so does the beginning of the next row of content. This happens in two places on the report.
In other words, I need two static starting points for dynamic content. I am printing text onto a pre-designed invoice that doesn't contain any customer data. The invoice is just a template (or shell if you will) and I am to position the data to print into spaces provided on that invoice.
Please see attachments. The attachment with two rows in each field is lining up correctly. I have done this intentionally as a basis. As you can see on the other two attachments, with either one or three rows, the content isn't lining up where it should be due to more or less content than my basis.
I have toyed around with cangrow & canshrink but couldn't get the results as desired.
Appreciate the help!
I think you're going to need to re-work your table to get working the way you want.
The way I would do it would be to have one table that groups each page data. Use this table to format your data - putting Rectangles in the area for your lines of data. Rectangles can have a set height so they fill your area when there isn't enough data.
Then you'll have to add another tables inside each of the rectangles to display each sections data.
See my example below - the RED represents where the Rectangles would go and the BLUE for tables.
I would keep the old table intact and copy and paste it in each rectangle. Then remove all the parts that that section doesn't need and set your rectangle to the correct size.
Let's say I have three divs: a, b and c, that share a common wrapper div and that I'd like to align as a triptych.
Is it possible to have either b or c have a fixed width (imagine a sidebar with nav), while the other two expand fluidly? Note that the source order matters (a, b, c order). A max-width (rather than fixed) could work fine as well, as long as it supports fluid expansion of the other two divs.
Yes you can! Check out this SassMeister showing fixed and fluid columns.
Now, there are a couple of caveats to this. First, you need fixed width gutters as you can't have gutters in proportion to fluid columns if not all columns are fluid. Second, you need to be using the calc output style from Singularity Extras. This means your columns will be output using CSS3's calc that, while widely available, does require a fallback for browsers that do not support it. Other than that, the calc output style works exactly like the isolation output style.
Last year when the calc output style was introduced, I wrote a blog post titled Bulletproof Combo Fixed and Fluid Grids with CSS Calc explaining in detail about using calc to create fixed and fluid grids and introducing it to Singularity.
ahoy all,
i have a simple example that mixes float-span and grid-span mixins within the same grid context (i.e. the same number of columns in the same row)
http://sassbin.com/gist/7812502/
as you can see, i have 3 items that i want to space out evenly in a row. i use float-span with first and last options on items 1 and 3 to make them sit at the beginning and end of the row respectively, and this works as expected. for the middle item, which i want centered, i assumed i could use grid-span with the correct location to have the 2nd item in the middle. however, what is happening is that the counting of location for grid-span is started after the column taken up by the first floated item. is this expected behavior? in other words, is it allowable to mix float-span and grid-span in the same grid context/row? and if not, what is the preferred way in Singularity for accomplishing the same thing?
i have been searching the documentation wiki, in particular the section on spanning the grid, but have found no statements either way. and the demos do not seem to be using float-span and grid-span together.
thanks as usual for Singularity and for any help.
peace
PS. i have already tried using the isolation-span mixin in place of grid-span with the same results.
It is not advisable to mix output styles like float and isolation in the same grid. You should pick either isolation or floats and stick with it.
Here is your sassbin tweaked a bit: http://sassbin.com/gist/7815953/
For some reason my responsive grid is breaking when I open my website in Firefox. I'm using skeleton grid system and I haven't really had any problems with cross browser compatibility before but I modified the grid (to a 8 column grid instead of a 16) and I think I may have broken something.
I can't figure it out because all I did was remove the classes for the other 8 columns.
The columns start where they are supposed to but they are huge and extend off the page now.
Here is the live website: http://nicki.smartbrandidentity.com/
Any help is greatly appreciated.
If I were you, I'd just use the 16 column layout. Use the column2 when you would use a column1. These grids are designed to give you as many options as can fit in a grid, and you shouldn't limit yourself to only 8.
Also, looking at the css, this does not look like a "responsive" grid. All of the columns are set in pixels. If you want a really easy grid that is actually responsive, check out the columnal grid system. http://www.columnal.com/
I need to plot and display several jpeg images in a single combined display (or canvas?). For example, suppose I have images {a,b,c,d}.jpg, each of different size, and I would like to plot them on one page in a 2x2 grid. It would be also nice to be able to set a title for each subplot.
I've been thoroughly looking for a solution, but couldn't find out how to do it, so any ideas would really help. I would preferably use a solution that is based on the EBImage package.
There are two ways how to arrange several plots with base graph functions, namely par(mfrow=c(rows,columns)) (substitute rows and columns with integers) and layout(mat) where mat is a matrix like matrix(c(1,2,3,4)).
For further info see ?par, ?layout, and especially Quick-R: Combining Plots.
However, as your question is about images I don't know if it helps you at all. If not, I am sorry for misinterpreting your question.
To add to Henriks solution, a rather convenient way of using the par() function is:
jpeg(filename="somefile.jpg")
op <- par(mfrow=c(2,2)
#plot the plots you want
par(op)
dev.off()
This way, you put the parameters back to the old state after you ran the code. Be aware of the fact this is NOT true if one of the plots gave an error.
Be aware of the fact that R always put the plots in the same order. Using mfrow fills the grid row by row. If you use mfcol instead of mfrow in the code, you fill up column by column.
Layout is a whole different story. Here you can define in which order the plots have to be placed. So layout(matrix(1:4,nrow=2) does the same as par(mfcol=c(2,2)). But layout(matrix(c(1,4,3,2),ncol=2)) places the first plot lefttop, the next one rightbottom, the third one righttop, and the last one leftbottom.
Every plot is completely independent, so the titles you specify using the option main are printed as well. If you want to have more flexibility, you should take a look at lattice plots.
If you do not want the images in a regular grid (the different sizes could imply this), then you might consider using the subplot function from the TeachingDemos package. The last example in the help page shows using an image as a plotting character, just modify to use your different images and sizes/locations.
The ms.image function (same package) used with my.symbols is another possibility.