A webform I am customizing has 9 elements in a composite. Since there are too many of them, the composite is exceeding the fieldset you will see below.
This is the picture of the composite
I would like to shrink the size of the composite and adjust the widths of some of the elements (like Amount since it shouldn't take that many space, and maybe make Type element wider).
I followed along this solution but the size would not change even when I added
wrapper_attributes:
width: 20%
Does anyone have experience with adjusting the widths of composite's elements ?
P.S. To be visual-friendly, here is where I added the code above
Other Idea: Change in CSS padding, margin or border-line.
I'm attempting to set up a photo gallery using only html/css for a school assignment, how would I make it such that two photos of different heights/widths automatically line up such that there is no empty space below one of the photos.
ie. if using rows, then such that there is no space between the bottom of the row and only on of the photos?
First, it will be easier if you can line make the images the same width and just set the height to auto.
Then, you could do something this: https://codepen.io/nikitaagarwal/pen/gpRPWO?editors=1100
which uses:
column-count: 4;
column-gap: 1em;
to create the page columns of equal width.
If you need to make them different widths, I think it would be easier to put only one width per column.
Aside:
I usually use the Masonry library for this, but it contains JavaScript so you might not be able to.
https://masonry.desandro.com/
I am still puzzled about a few certain aspects in the application of Singularity. I wonder for example about one thing. In the following gist i have set up a few simple elements. The blue at the bottom is the footer, the yellow in the middle the content and the upper three cells (red, green fuchsia - built by grid-span) build the header. All three parts are build by the same container.
http://sassmeister.com/gist/8010028
I wonder what would be the cleanest approach to make the header broader than the other two.
By defining a width in percentage just for the wrapping header element?
By applying the layout mixin to the header element and set a whole new context?
Or is it even impossible to have different width for one of the three if they all rely onto the same container settings and context? Best regards Ralf
Singularity is container-agnostic, so you can position your header container in any way that you prefer.
There are many ways to make one of containers larger, and this problem is not related to Singularity.
My favorite method is negative margins. It is not applicable to your styles because you set margin: 0 auto on your containers. I suggest that you use margin: 0 auto on body instead. This will require some refactoring.
What does relate to Singularity though is the problem of maintaining a consistent grid throughout containers of different widths. You'll need to do some math and spend some time fiddling with values.
Here's what i managed to achieve: http://sassbin.com/gist/8030219/
Note that i'm not using the layout mixin but simply redefine $grids. This method is not recommended but is acceptable when there are several different grids and none of them can be called the main one.
PS Note that SassMeister is on Sass 3.3 whereas Singularity and Breakpoint aren't behaving properly on Sass 3.3. Use SassBin.com instead which stays on Sass 3.2.
I've been trying to figure out the best solution for displaying a list of projects using Singularity.
I want to essentially remove the padding of the last item of each row but add that padding back into the overall project width of all projects.
I think the solution will have more to do with css than singularity but maybe there is a good solution within singularity I am missing?
These projects will eventually be regularly added by a cms.
example: http://sassmeister.com/gist/7916151
Okay, there's a number of things you should consider.
Firstly, Singularity and Breakpoint are not yet compatible with Sass 3.3, whereas Sassmeister.com is already using Sass 3.3. Make sure you're using Sass 3.2.x in your project. To demonstrate Sass+HTML, consider using SassBin.com.
Secondly, you're using 12px gutters. This is incorrect. Gutters are specified as a unitless value, relative to a single column unit. So when you have two columns and 12px gutters you actually tell Singularity to make gutters 12 times larger than columns.
Instead, provide relative gutters like this: $gutters: 0.1.
Thirdly, you specify a 4-column grid for the medium size but you only use them as a two-column grid. If you don't use four columns somewhere in your project, i suggest that you omit that 4-column definition and keep using the 2-columns grid.
Fourthly, you're setting an outline on your container but it never displays properly because the container has zero height. It has zero height because all its contents is floated.
To have the container embrace the floated content, you have to apply a clearfix to the container. Google it up. The simpliest way to apply a clearfix is to use the pie-clearfix mixin that comes with Compass. But i suggest that you use the %clearfix-micro extend that comes with Toolkit.
Fifthly (is there even such a word?), to remove the gap on the right, you have to apply a last float-span to the last item in every row. To do that properly, you have to learn how the nth-child works. I highly recommend that you google it up.
In short, nth-child accepts an argument that looks like An+B where A and B are whole numbers. The A should be equal to the number of columns and B is the number of the column you're addressing. As you're addressing the last column, B is equal to A in your case. So the whole thing looks like nth-child(3n+3) for example.
Sixthly, you're applying Singularity spans for different breakpoints in such a manner that they accumulate. This is okay when you override spans to all your items at once, so that all of them become redefined in each media query.
But when you apply styles selectively (to the last item in each row), you'd have to cancel them too. This is a very cheerless thing to do.
Instead, you should narrow down your media queries so that they address only specific slices between two breakpoints. In this case, spanning styles will not accumulate.
Here's how you code would look if you used all my recommendations: http://sassbin.com/gist/7951326/
Seventhly (my tongue hurts), consider using the Breakpoint Slicer extension, a tiny wrapper for Breakpoint that makes slicing breakpoint ranges very quick and effortless.
Here's how your code could look if you used Breakpoint Slicer: http://sassbin.com/gist/7951724/
Eighthly, if you did want fixed gutters, you should've set the $gutter-styles: 'fixed' option.
Of course you could do something like this:
&:nth-child(3n) {
margin-right: 0;
}
On the Singularity wiki, it seems to indicate that this should work:
&:nth-child(3n) {
#include float-span(2, 'last');
}
But it didn't or I didn't understand its function.
Thanks for the extensive answer.
I'm well aware of the nth-child selector. I went down that road but decide it wasn't a clean solution for me.
I know I didn't clear the float...wasn't really part of my question.
Setting a fixed height of 12px is not incorrect based on the documentation: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#fixed-gutters
I need fixed gutters. That's the whole crux of the problem here.
I started making my own fixed gutter fluid column solution that I'm liking thus far: http://codepen.io/joshuarule/pen/zsfEo
I want to decrease the space between components (DIV mainly) from 20px to 3px or maybe 5px. I know that I need to multiply 12 columns * 60 px and then 11 spaces * 20 px and this give me 940px. Also knows about the tool from Twitter to make those changes but I tried and my styles still gettin 20px of space. Any help on this?
You mean the grid columns? The values you want to change are:
#gridColumns
#gridColumnWidth
#gridGutterWidth
You can modify them in the LESS scripts or you can download the entire package with the variables already customized.