We are on 6.5.3. Like in CSS/bootstrap, there is a property to add the spacing between grid columns. I would like to know if there is any way to achieve this in AEM Grid? We need to add some gaps to ensure content doesn't stick together when content is placed inside the column grids. Modifying the grid.less is an option that we are thinking of as last resort, but we would like to check if there is a declarative way from the AEM grid, for example specifying the spacing in some property.
There is no property for padding/margin in AEM grids by default, this is the reason we have grid.less file in place OOTB. But,you can edit and add a property in your templates for that.
Although, this is not the best approach
If you want to add default spacing in all the grids, you have to do it in grid.less.
This would be even worse, as these changes would be global
A Better Approach
I would suggest to create a spacer component instead of adding a default padding in all grids. That way, when you don't want padding in your grids you wouldn't get stuck again.
Content Authors can just add a spacer component(or multiple) in between different components depending upon the size of padding/margin you need.
Customizing AEM Grid
I have this code, with border bottom in every row.
https://jsfiddle.net/brygom/0z582swx/3/
For some reason the border bottom of row not complete all row width. Even if i don't use overflow-auto the border not completed.
The problem is that you are forcing to use 13 .col-2 inside a unique row. In Bootstrap this is not possible because a row has a maximum size of 12, so if you want three equal-width columns across, you can use .col-4, if instead you want two equal-width columns across you can use .col-6. Here you can se in detail how the bootstrap grid system works.
If you try to substitute .col-6 to .col-1 infact, you can see that the width of the line increases. The problem is that you have 13 columns and so I think that using the Bootstrap grid system is not the better choice.
If you want to create a table I suggest you to use the Bootstrap table, in this way you can add as many columns as you want with your preferred customized style. (here you can find the documentation).
If you want to customize better the table you can use instead a normal <table>.
I am trying to place two svg files side by side in a web page. This I have done using susy to create the spans, first one is 2 columns wide, the second 10 columns. I place a narrow bar graph in the first span, and a wide line graph in the second span.
The problem I am having is scaling the graphs. they look like this:
But I want them to look more like this:
They are svg files generated with pygal and I achieved the second image by forcing a size in pygal, but it's not elegant and fails wehn the screen size changes.
How can I make the svg bar chart scale the height without scaling the width and do it dynamically in a web browser instead of manually changing the size in pygal? I also cant manually edit the svg files as they are generated via another system and update frequently.
Your graphs should load in two different divs, so that you can set a different width style for each, depending on a view-based css class (like col based classes in Twitter Bootstrap). If you load dynamic svg's (without any explicit_size setting in Pygal) you should be able to handle different window sizes.
I'd like to know if it is possible to overflow column labels in wxpython grid. I can overflow cells over multiple columns following way:
self.SetCellSize(0, 0, 3, 1)
But how to overflow column labels?
I don't believe that this is currently supported. There was a "sort of" recent addition called the gridlabelrenderer that allows the developer to add colors and font styles to the columns and rows. See the wxPython demo for an example. It uses a wx.DC to do the custom drawing. To me, I would think you could take that code an extend it (i.e. subclass) to make it draw where you wanted...although I don't know how that would affect column size changes.
I have used 960gs to get a first version of some pages going (I am not the designer, but would like to have an approximate layout before handing it to one). It has helped me greatly, but now I am wondering if there is a CSS grid framework where the columns will expand/shrink to make use of all available space in the browser window. Using a 960 pixel top-level container in 960gs, even in my humble 1280-pixel-wide screen there are large empty bands on both sides.
Are there alternative grid systems where I can define a certain column to "grow" if the browser window is larger than expected?
Many thanks!
lara
There is a Fluid 960 Grid System too.
See this ala article on fluid grids and example. Also see this example.
I'd use Unsemantic it's from Nathan Smith who developed 960.gs.
Either that, or you can customize Twitter Bootstrap so that you only take the responsive grid and leave out all the other features that might be unnecessary for your project.
Try the Dead Simple Grid. You can set the columns to have fixed or percentage widths. Setting to percent will dynamically fill the available space. It is very simple (the entire css code is 250 bytes!) but surprisingly powerful.
Cascade Framework's grid system can do exactly what you want... and lots, lots more.
If you use the tag <div class='site-center'></div>, you get a centered div with a fixed width for desktop (width is different depending on browser width) and the full available width for mobile. You can, however, just drop that tag and use the full available width on desktop as well. See this website as an example of an implementation thereof.
The grid elements themselves are percentage based. That means that they fill up a certain percentage of the available width. Out of the box, Cascade Framework's grid system supports 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and far more combinations. In fact, you can even use combinations like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.
To be able to use Cascade Framework's grid system, I recommend you use either the file 'build-full.min.css' (about 8kb minified + gzipped) or the file 'build-full-no-icons.min.css' (about 10.8kb minified + gzipped) in the folder 'assets/css/cascade/production, depending on whether you want to include support for its icon set. You can also create your own build and pick only the modules you want. For the sake of brevity, I'm skipping details on how to do that. If anything isn't clear about creating your own build and you'd like to know more about this, please send me a PM to avoid derailing this thread by going too far off-topic.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your builds include the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
See also http://www.cascade-framework.com/grid.html and http://jslegers.github.io/responsiveness/ .