Using Susy via CodeKit, I run into a strange situation:
If I use:
.example { #include span (first); }
or
.example { #include span (last); }
Susy works as expected according to the documents. However, when using e.g.
.example { #include span (4 at 5 of 12); }
a 4 column box is made, but it is not placed in column 5, but simply floating left.
However, when using e.g.
.example { #include span (3 at 8 of 12); }
the box is 3 columns, as expected, but starts floating right instead of in column 8. In other words, placing an element in a certain column doesn't work. Replacing the susy mixin with a simple margin-left works fine, but that isn't the purpose of using a grid system like Susy.
I have contacted the developer of CodeKit, but he doesn't think it's a CodeKit problem with Susy. I have tested it using the code of some online classes and it remains working oddly.
What can this be? Are there any prerequisites to placing elements in a certain column using Susy? Do I miss something here?
The at keyword is for use with isolation output. You can turn on isolation globally, if you want, but it adds some bulk to the output, and changes the way elements flow in a layout. Without isolation, Susy has no way of knowing anything about your DOM tree, or where an element lands in the default flow, or how to push it back and forth into place — so you need to set that explicitly in relation to the default, using the margin mixins (pre/post/push/pull).
[at is also used for asymmetrical grids, but it solves a different problem in that case.]
Related
I created a page with a resizable panel on the bottom using react-resize-panel lib.
I had to change the alignment of the elements inside the divs generated by the <ResizePanel> component provided by the lib.
<ResizePanel> creates three levels of elements:
I needed to override the margin-bottom property of the child with the class name ResizePanel-module_ResizeBarVertical__2LUZV. Likely, the suffix is generated dynamically, so I had to use the CSS selector to override it:
[class^='ResizePanel-module_ResizeBarVertical'] {
margin-bottom: 0;
}
Tested it locally and it worked as expected. But when I deployed to remote the sequence of the CSS rules applied changed and my custom style was overridden:
I would like to get a better understanding of how CSS is loaded locally and remotely. In particular, is there any rule of thumb for local testing when it comes to React styles and conflicting CSS rules
UPDATE with solution
There are two solutions suitable:
narrow down the selector to div only (selected this one based on best practices)
div[class^='ResizePanel-module_ResizeBarVertical'] {
margin-bottom: 0;
}
use !important in the style
[class^='ResizePanel-module_ResizeBarVertical'] {
margin-bottom: 0 !important;
}
CSS Precedence could be tricky sometimes, there should be 3 "levels", sorted by highest priority:
!important (you can force override; should solve your problem, but probably doesn't fully answer your question)
specification of selector (how much specified the selector is; seems like what you are struggling with – your custom selector is less specified, so it has lower weight)
order; what was declarated first (there could also be problem with cache; but that's probably not your case)
More info about the selector specificity weight in the Mozilla docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am trying to get rid of the "Subscribe" header using CSS.
I inspect it and then I use the following code to remove it and it works fine:
#main-outlet.wrap .container .title-wrapper h1 {
display: none;
}
However, it so happens that other elements in my website use this same selector, so it removes them as well. In particular, it removes the titles of the topic discussions on my main page. But I don't know how to fix this because it seems that there isn't a more specific selector for the page with "subscribe" on it in particular. What am I missing?
You need to isolate your <h1> element.
I'm guessing you can't edit the HTML directly, otherwise you'd be able to add a unique class to the element.
You can do still isolate the element computationally via a short script.
There are many approaches, but here are two:
Approach 1
You can achieve the effect you need with two lines of javascript.
Javascript
const mainHeading = document.getElementsByTagName('h1')[0];
mainHeading.style.setProperty('opacity', 0);
Approach 2
Or, a little more sophisticated, with two lines of javascript and one line of CSS.
Javascript
const mainHeading = document.getElementsByTagName('h1')[0];
mainHeading.classList.add('subscribeMainHeading');
CSS
.subscribeMainHeading {
opacity: 0;
}
I am learning about breakpoints, singularity and float-spans but I can not get them to play nicely together.
For simplicity I am sticking with a 12 column grid and I have avoided any nesting. I want a display of six column float span at the $tablet breakpoint and a three column span at the $desktop breakpoint. In the gist below I refer to these alternative displays as a breakpoint groups.
http://sassmeister.com/gist/1cca897661125564db41
Each breakpoint group works independently of other, but when combined in the same scss something goes wrong. Not sure what I am doing wrong. Wrong scss or some conflict between the n-th values?
EDIT
Here is the right way to do it. Thanks Jan
http://sassmeister.com/gist/04adc7d2c992f3d48736
As it is using min-width some styles are inherited from the lower breakpoints to the larger ones, you need to override the class settings in the higher breakpoints, in your example is clear:right on every second element and then some width setting is overridden as well since .tile:nth-child(2n+2) is stronger that .tile in higher breakpoint... you can fix it by doing something similar to this:
#include breakpoint($desktop, true) {
.tile {
border: 1px solid;
margin-bottom: 20px;
&:nth-child(n){
#include float-span(3);
clear:none;
}
&:nth-child(4n+4) {
#include float-span(3,last);
}
}
}
&:nth-child(n) basically reset the settings for sizes and &:nth-child(4n+4) fixes the last
I have a 24 column page that is based on the 24 column 960 template. I have an element that needs a specific with of 84px.
I tried to write the markup this way:
<div class="container_24 grid_84">
</div>
I tried writting the css this way:
.container_24 .grid_84 {
width:84px !important;
}
It is not setting to 84px it is setting to 960px.
What is the proper of displaying this.
Your CSS has this:
.container_24 .grid_84
That is looking for an element with a class of grid_84 that is a CHILD of container_24.
But you are actually looking for this in your HTML:
.container_24.grid_84
That is an element with both classes, which is what your HTML shows.
Side advice:
Don't mix grid framework syntax with your own. 24 refers to column. Your 84 refers to specific pixels.
I'd suggest using something along the lines of
.override_84px
So it's clearly not part of the grid framework. Future people that have to look at your markup will thank you.
Also, since you are making your element here, why even use the container_24 class in the first place?
Finally, the !important declaration is usually a method of last resort to over-ride some existing CSS you have no control over of. You typcially do not want to be using that attribute with your own CSS as it's usually a sign that things have gotten a bit messy.
.container_24 .grid_84 { width:84px !important; }
syntax is correct but are you sure you are looking at the right cell? I have not exactly understood your question though.
Also consider using an ID for container_24, if there is going to be only one such container in the page. Make sure you are not setting width of a span element, which does not take width unless you change its display property to block
{display:block}
The latter css statement is always used, I know you can set this with the !important tag, however, I am not sure if this only applies to the other statements within the same file. I would suggest using the order:
reset.css
960.css
text.css
style.css
I have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.
I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)
Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.
Edit to clarify:
The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago
Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.
So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.
Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:
semantic_styles: # i dont think this is the right key definition but you get the idea
'#footer,#navigation': ['span-12','clearfix']
'#footer': ['push-1']
# etc...
Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:
#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */}
#footer {/* declarations from .push-1 */}
But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.
I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?
#header{
position:relative;
...
}
I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).
However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under
/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
width: 301px;
}
Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.
You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.
If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?