I have build a Layout relying on Flexbox. On smaller screens the direction switches from "normal" to columns plus some change in ordering.
That does work in Chrome, FF. On Safari #include flex-direction(column) is creating a big mess and whole layout is thrown apart, therefor I have created a mixin like this:
#mixin flex-columns() {
#include flex-direction(column);
display: -webkit-box;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
}
That fixes the problems with IOS and looks as it should, except that #inlcude order(<n>); does not work any longer, neither on Chrome, nor on IOS, Firefox just works.
Far sake of simplicity here is a shortened version of the code:
<!-- html -->
<div class="container">
<div class="child child-1">...</div>
<div class="child child-2">...</div>
<div class="child child-3">...</div>
</div>
//Sass (compass)
div.container {
#include display-flex();
div.child-1 {
#inlcude flex(0 1 10%);
}
.
.
.
}
#media ... {
div.container {
#include flex-columns();
div.child-1 { #include order(2) }
div.child-2 { #include order(3) }
div.child-3 { #include order(1) }
}
}
Any Idea? If Safari does not support ordering if direction is set to columns, how could I exclude chrome from the safari fix (display: -webkit-box;)??
Thanks for help!
Related
I have 2 condition of layout.
(1)
(2)
I want to dynamically delete or add block 2 and switch between layouts. Is it possible to deal with it via css-grid?
CSS grid is intended to define grid layouts.
Il will allow you to define as many layouts as you want, but you will not be able to switch between layouts by relying only on CSS grids.
You will have to handle it programmatically, or by using other CSS features (like media queries, if you want layout selection based on screen width).
A way to do this is to define the grid layouts with specific CSS classes on the grid container, and switch between the classes using an external script (or a condition based on the state of your app if it's already there).
Demo :
https://jsbin.com/jolupoguni/1/edit?html,css,js,output
JS :
const toggleLayout = () => {
var element = document.getElementById("grid");
if (element.classList.contains('grid--layout-1')) {
element.classList.remove('grid--layout-1');
element.classList.add('grid--layout-2');
} else {
element.classList.remove('grid--layout-2');
element.classList.add('grid--layout-1');
}
}
CSS :
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.grid--layout-1 .block-a {
grid-column: span 12;
}
.grid--layout-1 .block-b {
grid-column: span 6;
}
.grid--layout-1 .block-c {
grid-column: span 6;
}
.grid--layout-2 .block-a {
grid-column: span 12;
}
.grid--layout-2 .block-b {
display: none
}
.grid--layout-2 .block-c {
grid-column: span 12;
}
HTML
<button onclick="toggleLayout()">Switch layout</button>
<div id="grid" class="grid grid--layout-1">
<div class="block block-a">Block A</div>
<div class="block block-b">Block B</div>
<div class="block block-c">Block C</div>
</div>
For more information about CSS grids, Wes Bos' CSS Grid course is a fantastic resource https://cssgrid.io/
I have 2 Vue components, dividing the page into 2 parts. Left side, and right side. I'm using this two on every page, like this:
<template>
<div class="page-body">
<left-side>
<p class="text" >{{ $t('about') }}</p>
</left-side>
<right-side>
<p class="slogen bottom">{{ $t('slogen') }}</p>
</right-side>
</div>
</template>
But there is a special case, when this two components should switch place, to render the right-side before the left-side, when using responsive mobile design. What would be the way to accomplish this behavior? I'm using Vue 2.3.3
This is a CSS question. Lay them out in a flexbox and use the order property in a media query to change the order.
The example below will swap the two colored areas when the display width is between 300 and 600 pixels.
.page-body {
display: flex;
}
left-side,
right-side {
background-color: #fdc;
display: block;
flex-basis: 50%;
}
right-side {
background-color: #cdf;
text-align: right;
}
#media (min-width: 300px) and (max-width: 500px) {
left-side {
order: 2;
}
}
<div class="page-body">
<left-side>
<p class="text">{{ $t('about') }}</p>
</left-side>
<right-side>
<p class="slogen bottom">{{ $t('slogen') }}</p>
</right-side>
</div>
If you use Vuetify, you can easily do that with the order property:
<v-row>
<v-col class="col-11 col-md-6" order-md="2">
<p>On mobile: on the left; otherwise on the right</p>
</v-col>
<v-col class="col-11 col-md-6" order-md="1">
<p>On mobile: on the right; on tablet/desktop(-> md) on the left</p>
</v-col>
</v-row>
Without flex, you can achieve this with floats, here is short example:
.right, .left {
box-sizing: border-box;
border: black 1px solid;
width: 50%;
height: 130px;
}
.left {
float: left;
}
.right {
float: right;
}
#media (max-width: 768px) {
.left, .right {
float: none;
width: 100%;
}
}
<div class="right">
second
</div>
<div class="left">
first
</div>
If anyone uses vuetify and wants to change the order of appearance of v-flex elements
In Large Display, i.e. Tablet to Laptop:
Use a scoped css like the following to reverse the order row-wise |A|B| will become |B|A|:
.layout.row.wrap {
flex-direction: row-reverse;
}
In Mobile View, changing the order of column:
Should use a scoped css such as follows to reverse the order when they are shown in a mobile devices:
#media (max-width: 425px) {
.layout.row.wrap {
flex-direction: column-reverse;
}
}
Here, max-width can be set to any convenient value to meet the requirement. If only in one layout the reverse ordering is needed but normal order in all other cases, then the specific layout can be separated in a component where this custom styling may be applied.
More about Ordering Flex Items
Is there a recommended way to get an image to be 100% of the height of a column in Neat based on the size that the text makes the column? I've attached an example of what I'm trying to accomplish below.
I'm trying to make the image fill the 1/3 column it is placed in with object-fit: cover, the problem is that because the height of the container isn't set, it doesn't know what to fit the image to.
Image With No Height Set
If I put the image in a div with display: flex; and height:100%, the height gets set to the height of the image, when I want it to get set to the height of the parent, which is the grid-container that has the two columns in it.
Image With 100% Height Set
What I'm trying to accomplish is have a responsive image that constantly fills the space of its column to match the height of the text in the next column.
I should note that I'm trying to accomplish this without setting a specific height for the parent container such as height:200px, I want the height to be fluid to the content in it.
HTML Code:
<section class="image-block" style="background: #5777e0; color:#fff;">
<div class="one-thirds-column-full no-padding third-image-box">
<div class="flex">
<img src="https://unsplash.it/1600/1200?image=148" />
</div>
</div>
<div class="two-thirds-column-full">
<div class="text">
<h2>1/3 Image on Left with 2/3 Text on Right</h2>
<p>
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's
keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.
</p>
</div>
</div>
</section>
CSS:
section {
#include grid-container;
#include grid-media($neat-small) {
#include grid-container($neat-small);
}
#include grid-media($neat-medium) {
#include grid-container($neat-medium);
}
#include grid-media($neat-large) {
#include grid-container($neat-large);
}
#include grid-media($neat-larger) {
#include grid-container($neat-larger);
}
#include grid-media($neat-super) {
#include grid-container($neat-super);
}
}
.one-thirds-column-full {
#include grid-column(1, $neat-grid-full);
padding:1em;
#include grid-media($neat-medium-full) {
#include grid-column(2);
}
#include grid-media($neat-large-full) {
#include grid-column(4);
}
}
.two-thirds-column-full {
#include grid-column(1, $neat-grid-full);
padding:1em;
#include grid-media($neat-small-full) {
#include grid-column(2);
}
#include grid-media($neat-medium-full) {
#include grid-column(4);
}
#include grid-media($neat-large-full) {
#include grid-column(8);
}
}
.image-block{
background: #fff;
text-align: left;
.third-image-box{
height:auto;
}
.half-image-box{
height:auto;
}
.flex{
display:flex;
height:100%;
}
img{
height:auto !important;
object-fit: cover;
}
}
.text{
max-width:$max-text-width;
}
There is a bug in the documentation and grid-container does not require or need access to the grid so you can shorten the first part to ⤵
section {
#include grid-container;
I don't think you need that much markup in the html around the img. You may be able to just do
<section class="image-block">
<img src="https://unsplash.it/1600/1200?image=148" class="one-thirds-column-full">
<div class="two-thirds-column-full">
…
</div>
</section>
and then the css would be like…
.image-block{
align-items: stretch;
display: flex;
}
align-items: stretch will cause both objects to fill the vertical space. The rest is up to object-fit: cover, etc
I have the following SASS structure
.entry {
//some styles here
.banner {
border:4px solid red;
.position {
display: inline-block;
}
}
}
And in html
<div class="entry">
<div class="banner>
<div class="position"></div>
</div>
</div>
Now I want to change the style of .banner and .position when an extra class is added to the entry.
<div class="entry team1">
<div class="banner>
<div class="position"></div>
</div>
</div>
This is a problem I have encountered lots of times and have never found a clean way to do it, the & operator or the #extend could be options but ideally I would like to group all the styles which have the same class.
Any suggestion on how I could write this pattern as efficiently as possible would be appreciated?
Well I would suggest something like that:
.entry {
.banner { /* defaults */ }
&.team1 {
.banner {
/* changes */
.position { /*changes */}
}
}
}
As far as I know, it is not possible to »traverse up the tree« in css, so it wont in scss either.
Another thing that comes to my mind is the #at-root what moves the rule to the root of the generated css. But all in all this will result in a »global« class definition, so I guess that is not what you want.
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.