I was wondering if you could assign data attributes to divs, because I am adding a fb-like-box to my html and want to customize the fb box in less, as much as possible.
It uses data-height, data-width, data-header, among others to customize the fb-like-box
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-height="300px" data-width="240px" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false"></div>
Is there a way to do something like this in less?
.fb-like-box {
.data-height(300px);
.data-width(240px);
.data-stream(true);
}
So the html could look like:
<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers"></div>
I know I could do this using js, but was wondering if it can be done using less first.
Related
I'm trying to dive into the BEM methodology. Even though it seems to be the 'must have' methodology for all project sizes, I'm kind of unhappy with it or am I just trying to use it the wrong way?
Using BEM the CSS gets divided into something like this.
.block {
/* Block code goes here */
}
.block--is-hidden {
/* Block modifier code goes here */
}
.block__element {
/* Element code goes here */
}
This seems to be pretty fine for me, as long as you do not reuse some code. Let's assume I'm using Bootstrap or any other CSS Framework/Library. Doing so I just want to use the grid. That being said my markup could look somehow like that.
<div class="container">
<div class="row">
<div class="col-xs-12">
...
</div>
</div>
</div>
According to BEM this would be a no go. Instead all the grid classes should be wrapper up in our corresponding block and element classes. A possible way to achieve this would be through SASS and it's #include. For me this basically results in redundant code.
So my question right now is. Am I missing something? I mean, using BEM while for e.g. loading Bootstraps .container code into every single of my own block styling would just result in an massive output CSS file. Is my approach correct? And if so - would I really sacrifice initial loading time just for the idea of better organized CSS and better readable markup?
Is there a reason your blocks have to begin at the container level? I'm not sure if it's a violation of BEM methodology exactly, but I personally "begin" my blocks more at the html>body>.container level. So:
<html>
<body>
<div class="container">
<div class="cheesecake">
<h1 class="cheesecake__heading"></h1>
</div>
</div>
</body>
</html
With SCSS looking something like:
.cheesecake {
&__heading {}
}
And so on.
Is there any way to select elements with same attribute value which I don't exactly have access to? I imagine doing it in way like this:
.first[attribute=.second[attribute]]
I want to use ONLY pure CSS.
no, there is no way to achieve this using css
however, if you need to do something like this you should consider changing your markup (ex. using additional classes) - css is not a programming language
CSS cannot do that. For comparing two elements you need to have access to DOM.
We cannot achieve this through css but this can be done by JavaScript:
window.onload=function(){
var attr = 'elementValue',
elements=document.querySelectorAll('.first, .second');
console.log(
elements[0].getAttribute(attr) ===
elements[1].getAttribute(attr)
);
}
<div class="first" elementValue="1">hello</div>
<div class="second" elementValue="1">hello</div>
Hope this helps
I have a coding restriction that I cannot change and trying to find a way around it, to position a div based on a non parent.
I have the following code structure, which cannot be changed:
<div class="row">
<div class="sub-row01"></div>
<div class="sub-row02"></div>
</div>
<div class="row">
<div id="sub-row03"></div>
</div>
What I am trying to do is position #sub-row03 in relation to .sub-row02. Anything that I have tried, will only allow me to position #sub-row03 in relation to first .row
Is what I am trying to achieve even possible? If so, what would be the proper way to style it?
To answer your question it is not possible with pure css since it only allows styling using the parent or a preceding child.
For example
a + b { } will style b
a ~ b { } will style b
a > be {} will style b
but there is no way to style a in these cases.
You can however do this via javascript. If you want to go this route you could do something like:
document.getElementById("sub-row03").style.left = document.getElementById("sub-row02").offset().left;
I can write something a bit more concrete if necessary as I have not tested it but it should help with the basic concept.
margin-left: 100 + 20%;
I want to do something the same as above. But CSS does not have any format. How can I successfully use these together ?
Without javascript? Only by wrapping that content into another element (usually <div>) and splitting that margin to two elements.
Something like:
<div style="margin-left:20%">
<div style="margin-left:100px">
<!-- content -->
</div>
</div>
Hi there and welcome to StackOverflow. Unfortunately CSS doesn't have this (good) behaviour, but LESS will. For a JavaScript implementation, look here. If you want a PHP implementation, look here. You may be confused as to why I'm talking about JS and PHP, but what LESS will do is take your .less file and turn it into a vanilla CSS file, either on the client (JS), or on your server (PHP).
This is NOT a question about how to create columns in css - so please dont give me any css for doing that. I've just excluded it here for readability.
I have created two columns in css and I want to place items in them based upon some css class. I think this is possible but I'm not sure how.
<DIV id="col1">
<!-- I want to display everything with 'women' here -->
</DIV>
<DIV id="col2">
<!-- I want to display everything with 'men' here -->
</DIV>
<!-- this content is dynamically generated in a loop (PHP/ASP.NET)-->
<DIV id="products">
<DIV class="women">
Women's product 1
</DIV>
<DIV class="men">
Men's product 1
</DIV>
<DIV class="men">
Men's product 2
</DIV>
</DIV>
Edit: Just to be sure I don't want to duplicate the product list into col1 and col2. i want to move them. I only want once visible copy of each item.
So I have two columns - or areas on the page - whatever - doesn't matter for this.
I want to use css to take everything under .products.women and put it in column 1.
I want to use css to take everything under .products.men and put it in column 2.
How can I do this. These kinds of things are about my limit to css, but I know theres some cleverness I can use.
Currently I'm rendering into the columns in two separate for loops. I want to get away from this for two reasons :
I dont want to maintain 2 identical for loops - nor move that logic elsewhere
I want to make an 'iphone' friendly version and i figure this will make that easier.
You can't do precisely what you're asking for with CSS. But you can do .women { float: left } .men { float: right}, which may be just about as good.
This is kind of a band-aid on your fundamental problem, though, which is failure to separate your presentation logic from your control logic. Instead of having two identical for loops in your presentation logic, you should have one for loop outside of it that builds two arrays, then your presentation logic should use each the way that would actually be beneficial to it.
CSS it's a language used to describe the presentation of the (existing) content. You are
asking for programaticaly DUPLICATE or COPY some of that content.
You can either use ASP/PHP whatever languaje of choice to generate multiple copies of that content, or use javascript to copy-move-change it.
Actually javascript seems to fit your scenario.
EDIT: you have a similar previous question here: using css to duplicate html elements
Interestingly (but, at this point, completely uselessly), this is not only possible in the current draft of the CSS3 Advanced Layout Module (aka Template Layout), but the spec contains an example showing how to do exactly that (last example in section 3.4). So if you can stand to wait a fifteen years or so...