I'm trying to wrap my head around Susy. I think I'm going to like it. Just need to work with it more. I'm basically trying to create reusable columns that I can use throughout a site. I'm coming from using the Foundation grid, so maybe I'm not thinking about this right?
I'd need to be able to target those columns. I've read a few articles that say we shouldn't be filling our divs with classes like column-2 or small-6. I guess I'm not seeing how you target the divs if I don't tell it what I expect.
The code below works, but is it very Susy? Is it the right approach? I'd have to create similar rules for all 12 column widths. I'd have to decide up front how I want those columns to break. Do I want the span 6 columns to span 6 all the way down to medium or should they change to span 12. These rules would have to be determined up front.
If this is even the right approach. Any help, guidance or pointers is appreciated.
HTML
<div class="row">
<div class="column-6">
<div class="column-2"></div>
<div class="column-2"></div>
<div class="column-2"></div>
<div class="column-2"></div>
<div class="column-2"></div>
<div class="column-2"></div>
</div>
<div class="large-6">
<!-- Large image goes here -->
</div>
</div>
SUSY SASS
$susy: (
columns: 12,
gutters: 1/4,
container: 64em,
global-box-sizing: border-box,
);
$medium: 30em;
$large: 64em;
.column-2 {
#include span(12 last);
#include breakpoint($medium) {
#include span(6);
&:nth-child(2n) {
#include last;
}
}
#include breakpoint($large) {
#include span(2);
&:nth-child(2n) {
#include span(2);
}
&:last-child {
#include last;
}
}
}
.column-6 {
#include span(12 last);
#include breakpoint($medium) {
#include span(12);
&:nth-child(2n) {
#include last;
}
}
}
You've got the right idea. Susy is different from Foundation and Bootstrap in that we declare the responsiveness in our Sass instead of filling the html with class like "large-3 pull.."
I usually name my classes something more meaningful that "column-6" like "main-content". Other than that it looks like the right approach.
#include span(12 last);
You don't really need to specify last here since it's spanning the full width.
#include full;
Would probably be more appropriate, or just
#include span();
Which will default to your columns defined in the settings.
Related
I'm using Webpack/Laravel and injecting vuejs on id #app in my page so to have skeleton loading page I want to have this markup
//client side, will show after ~0.2 seconds
<div id="app" v-cloak>
<hello-world>
</div
//server side, show for ~0.2 s then disappear
<div id="app__loading" v-cloak>
<div class="skeleton">
<span class="skeleton_ribs"></span>
</div>
</div>
I managed to display loading gif in background as pseudo element when v-cloak and everything inside from #app__loading is removed, but if I add normal elements in markup they appear at the bottom of the page after #app loads
[v-cloak] > * { display:none }
[v-cloak] + #app__loading::before {
content: url('https://i.pinimg.com/originals/65/ba/48/65ba488626025cff82f091336fbf94bb.gif');
display: flex;
justify-content: center;
align-items: center;
}
But I would like something like this to work with markup inside #app__loading, but it doesn't work
[v-cloak] > * { display:none }
#app-loader{
display: block;
}
[v-cloak] #app::finish-loading{
[v-cloak] #app-loader{
display: none!important;
}
}
You seem to be expecting the content your initial element to be found in the template of app root element. When using $mount() function, Vue completely replaces the target element with the template of the mounted element.
This replacement is somewhat masked by the fact that, out of the box, the index.html contains a <div id="app"> which gets replaced by the <div id="app">...</div> in your App.vue template.
But they're actually not related (and not the same element). If you changed the id of the one in index.html you'd need to change the target el in main.(js|ts). And obviously, you could change the id of the one in App.vue as well.
Now, to solve your issue, you could simply place v-cloak on the div in your App.vue. From what you've shown so far, that should make it work as expected.
For more complex use cases (i.e: if you wanted to trigger a particular event bound to the initial element) the way to go would be to wrap the initial placeholder in a parent, bind to the parent and, later on, in Vue, target the parent with this.$el.closest('.some-class') or with this.$el.parentElement() to access the binding.
If you still can't get the expected result, please create a mcve (you could use codesanbox.io) and describe in detail what is the expected behavior.
To make your headache smaller till you find proper vue solution, you can grab loader by id and when Vue instance mounts - give display none
export default {
mounted() {
document.querySelector('#app__loading').style.display = 'none';
},
}
The HTML DOM structure I have is, sort of, repetitive. Is there any good practice to refactor my sass rules?
HTML:
<div name="OpportunityDetailView" class="actor-wrapper"><div name="OpportunityDetailView" class="detail-view expansion-bottom-normal">...</div></div>
<div name="ApplicationDetailView" class="actor-wrapper"><div name="ApplicationDetailView" class="detail-view expansion-bottom-normal">...</div></div>
<div name="ProfileDetailView" class="actor-wrapper"><div name="ProfileDetailView" class="detail-view expansion-bottom-normal">...</div></div>
SCSS case 1:
div[name="OpportunityDetailView"] > div[name="OpportunityDetailView"],
div[name="ApplicationDetailView"] > div[name="ApplicationDetailView"],
div[name="ProfileDetailView"] > div[name="ProfileDetailView"],
{
css rules...
}
SCSS case 2:
.section {
div[name="Business_Image_Url__c"],
div[name="Name"],
div[name="Account_Name__c"],
div[name="Business_Type__c"],
div[name="Region_Province__c"] {
.label{
display: none !important;
}
}
If I'm not missing something, it seems like you can use the classes assigned to the elements to achieve what you want:
For case 1:
.actor-wrapper {
.detail-view {
//css code goes here
}
}
and please provide some markup for the case 2.
If all the div[name] elements share the same class, then you can group them by that class, as done with the above example.
I need a different sized grid within the standard grid layout.
I'm using sass and have tried:
.row-30{
#include grid-row($total-columns: 30);
}
Here's the HTML:
<div class="row-30">
<div class="small-5 columns">a 5 col</div>
<div class="small-1 columns end">a 1 col</div>
</div>
I'm having no luck though. Where am I going wrong with this mixin?
I think you also need to bring in the grid-html-classes for the size you want..
$total-columns: 30;
.row-30 {
#include grid-row($total-columns);
#include grid-html-classes($size:small);
}
Demo: http://codeply.com/go/QIvdO5M7Tz
I have counter-reset and counter-increment working fine in HTML, but they are not appearing in the rendered PDF. Are they supported? (An hour of Googling didn't help.)
Here is my CSS. Again, this works fine in HTML, but does not appear in the PDF.
body {
counter-reset: h3counter 1;
counter-reset: h4counter 1;
}
h2 {
counter-reset: h3counter;
}
h3 {
counter-increment: h3counter;
counter-reset: h4counter;
}
h3:before {
content: counter(h3counter) ".\0000a0\0000a0";
}
h4 {
counter-increment: h4counter;
}
h4:before {
content: counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
}
Yes, it works (in wkhtmltox.dll version 0.11.0.0), but only in simple cases. I just ran into the problem that the counter seems to reset when the heading tags (h1, h2, h3) are not direct siblings - i.e., each is wrapped in a div. When the headings are adjacent, as in:
<h2>..</h2>
<h3>...</h3>
<h3>...</h3>
wkhtmltopdf numbers correctly; in this case:
<h2>...</h2>
<div>
<h3>...</h3>
</div>
<div>
<h3>...</h3>
</div>
it does NOT. The two h3's get the same number.
Given a structure like:
<div class="Stargate" id="MGM">
<div class="SG1">
</div>
<div id="Atlantis">
</div>
</div>
What will be SG1's and Atlantis' parent Stargate or MGM?
There's no difference, both Stargate and MGM is on the same parent div. But you'll find MGM to be the "better" or "stronger" of the two ways of identifying that div.
With "better/stronger" I mean that the id will have implications in CSS/javascript, for example, in CSS the id is stronger.
#MGM .SG1 {
/* very strong selector */
}
.Stargate .SG1 {
/* not so strong selector */
}
In javascript you have
var parentDiv = document.getElementById('MGM');
where the document.getElementById is widely supported whilst the corresponding document.getElementsByClassName is a relatively new addition to modern browsers.