Framework7 grid layout to include desktop view - javascript

I know that framework7 is designed for phones and tablet but is there a way to include or somehow tweak the css to make it compatible for desktop?my scenario is i have two div elements that i want to view side by side on desktop.
<div class="row">
<div class="col-50">panel-1</div>
<div class="col-50">panel-2</div>
</div>
But on tablet/phone view i want it to view both as 100%
<div class="row">
<div class="tablet-100">panel-1</div>
<div class="tablet-100">panel-2</div>
</div>
I tried below but the documentation said tablet class is for window width >= 768px, so the width is 100% even on desktop view.
<div class="row">
<div class="col-50 tablet-100">panel-1</div>
<div class="col-50 tablet-100">panel-2</div>
</div>
I am thinking of adding a custom css like desktop-XX, but how can i add it and overwrite the current grid system? Any suggestion would be great thanks in advance!

#media (min-width:768px){
.col-50{
width:50%;
}
}
this should work

Related

Bootstrap 4: switch between cols on mobile

I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)
You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..
Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation

Bootstrap 3x3 grid with Ionic

I am making an Ionic 3 by 3 even grid that fit to the screen without scrolling horizontally and vertically. I want to use bootstrap's div class.
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"><img src="/img/pic.jpg></div>
<div class="col-xs-4"><img src="/img/pic.jpg></div>
<div class="col-xs-4"><img src="/img/pic.jpg></div>
</div>
</div>
I can divide the column into three sections. I don't know how to control the rows? I only want 3 rows.
col-xs is only for Extra Small screens (<768px).
You can read more about Grid options here: http://getbootstrap.com/css/#grid-options
You can simply change your div classes into the "col-lg-4" and you will be good I think, if your screen is bigger than 1200 px.
There is so many ways to control these divs.
.container-fluid .row div
.col-xs-4
You can add another class like "mydiv" and you will be able to control it with .mydiv selector in CSS.
There is alot more ways to control these divs, so do some research, read the bootstrap website and you will be good :)

How do I get my images to responsively resize with shuffle.js?

I am using shuffle.js on my homepage and I am trying to get my images to responsively resize like in this demo the developer posted here.
Right now I am just using media queries as a workaround, but the results are far from ideal.
Note: the grid is already responsive, what I would like to see is for the images themselves to resize as well.
You must use a CSS Grid to have a nice responsive combined with Shuttle.
Note the classes .span3 and .m-span3 on element
The example of your link is using Bootstrap v2.3.2.
You can use the Twitter Bootstrap 3 which has better semantic as well, or any other grid system.
http://getbootstrap.com/examples/grid/
If you use Bootstrap 3, add the class xs-col-12 and col-4 like so:
<div id="grid" class="shuffle">
<div onclick="window.location.href = 'IEMA.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered ">
<div id="overlay">ASTON</div>
</div>
<div onclick="window.location.href = 'Aston.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered">
<div id="overlay">IEMA</div>
</div>
</div>
If you don't want to include Bootstrap, you can add http://996grid.com/ with same way, using class .grid_4 shoud be fine.
Update
I can make some adjusts for your page have a better grid with shuffle changing for this style for your items when lower than 690px:
#media only screen and (max-width: 690px)
.item {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 223px;
width: 100%;
}
}
To clarify my question: I'm not looking to resize the grid, that already works.
You have already a responsive class attached to the image's container,
I want the images themselves to resize.
then you only need to add max-width:100% to the img element.
In my case :
<figure class="xs-col-12 col-4 picture-item" data-title="The Magic Box">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img style="max-width:100%" src="/the-magic-box.png" />
</div>
</div>
<figcaption>The Magic Box</figcaption>
</figure>

To know the accurate key breakpoint in bootstrap grid system

I am using bootstrap for my home page layout. I have got one column of 9 units for my content and one 3 units column for my sidebar. The div inside the sidebar is position:fixed. For smaller screens bootstrap send my side bar to the bottom, that is ok. However, at that moment I need my sidebar position relative.
I am using JavaScript to check the width of the screen to change the position property, but I am guessing that bootstrap is going to send my sidebar to the bottom when the screen is lesser than 972px. How can I really know the accurate width which bootstrap will send my sidebar to the bottom? Appreciate any help? Thanks. Other approaches are welcome.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
<div class="content"></div>
</div>
<div class="col-md-3">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
The script:
$(document).ready(function () {
if ($(window).width() > 972) {
$('.sidebar').css('position', 'fixed');
}
});
On the Bootstrap front page it has the info for this.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
There is also the xs which is < 768px.
To get full control use all lg, md, sm and xs, and set what you want for each device/screen size.
Just using one like lg will allow things to change when resized.
Adding a Fiddle to help re your second question.
I have set up a full screen Fiddle for you, resize the window and see how the two areas stay side by side when you resize.
That is controlling it as you want I think.
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-success block">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bg-primary block">
</div>
Added
Hit F12
The bootstrap breakpoint you are using is md (Medium devices).
So when the screen width is >= 992px it will be side-by-side with your main content div. When it is <= 991px it will drop below.
http://getbootstrap.com/css/#grid

How do I selectively stack columns with twitter bootstrap

I have a template based on fluid example here:
http://twitter.github.io/bootstrap/examples/fluid.html
I have the latest files from here, the only customizations being colors:
http://twitter.github.io/bootstrap/customize.html
The basic markup is
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
Column 1
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
Column 2
</div><!--/span-->
</div><!--/row-->
</div>
Column 2 falls under column 1 on mobile devices, which is what I want sometimes. But in some cases (specific pages) I want the 2 columns to remain side by side. My question is how do I achieve this with the same js/css files?
Here's one possibility: http://jsfiddle.net/panchroma/RMPMA/
You will see that the columns don't drop on the row with class = double-col
CSS
#media (max-width: 767px){
.double-col.row-fluid [class*="span"] {
float: left;
width: 50%;
}
}
Since this resets the width of each col to 50% on viewpoints 767px and below, this will work with rows having two columns. For other combinations, simply play with the width setting. You might also want refine the padding and other styling, but easy enough now.
Hope this helps!

Categories

Resources