I'm just trying to familiarise myself with the new Susy Next options and I have my code:
.grid
+clearfix
clear: both
.grid__item
+gallery(1)
+rem(margin-bottom, 20px)
I want a 5 column grid inside .grid so that .grid__item's span 1 column in a gallery formation.
If I add +with-layout(5 1/4 fluid show background) inside .grid then I don't get the debug background output.
If I add +container(5 1/4 fluid show background) inside .grid then I get the background but the items don't span correctly as the context is not there.
Are there any docs on how to use +with-layout as I think that might solve it but can;t find anything on http://susydocs.oddbird.net/en/latest/install
I'm just after the best way to use Susy Next to solve this. I need .grid to contain 5 fluid columns with 1/4 gutters and to then allow me to span my .grid__item's based upon it. I also need to be able to output debug backgrounds on .grid.
I think my main issue is that I am getting confused between: +container, with-layout and how things roll in together. I have read the latest docs but it doesn;t quite click in my head.
Might just be me!
You need to establish your grid. with-layout is one way to do that for a small block of nested code, but why not just set them globally? There are several ways you could do it, all of them documented, but most likely you just want the layout() mixin:
// note that it isn't nested under anything.
+layout(5 1/4 fluid show background)
Now you have a global context, and you can build your grid:
.grid
+container
.grid__item
+gallery(1)
That's it. If you really just want the grid set for a small section of code, you can use with-layout. It works just like layout, but it only affects the code nested inside it.
// with-layout() for a nested code block:
+with-layout(5 1/4 fluid show background)
.grid
+container
.grid__item
+gallery(1)
Related
I am experimenting static layout with Susy and I need some directions on how to establish a nested grid with same gutter width. In this example below, I have .main that spans 9 columns out of 12 columns and I like to make its children .main-item to have a four column layout inside the 9 column layout by maintaining the same 18px gutter width.
http://sassmeister.com/gist/2a414c2b9dc6f332b89b
This of course works seamlessly in fluid grid because everything is in percentages, but in this experiment I want to try with static grid.
What is the best way to do this? Is "with-layout" mixin only the possible solution to achieve this by defining a new layout or are there any other ways to achieve this?
What I have tried so far:
1. Simply mentioning span(3 of 12) for .main-item knowing it wont work, but still gave it a shot
2. Defining a new layout and using with-layout mixin, but it threw me this error "Function valid-column-math finished without #return". I guess I would have done it wrong.
Appreciate your advise.
Re-defining the grid will take a lot of extra math, because you would have to calculate the new size of a column. Also, context doesn't matter, since the math is not relative to context. It seems to work if you just span fractional columns, though. You want to divide 9 columns into 4, so that would look something like:
.main-item {
#include span(9/4);
&.last{
#include last;
}
}
I've been trying to create a couple of typical layout examples using Singularity, and I have a question about grid-span and floats.
I've created a sample scss stylesheet and html layout. Here's the complete example on Sassmeister.
http://sassmeister.com/gist/a7ca98b7520b12bd6241
My question is whether the containing content div <div id="content"> is necessary? I'm having to use it with a clearfix mixin in order to 'pull' the div down and keep the footer below the content section and aside.
Is there another way to achieve this layout with Singularity, without having to use the surrounding clearfix div? Is there an option for grid-span in the main section that will either not use a float, or self clear this section?
To understand your problem you have to learn how floats and clearing work.
0.
When you float an element, it is removed from the flow. It's vertical height does not count when calculating the height of the container.
1.
The intended usage of floats is to add images to a long sheet of text. The text would wrap around the floated image and increase its overall height and stretching the container vertically, just like an object submerged into water increases the height of water surface.
Before:
After:
2.
If the floated image is located very close to the bottom of the text, it will pop it's bottom out of the bottom of the container, just like an iceberg exposing it's top from the water.
3.
Now imagine that your text is comprised of paragraphs and each paragraph starts with a title. When there's an image floated at the bottom of a paragraph, the image would stretch into the next paragraph, pushing the next paragraph's title aside.
4.
If you don't want that to happen, you apply clearing to paragraph titles:
h2 { clear: both; }
This basically tells the titles: don't let floated images push you aside, let them push you down instead.
5.
But web pages have become more than formatted text, and HTML/CSS didn't provide any means of formatting layouts. So we started using floats for layouts. It's ugly, it's like using wallpaper to sew your clothes, but we have no better option (until Flexbox becomes a thing, and it seems to already).
What happens when you float all content in a container? There will be no flow left, no text to stretch the container vertically, and it's height will be zero (plus border and padding):
6.
You already know that in order to make containers regain their height (wrap around the floated content) we have to apply a clearfix to the container. But what a clearfix actually is?
When you apply a clearfix to a container, you use :after in CSS to create an additional element within the container, after all it's content. Then you apply clearing to the little mother fcuker:
.container:after {
content: '';
display: block;
clear: both;
}
7.
Now back to your question! What's the alternative of using the clearfix?
You've probably have guessed already.
If you've got got content below the floated element, simply apply clear: both to the next element below the floated one! Just like we did in #4 for paragraph titles.
In your case:
footer { clear: both; }
And here's a demo: http://sassmeister.com/gist/df8af8a3c7f8d3df2796
I'm trying to position two buttons side-by-side using Susy and this seems to work fine:
.fifty {
#include span-columns(3);
#include nth-omega(2n);
}
However as soon as I ad a 1px border to the button the effective width is 100%+4px and thus it breaks the layout.
I'm using the Compass Vertical Rhythm plugin for all my button padding values so would like not to mess that up.
This is related to "How to include padding in column width with Susy", but your second option is a bit different. This problem isn't specific to Susy - it's true of any fluid layout - But Compass and Susy can help you with the first solution:
Use box-sizing: border-box; - this is now supported by all the major browsers, and Compass has a handy box-sizing() mixin to take care of prefixes for you. If you use it everywhere (like I do), it can change the size of a Susy container, but Susy comes with the handy mixin to fix all that for you. Simply add this at the root, before you set your containers - it will set the box model, and let Susy know to adjust for it:
#include border-box-sizing;
Or just use the Compass box-sizing(border-box) mixin where you want it (on these buttons).
Since borders don't take % values, there is simply no good way to add borders to fluid elements (using the default content-box model). If you can't use the border-box model, the only other option is to add an internal element in the markup, use the outer for sizing, and the inner for borders and styles.
There is a third option - using calc() - but it's harder to do, and has even less browser support...
Option #1 is the best by far - as long as you can leave IE7 out of the fun.
I am having a very strange problem - I am using more or less the same code as the scatterplot sample on the nvd3 web site (but hooked into my ember.js app) and I'm seeing a beautiful plot come out only to be marred about 500ms later by a set of black circles that are much larger but follow the same contour of the plot.
If I comment out this line in nv.d3.js:
gEnter.append('g').attr('class', 'nv-point-paths');
this doesn't seem to happen and the graph "works" ala without the animations.
Has anyone seen something like that before?
I have just come across this issue myself, and I think I have figured it out, although I am not sure why it's not explained better on the nvd3 pages anywhere.
You need to include a reference to the nvd3 stylesheet in your html which is the ./src/nv.d3.css file in the download/github repo.
My guess is that the black circles are the hover regions for each point on the chart, and the default style for a path in SVG is black filled.
I have raised an issue on github to see if we can get the installation instructions for nvd3 improved: https://github.com/novus/nvd3/issues/19.
It turns out that even if you include the css file the dots will still show up:
https://dl.dropboxusercontent.com/u/318531/so/black-dots.png
It appears to be an issue only with area and line charts, more specifically with the tooltips:
https://dl.dropboxusercontent.com/u/318531/so/selector.png
What I did was hide the tooltips, like this:
<style media="print">
.nv-point-paths {
display: none !important;
}
</style>
I'm not sure if the css selector above will work in all cases, inspect the tooltip element to make sure you are hiding the right element.
PS: I tried to attach screenshots but apparently I don't have enough reputation :-(
If you are new to Angular2, you may have forgotten to add:
encapsulation: ViewEncapsulation.None
which would allow external stylesheets to be loaded.
I had this problem trying to import the nvd3 scatterPlusLineChart into jsFiddle.
Although I added the css external reference, it isn't 'taking';
my workaround was to put the source from nv.d3.css directly in at the top of the CSS region.
Any ideas?
Also, in case anyone else wanted to play with the example, it's at
http://jsfiddle.net/mr23/JHWNr/1/
Obligatory jsfiddle code to satisfy SO.com, even though it's about a reference...
In: CSS field
/********************
* HTML CSS
*/
.chartWrap {
margin: 0;
padding: 0;
overflow: hidden;
}
MediaWiki pictures can be set to a certain size with simple formatting.
However, tables will resize on the fly depending on the browser / screen size.
Can images be made to resize like tables?
(Images inside tables does not work!)
I had the same question and saw from the answers above (now they are below) that you cannot have several pics with different relative sizes. So I wrote a mediawiki extension allowing this: http://mediawiki.org/wiki/Extension:AdaptiveThumb
Dynamic resizing as the browser is resized:
Put the next line at the begining of the css file: .\skins\common\shared.css
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Each resizable image will be placed inside a <div></div>
<div>[[Image:MyImage.png]]</div>
Read more here: http://www.mediawiki.org/wiki/Help_talk:Images
You could set up a CSS hack.
Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:
img[alt=~w100] { width: 100% !important; height: auto !important; }
Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.
In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.
The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D