I need to make some elements of susy's gallery mixin span two columns, the problem is as shown in the picture it does not push the other elements after it, even though I tried to do that manually. How could this be done.
The link to the code https://github.com/iyedg/IGBlogTheme
Here is the perfect tutorial about gallery with different size items.
And the main point is: You can't achieve this with gallery() mixin, but it's possible with span() mixin by something like
$susy: (
columns: 12,
output: isolate
);
// Assuming output is set to isolate
.gallery__item {
margin-bottom: gutter();
#include span(4 of 12 split);
&:nth-child(4),
&:nth-child(7), {
width: span(8 of 12 split);
}
}
Related
I am kind of new to CSS. I have css that applied to table->td and table->td->input separately like below in the local file but i am moving these two styles to global css files. So i want this style to be applied to all the table available in the project and also i don't want to create two separate classes and apply it instead i want to create one class, inside that class apply styles for both table=>td and table->td->input. Is there any way to combine these two into one.
What i have currently is,
table td {
...
}
table td input {
..
..
}
Expecting something like this.
CSS:
.someclassname {
table td
{
....
}
table td input
{
....
}
}
HTML:
<table class="someclassname">
..
</table>
Please guide if there is any way to implement in css. Thanks in advance.
If you like to use nested CSS then you have to take a look to the preprocessing / precompiled CSS like SCSS.
CSS preprocessors compile the code written with a special compiler. A valid CSS file would be created, which you can include to your page.
https://sass-lang.com/guide
I am very new to sass and i am trying to convert a bootstrap layout to bootstrap-sass so that i can have multiple "brands" use the same code-behind with different layouts.
I've managed to use variations of the following to have two versions with different grid structures:
.someclassname {
#include make-sm-column(6);
}
is there an equivalent for hidden-xs (perhaps something like #include make-hidden(xs)?
The idea being one site might have a div hidden on mobile but the other site would want the same div visible.
You can do the following
.someclass {
#extend .hidden-xs;
}
I have a 24 Susy column grid. I'm trying to do some boxes that will each span 6 columns (so 4 per row), but I'm wanting to add some gutters around them, withing a wider container that is 24 columns wide. Unfortunately, no matter what I try, I can't get it to work. It seems the columns are not adjusting their width to accommodate the gutters...I thought Susy was supposed to do that, no? I'm new to all of this so I've read lots of articles and posts and can't figure out this answer, so any help you can give is greatly appreciated.
Here's the code:
.solutionThumbnails {
#include span(24 no-gutters);
#include container;
#include clearfix;
li {
#include span(6);
#include gutters(8px after);
background: #666;
float: left;
height: 240px;
display: block;
&:nth-child(4) {
margin-right: 0px;
}
}
}
And here's what it's looking like right now, ignore the formatting otherwise, still coding :) (you'll see its knocking the fourth item down):
http://i.stack.imgur.com/5tmWp.jpg
Because Sass isn't aware of the DOM, Susy doesn't know that your span and gutter mixins are being applied to the same element, or are related in any way. Susy will handle the math when it has all the information. I think you want something like this?
.solutionThumbnails {
#include container(24);
li {
#include gallery(6 of 24 split);
background: #666;
height: 240px;
}
}
I don't know your settings, or many specifics about the output you need, but that should get you close. You don't need to set a span, container, and clearfix on the same element — the container mixin handles all of that. Similarly, gallery handles everything you need for a consistent layout of same-sized items.
My example doesn't get you exactly 8px gutters. The only way to mix static (px) gutters with fluid (%) grids, is to move the gutters inside the elements. You can approximate 8px gutters with a fluid value by changing the gutter ratio as needed. The default ratio is .25.
Help me out you sassy susy's, I am at my breaking point! I am trying to make the most efficient layout for my project, and I have come across something I havn't been able to figure out with Susy/breakpoint.
I want the layout columns to change at the breakpoints and not have to change all the individual spans of the div's (as there will be many different span widths with this way. Instead of just 1 and changing 3 or 4 different column layouts).
Right now the only way I was able to get this to work was by changing the spans of the divs and keeping the columns unchanged, but I would like the divs to always stay the same size and then just drop into place depending on how many columns are left to fill.
I think it is just the way I am writing the #include. I have tried doing container/layout inside the breakpoint instead of with-layout with no success.
I know this is probably going to be a simple fix that I am just not seeing.
Edit: Also something I have noticed is that no matter how I change things the div is always taking the default $susy map and is not changing it at breakpoint.
SCSS:
#import 'susy';
#import 'breakpoint';
$layout1: layout(12 .125 split fluid center);
$layout2: layout(16 .125 split fluid center);
$layout3: layout(24 .125 split fluid center);
.container {
#include container;
#include with-layout($layout1);
background: orange;
#include breakpoint(600px) {
#include with-layout($layout2);
background: red;
}
#include breakpoint(1000px) {
#include with-layout($layout3);
background: blue;
}
}
.testbox {
#include span(1);
}
html:
<div class="container">
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
<div class="testbox">hello</div>
</div>
with-layout only changes the settings used for Susy mixins/functions nested inside it:
#include with-layout($layout2) {
// code nested here will use the $layout2 settings
}
You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what #cimmanon was trying to explain in the comments. Similarly, #media only changes things nested directly inside it — so your colors change fine, but your spans don't. The colors are actually nested, the spans aren't.
Because Sass is pre-processed, span(1) cannot have multiple outputs unless it is called multiple times. Right now you call it once, so it has one output. If you call it multiple times inside different layout contexts, you can get different outputs.
// This will give you different spans at different breakpoints:
#include breakpoint(600px) {
#include with-layout($layout2) {
#include span(1);
background: red;
}
}
// you can also use the susy-breakpoint shortcut:
#include susy-breakpoint(1000px, $layout3) {
#include span(1);
background: blue;
}
I'm trying to customize a Joomla template, which is based on Bootstrap. Specifically, I'm trying to make a "hardcoded" .span4 have the width of a .span3. Sure, it would be much easier to change the markup, but I think that's what css is for, despite the way most of us use Bootstrap for defining layout and visual appearance. Besides, where would be the fun of learning?
For that, this is what I'm trying in the my_css.less provided with the template:
.row-fluid #top1.span4 {
.row-fluid .span(3);
background:red;
}
Actually, the "background" bit is only to make sure that I'm not getting the selector wrong. So, I get that element with a red background, but the rest of the properties aren't applied. This is what I get instead:
.row-fluid .span4 {
width: 31.623931623932%;
}
Am I doing anything wrong? Is what I'm trying even possible?
Thank you!
* Edit *
This is the template I'm using in my page:
Perty by SmartAddons
The bit I'm trying to customize is the one at the right of the logo, the one holding the language selector and the social icons.
My client's logo is wider than the one in the template example, so it pushes #top1 to the right, and it pushes the following element (the one containing "galleries", "my account" and the search box) below.
Answering #Harry's question about selectors not matching, mine is ".row-fluid #top1.span4" because I only want my modification to apply to the .span4 contained in #top1. The other piece of code I pasted below is what is being applied instead of what I intend. Also, I wanted my customization to take preference over the default css, so my selector tries to be more specific. It doesn't seem to be wrong, because the background of the element becomes red.
#Harry:
Also, are you using any mixins to generate the width?
I'm not experienced in Less and I wasn't able to find the mixin in bootstrap documentation, but according to #freejosh at this post:
In mixins.less there's a mixin called .span(#columns) that's used to calculate the width, depending on #gridColumnWidth and #gridGutterWidth along with the argument.
Actually, that example is the one I'm trying to adapt to my needs.
I hope my edition made things clearer (or at least not more obscure, english is not my native language).
Thank you again!
* Edit 03/09/2014 *
Ok, I think I'm gettin closer. New code:
.row-fluid #top1.span4 {
#grid > .fluid > .span(3);
background:red;
}
Resulting css:
.row-fluid #top1.span4 {
width: * 3 * 2;
background: red;
}
Of course, the browser complains of an invalid property value. But at least that is a step (forward?)
#grid > .fluid > .span(3);
gives me:
.row-fluid #top1.span4 {
width: 23.40425532%;
*width: 23.35106383%;
background: red;
}
and NOT width: * 3 * 2;
Tested with less.php, less v1.4, v1.7.3. Notice that Less v2 do not compile BS2 at all.
Less v2 fails on #grid > .core > .span(#gridColumns); in navbar.less