I'm having a bit of trouble with vertically centering elements inside of grid column.
Typically I'd use table-cell for something like that, but I'm having problems due to the float nature of Susy. Everything I try seems to fall apart at some point.
For instance if I wanted to center these elements vertically in their respective column how would I do that, assuming I am using the default grid settings.
<div class="section">
<div class="col1">Some Text<br/>Some Text</div>
<div class="col2"><img src=""/></div>
<div class="col3">Some Text</div>
</div>
Much thanks for any help
If you want to use table-cell with Susy, you should. Susy was built to be taken apart and customized. You can use the built-in functions in any way you like. I'm no master of table-based layout, but it sounds like you are. As far as Susy is concerned, it would look something like this:
.section {
display: table;
}
.col1, .col2, .col3 {
display: table-cell;
vertical-align: middle;
}
.col1, .col3 {
width: span(1);
}
.col2 {
width: span(2);
}
The span function works the same way as the span mixin, but only returns a width value. Combine that with your table-cells, and you should be good to go.
We're talking about adding a table-cell output option that will do this for you. If you have ideas for how that should work, open up a github issue and we'll talk. I'd love to hear your thoughts.
Related
Let's assume I have something like the following:
<v-app>
<div :class="getCustomCss">Blah</div>
<v-app>
getCustomCss() {
return $this.vuetify.theme.dark ? 'whenThemeIsDark' : 'whenThemeIsLight';
}
<style>
.whenThemeIsDark {
border:1px solid white;
}
.whenThemeIsLight {
border:1px solid black;
}
</style>
What would be the best way to change the color of the divs border when toggling between light/dark themes?
Do I sit and watch the $this.vuetify.theme.dark property and manually change the border from the myDarkClass to myWhiteClass similar to what's shown above? Or do I somehow use the customProperties feature in the theme/options to do this (and how?). Or is there a better way of doing this I'm unaware of?
This is a simple example which only requests the css to change in one spot, but a real application may have tons of custom css on different pages that would keep needing checks like this. I could easily see that getting messy if there are watchers/checks everywhere.
I have read the https://vuetifyjs.com/en/customization/theme page and I have a feeling the Custom Properties section may be the key, but I'm not quite getting how to translate my example to their example.
A css class of theme--light or theme--dark is applied to the v-app v-application which will identify which theme is active for you without additional watchers.
Using your simplified example:
<style>
.v-application.theme--light {
border:1px solid white;
}
.v-application.theme--dark{
border:1px solid black;
}
</style>
I have some elements as such:
<div class="logo">
LOGO HERE
</div>
Considering the a tag is the only element within .logo is it still appropriate to write the SASS as:
.logo {
a {
//STYLES
}
}
Or is normal css ok here? Eg:
.logo a {
//STYLES
}
Both ways work, of course, but is there a preferred way when working with SASS?
Both will work fine in SASS. Traditionally, for readability, it's better to nest the elements, as you've listed in the first example.
Given the HTML :
<div class="parent">
<div class="element"></div>
<div class="other"></div>
</div>
And this Sass :
.parent {
.element {
#include span-columns(2.5 of 8);
}
}
It generates the CSS :
.parent .element {
float: left;
display: block;
margin-right: 3.22581%;
width: 29.03226%;
}
.parent .element:last-child {
margin-right: 0;
}
The part with :last-child is bothering me, because it overrides the first rule with right-margin that I want to keep. How do I prevent Neat from adding the :last-child rule ? Or what workaround should I do to set my desired right margin ?
I think you're okay here. Neat's span-columns() mixin works by establishing an element as a column with the classes you copied above, including right margin for a gutter between columns. It then uses the :last-child pseudo-class to remove the gutter margin on the last column so you don't have unnecessary space there.
Thinking this out, the .element div in your example isn't the :last-child, so that particular div's right margin will be untouched. I threw this in a JSBin to show you: http://jsbin.com/wawopef/edit?html,css,output. I made .other a column as well since it seemed clear that you intended for it to be one. The .element div still has its margin, then.
If you really wanted to override the rule you could do so by rewriting the mixin, but A) that's probably not what you want to do and B) this is sort of part of using someone else's grid framework. If we follow their documentation it should work fine. Or the framework is bad, which fortunately Bourbon and Neat are not!
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
I've been using Zen Grids for responsive layouts for a while now, and somehow never came across this. I've referenced the documentation, but for the life of me cannot figure out how to do something which should be relatively simple.
I have a block which I set on the grid, such as:
<div class="container">
<div class="item">
</div>
</div>
==========
.container {
#include zen-grid-container();
}
.item {
#include zen-grid-item(1, 1);
}
I then have a media query where, for whatever reason, I need to remove the item from the grid completely:
#media screen and (min-width:50em) {
.item {
???
}
}
To be clear, I'm not looking to re-declare the item to a different col-width/position, I just want to remove the mixin from being called completely. I know I can just reset the CSS manually, but was wondering if there was a better way from any Zen Grid ninjas.
Thanks!
Have you tried to just use
.item {
display: none;
}
in your media query? That should hide it and probably remove the spacing it took up as well.