I'm having problem with integration of zen-grids into drupal. I have installed sass and compass and using them. Then I created a content type with 3 fields. That give me structure in html like that:
<article class="node-1 node node-layout1 node-promoted view-mode-full clearfix" typeof="sioc:Item foaf:Document" about="/node/1">
<div class="field field-name-field-topleft field-type-text-long field-label-above">
<div class="field field-name-field-topmid field-type-text-long field-label-above">
<div class="field field-name-field-topright field-type-text-long field-label-above">
</article>
Then I tryied to use zen grids to create layout like that:
topleft___________topmid_______________topright
So I used that code:
$zen-column-count: 5; // Set the total number of columns in the grid.
.node-layout1{
max-width:1200px;
#include zen-grid-container; // Apply this mixin to the container.
}
.field-name-field-topleft {
#include zen-grid-item(2, 1);
}
.field-name-field-topmid {
#include zen-grid-item(1, 2);
}
.field-name-field-topright {
#include zen-grid-item(2, 3);
}
All works kinda ok I get all 3 elements in line but their widths and offsets are way too large, topmid starts where topright should finish, so my page is way too large after that.
Here is css i get generated from compass for all 3 elements:
.field-name-field-topleft {
float: left;
margin-left: 0;
margin-right: -200%;
width: 200%;
}
.field-name-field-topmid {
float: left;
margin-left: 100%;
margin-right: -200%;
width: 100%;
}
.field-name-field-topright {
float: left;
margin-left: 200%;
margin-right: -400%;
width: 200%;
}
I found out that the problem is in
$zen-column-count: 5;
not getting applied, it was set at start to 1 and seems that I can't change it.
It sounds like a problem with compass 1.0, as documented here:
https://github.com/JohnAlbin/zen-grids/issues/68
A fix is to add $zen-float-direction, $zen-column-count to your zen-grid-item call, i.e.
#include zen-grid-item(2, 1, $zen-float-direction, $zen-column-count);
use !global at the end of "$zen-column-count: 5" fixed it for me. it seems you must force zen to use new variable.
$zen-column-count: 5 !global;
https://www.drupal.org/node/2346291#comment-9475791
Related
I have code like this
<div class="chatlist-container chatlist-container_hidden">
<div class="container-header">
<span class="chatlist-title">
</span>
<div class="container-header__button">
<span class="icon-minus"></span>
</div>
<div class="container-header__button">
<span class="icon-cancel"></span>
</div>
</div>
<dl class="chatlist-container__chatlist">
<div class="chatlist-container__chatgroup">
<p ...
<div ...
</div>
<div class="chatlist-container__chatgroup">
</div>
<div class="chatlist-container__chatgroup">
</div>
</dl>
</div>
Where chatlist-container is a main container, then goes container-header , which can be reused in another containers, so he named without dependency chatlist-container__, then goes chatlist-container__chatlist, which exists only inside chatlist-container so he named with his dependency, and then goes chatlist-container__chatgroup, groups which can repeat but only exists inside chatlist-container, how to name their childs, with or withoud dependency of chatlist-container ?
I imagine this like chatlist-container__chatgroup-title and chatlist-container__chatgroup-description, right? But if so, if description will have and childs later, their naming can be very tricky and long.
Also, if so, how to write css, now it looks like:
.chatlist-container { ...
.chatlist-container .chatlist-container__chatlist { ...
.chatlist-container .chatlist-container__chatlist .chatlist-container__chatgroup { ...
But if i add child elements to my groups, their selectors are getting kilometer long, and looks like this
.chatlist-container .chatlist-container__chatlist .chatlist-container__chatgroup .chatlist-container__chatgroup-title { ...
A different approach to the naming could be taken, if you so desired.
You mentioned that other containers exist, and that chatlist_container is only one type of a container, which makes me think that perhaps there should be a container class somewhere with the chatlist version being a modifier, i.e. container--chatlist.
Also, in my opinion, just because chatgroup currently only exists within the chatlist container doesn't mean that it has to have the container's name prefixed to it. Giving it a name like chatgroup allows it to be used outside of the container at some point perhaps. Then any of its children only need to have chatgroup prefixed to their names.
This is not an answer, as you know what you are building far more than any of us here, but perhaps these thoughts might lead you to rethinking the current naming scheme and thus making things easier for yourself.
If maintainability is the issue, i'd suggest using a preprocessors such as sass would help out.. Sass has a functionality with nesting and using the & sign to avoid long rules, pseudo example code:
.wrapper {
height: 100%;
.b-header {
display: flex;
background: #F5F5F5;
flex-direction: column;
padding: 0 2rem;
margin-top: 2rem;
&__about {
width: 100%;
padding: 2rem;
word-wrap: break-word;
.title {
font-size: calc(1.5rem + 3vw);
margin-bottom: 5rem;
}
.job {
font-size: calc(1.8rem + 3vw);
margin-bottom: 1.5rem;
}
.cv {
display: inline-block;
font-size: calc(0.5rem + 3vw);
margin: 3rem 0;
}
}
&__image {
img {
min-width: 100%;
max-width: 100%;
}
}
}
}
I'm using a custom 12-column grid and given a row like:
<div class="row">
<div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div>
<div id="the-violet" class="lg-6 md-12 sm-12"><!-- content --></div>
</div>
I'm trying to get this behaviour: On medium and small devices each block will be 12-columns width but, by default, #the-violet will fall below #the-pink. I'd like the opposite, that's #the-violet above #the-pink.
My current (simplified) SCCS is:
.row {
#include clearfix;
[class*="lg-"],
[class*="md-"],
[class*="sm-"] {
float: left;
}
}
.lg-6 {
width: 50%;
}
.md-12 {
#include respond-to("medium") {
width: 100%;
}
}
.sm-12 {
#include respond-to("small") {
width: 100%;
}
}
I'm assuming clearfix and respond-to mixins are well-known.
I've made and approach with fixed height giving my row a class named reversed like (Fiddle):
.reversed {
position: relative;
#include respond-to("small" "medium") {
.sm-12,
.md-12 {
position: absolute;
top: 0;
&::first-child {
top: 200px;
}
}
}
}
But, I'd like to know if anyone has faced this need before and has another approach to solve it in a clean way (without fixing height).
You could use float: right on them and write them in the reverse order in the HTML.
I'm looking for the simplest way to break up a collection of inline-blocked divs without resorting to extra markup (such as br).
I started off naively thinking that the following would do the trick except that 'four' ends up on a line of its own as well which I don't really understand.
.inline {
display:inline-block;
}
.newline {
display:block;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
I have tried solutions using :after/:before found here on Stackoverflow but these only work for me if my elements are inline instead of inline-block.
Regrettably I also need to support IE6!
Attempt with floats
This example below does not display properly in IE 6
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.newline {
clear: left;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
The result in IE 6
For IE6 and other old browsers you need to add a clear line for example using this code:
<div class="inline">one</div>
<div class="inline">two</div>
<div class="visualClear"></div>
<div class="inline">three</div>
<div class="inline">four</div>
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.visualClear {
clear: both;
display: block;
}
I know that it isn´t very pretty but it will work for you.
I have one element
HTML
<div class="content col-md-10 col-md-offset-1">
</div>
What i need in LESS i something like this
.content{
.col-md-10;
.col-md-offset-1;
}
That later i can use shortner code like this
<div class="content col-md-10 col-md-offset-1">
</div>
I know i must use only content like this
<div class="content">
</div>
I have tried something like this but does not work?
.content{
.make-md-column(10);
.make-md-offset(1);
}
Update
It's called make-md-column-offset not make-md-offset
Running the following through any Online Less Compiler should work:
#grid-gutter-width: 30px;
#screen-md-min: 992px;
#grid-columns: 12;
// Generate the medium columns
.make-md-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
// Calculate width based on number of columns available
#media (min-width: #screen-md-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(#columns) {
#media (min-width: #screen-md-min) {
margin-left: percentage((#columns / #grid-columns));
}
}
.content{
.make-md-column(10);
.make-md-column-offset(1);
}
Original
My guess would be you have something missing from the build process like importing the mixin functions or variables.
Here is the section on bootstrap grid mixins:
http://getbootstrap.com/css/#grid-less
Here is a Example Usage:
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
So your syntax looks fine. I'd make sure you don't have any build errors.
I am playing around with a site that has an image of a 600px by 600px grid of 9 squares in its own div. I wanted to be able to highlight each grid square on hover and I have succeeded, but I would like to know if my code could be more compact.
for instance my highlight behavior never changes, but the way I am coding it I would need to code 9 of them for each square, how can I just have one and apply it to all the grid squares?
here is the code.
#theGrid
{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}
#square1
{
top:7px;
left:7px;
width:200px;
height:200px;
background-color:transparent;
}
#square1:hover
{
background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);
}
Thanks all.
It doesn't matter weather you use class or id or not on your solution but there is a proper way in the long run. What matters is that you can use the same style name on each square. So, it would be square and not square1, 2, 3, ect... We use class for an object that is repeated on the same page multiple time and id for an object that happens one time.
Is is a quick reference I found: http://www.htmldog.com/guides/css/intermediate/classid/
here is the code that I would start using.
You will need to use float and then use a clear:both when you are on a new row.
<div id="outterWrapper">
<div id="theGrid">
<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="clear"></div>
<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="clear"></div>
<div class="square"></div><div class="square"></div><div class="square"></div>
</div><!-- END THE GRID -->
</div><!-- END OUTTER WRAPPER -->
#theGrid{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}
/*Here we use class to reference all the squares*/
.square {
margin: 7px 0 0 7px; /* play with your positioning here. Can also use padding*/
width:200px;
height:200px;
background-color:transparent;
float:left; /*This will make all the boxes move next to each other*/
}
.square:hover {
background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);
}
.clear {
clear:both;
}
Instead of using # for both #square1 & #square1:hover, you could use .square1 & .square1:hover.
The # character is used for IDs ( ie. <span id="square1"></span> )
The . character is used for classes ( ie. <span class="square1"></span> )
Then apply the class ".square" to each of the nine squares. Any square with the .square class will have that style applied to it. Same goes for the hover.
Otherwise, if that doesn't work for you... you could do it in javascript by added a onmouseover and onmouseout events to each square. Then have javascript functions that handle applying the styles dynamically from code.
For example:
<div id="square1" onmouseover="handleMouseOver('square1')" onmouseout="handleMouseOut('square1')"></div>
<script>
function handleMouseOver(sq)
{
// set style
}
function handleMouseOut(sq)
{
// set style
}
</script>
You could use class instead of id
Oh, sorry I misunderstood what you want, you can just do like this
#square1:hover, #square2:hover, #square3:hover.......
{
background: yellow;
}