Reordering columns in a semantic-ui stackable grid - html

I am currently playing around with the Sementic-UI framework responsive capabilities and I hit a wall when using the stackable grid. Specifically, I was trying to replicate a classic front page layout where large paragraphs and pictures are layout in one third and two thirds columns, alternating left and right.
<div class="ui stackable grid">
<div class="sixteen wide column">
<h2>Full width header</h2>
</div>
<div class="six wide column">
<img alt="Left image" />
</div>
<div class="ten wide column">
<p>Right content</p>
</div>
</div>
<div class="ui stackable grid">
<div class="sixteen wide column">
<h2>Full width header</h2>
</div>
<div class="ten wide column">
<p>Left content</p>
</div>
<div class="six wide column">
<img alt="Right image" />
</div>
</div>
I repeat this pattern for all sections and swap the two side by side columns every time. The thing is, when the grid is stacked, I would like to keep the image on top of the content. It works fine for the first case because the columns are already in the right order, but obviously fail for the second block since the image is placed after the content.
I was wondering if there is an easy way to accomplish this or can it only be done using javascript? Should I keep using the grid or should I use something else? If I need to use javascript, what would be the best way to detect the grid's layout change?
This is my first time doing responsive design so references on the topic are welcomed.

This is possible using the reversed variation of the grid element. I would suggest the following for the second grid:
<div class="ui stackable grid">
<div class="row">
<div class="sixteen wide column">
<h2>Full width header</h2>
</div>
</div>
<div class="computer reversed row">
<div class="six wide column">
<img alt="Right image" />
</div>
<div class="ten wide column">
<p>Left content</p>
</div>
</div>
</div>
Putting the image first by default and only reversing on computer screen sizes minimises the risk that the image can be at the end with columns stacked. It leaves the possibility of screen sizes where the image appears to the left before the columns have stacked, but this should be less serious an issue.

Related

How can I use a Grid inside a Block Grid Column in Foundation 6?

I would like to have a responsive list of items, dynamically fetched from the server (so the number of items is unknown).
According to Foundation 6, the block grid is the way to go. I have used the block grid successfully to show images, but when I try to create a grid inside a block grid column, it doesn't look too good.
Here is my code:
<div class="foods row small-up-1 medium-up-3 large-up-4">
<div class="food column">
<div class="row">
<div class="small-6 medium-4 large-3 columns picture ar-wrapper ar-4-3">
<div class="ar-container">
</div>
</div>
<div class="small-6 medium-8 large-9 columns data">
<div class="row">
<div class="small-12 columns title">
</div>
</div>
<div class="row">
<div class="small-12 columns description">
</div>
</div>
<div class="row">
<div class="small-12 columns restaurant-name">
</div>
</div>
</div>
</div>
</div>
</div>
None of the additional classes interfere with the width of change any float settings.
The result looks like this:
The tall block on the left is the "large-3 columns" element and the selected (blue-ish) element is the "large-9 columns" large div (it's made on a large screen). So by the looks of it, the block grid column has more than 12 simple grid columns.
I appreciate any help or alternative solutions on how to solve this.

Having an aside column drop below previous aside

I'm just dabbling into CSS and HTML. At the moment I have an a <article> inside that column should have two items, a picture on the left, and article information on the right(header, and paragraph). It appears okay when the screen is enlarge but if the screen shrinks the image and the text shrinks. Instead of shrinking I'm looking for the image to retain it's size and the text to drop below the image.
http://codepen.io/anon/pen/Yygdjv
<div class="container-fluid">
<div class="row">
<aside class="col-sm-1">
</aside>
<section class="col-sm-7">
<article>
<div class="row">
<aside class="col-xs-6">
<img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200"/>
</aside>
<aside class="col-xs-6">
<div id="DIV___5">
<span id="SPAN___6"> Basketball</span>
<h2 id="H2___8">
What really Matters
</h2>
<span id="SPAN___10">November 12, 2015</span>
<p id="P___11">
Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! Read More
</p>
</div>
</aside>
</div>
</article>
</section>
</div>
</div>
This is a twitter bootstrap 3 question. You can achieve this be changing your col-xs-6 to col-sm-6 or col-md-6 for both columns. After the sm or md breakpoint (whichever you go with), it will make the two columns full width and the image will naturally be on top. You can be more explicit with class="col-xs-12 col-sm-6" for both columns, but it's not really necessary.
Fork of your demo: http://codepen.io/anon/pen/GpezRL
You Can Also Use #media rule(optional) like-
#media (max-width:580px)
{
.col-xs-6 {
width: 50%;
clear: both;
}
}

Bootstrap confusion about grids

I am trying to convert my non responsive site to responsive using bootstrap. I am starting with the top banner. It is 1000px * 400 px. It has a login link on top right. Below that on the left there is a site title saying(my website title: slogan). And below that on the right there is search. I am able to implement it but confused about how to do it. My site is fixed container 1024px.
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">Login links</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:left;">Site banner title</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">search box</p>
</div>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
I have few doubts? Like is it okay to give three rows directly inside one row or should
I give an intermediate col-md-12 like given above?
Is this code the right way to do what I am trying to achieve or is there a better way and is this correct from
bootstrap rules.. I am new to bootstrap and I feel guilty I am not abiding by rules.
Like I mentioned in the comment, your nesting is correct but may be extraneous.
Simplified Markup
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="clearfix">
<p class="pull-right">Login links</p>
</div>
<div class="clearfix">
<p class="pull-left">Site banner title</p>
</div>
<div class="clearfix">
<p class="pull-right">search box</p>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
To answer your question in the above comment:
is it necessary for col-md-* inside every row to add up to 12?
That is almost correct, the sum of col-md-* should not exceed 12 within a row in order to maintain the desired column layout on medium device resolution.
Note about offsets:
if you're using col-*-offset-*, make sure the sums of the cols and offsets does not exceed 12 within a row.

Bootstrap, spanning two rows with an image while retaining responsiveness

I'm attempting a layout in bootstrap that is positioned using the following image.
I have two rows, the top half and the bottom half both containing two separate background gradients. The rows are both divided into 50% wide columns, with the right-most columns containing content and the left-most columns containing a single image.
My problem is that I'm unsure of how to get an element to span two rows vertically while still retaining it's fluid layout. I've positioned it absolutely but once the window scales down it doesn't stack properly. My layout is as follows. Getting rid of the rows and splitting the page into two vertical columns results in me being unsure of how to split the background into two separate horizontal gradients. Any help would be appreciated. Thanks!
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
<img src="wooo-im-an-image">
</div>
<div class="col-md-6">
content of a mostly blabberous nature here
</div>
</div>
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
emtpy
</div>
<div class="col-md-6">
more content of a mostly blabberous nature here
</div>
</div>
I'm not sure if I quite understand but I did put together an example using your picture. Pardon the CSS skills and let me know if it helps you.
<div class="row gradient">
<div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
</div>
</div>
Live Demo
http://www.bootply.com/116896

How can I push a div inside the profoundgrid "responsive fluid" style to the right?

I'm using the profound grid framework to build responsive fluid grid layout. Basically what I want to achieve is to create a layout containing 6 colums of which the menu container is on the left with 1 column width and the content is on the right with 5 columns width. Inside the content I have a nested grid that is also fluid.
I have the grid working as the responsive fluid example which can be found here: http://www.profoundgrid.com/examples/fluidresponsive.html
The scss code I have looks like this:
#row{
div{#include column(6);}
.col1{#include column(2);}
.col5{#include column(10);}
#include generate_grid_positions(div, 1);
}
The HTML looks like this:
<article id="row">
<div id="menuContainer" class="col1">Menu <br />menu <br />menu</div>
<div id="contentContainer" class="col5">
<div id="projectContainer">
<div class="project">project1</div>
<div class="project">project2</div>
<div class="project">project3</div>
<div class="project">project1</div>
<div class="project">project2</div>
<div class="project">project3</div>
</div>
<div id="socialContainer">sadfgsdfg</div>
</div>
</article>
What I have right now is a fluid responsive grid, but both divs get stacked upon eachother. I would like to know how to push the content 2 columns to the right.
Like this :
<article class="grid1">
<div class="col2 push0">menu</div>
<div class="col2 push2">c1</div>
<div class="col2 push4">c2</div>
<div class="col2 push6">c3</div>
<div class="col2 push8">c4</div>
<div class="col2 push10">c5</div>
</article>
merge the 5 right columns :
<article class="grid1">
<div class="col2 push0">menu</div>
<div class="col10 push2">5 times width</div>
</article>
And to make sure you learn not much (becoz it's copy pasted from your OP link), YOUR solution is :
<article>
<div class="col3">left</div>
<div class="col9 push3">right</div>
</article>