Archive

Archive for the ‘Design’ Category

Responsive Design 2


<header>
Responsive Flexbox Grid
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

*
{
margin: 0;
padding: 0;
@include box-sizing(border-box);
}

body
{
padding: 5%;
font-family: ‘Open Sans’;
font-size: 1em;
}

.container
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
-ms-flex-direction: row;
-ms-flex-wrap: wrap;
flex-flow: row wrap;
margin: 0 auto;
max-width: 1000px;

@media (max-width: 700px)
{
-webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; -ms-flex-direction: column; -ms-flex-wrap: wrap; flex-flow: column wrap;
}
}

.header
{
padding: 1em 0.5em;
width: 100%;
height: 100px;
background: #cdc9bb;

@media (max-width: 700px)
{
-webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2;
}
}

.content
{
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 1em;
background: #e7e3d4;

@media (max-width: 700px)
{
-webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3;
}
}

.nav
{
width: 200px;
padding: 1em 0.5em;
background: #eceae4;

@media (max-width: 700px)
{
-webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; width: 100%;
}
}

.aside
{
width: 140px;
padding: 1em 0.5em;
background: #f8f8f6;

@media (max-width: 700px)
{
-webkit-box-ordinal-group: 4; -moz-box-ordinal-group: 4; -ms-flex-order: 4; -webkit-order: 4; order: 4; width: 100%;
}
}
</style>

</header>

<body class=”HolyGrail”>
<div class=”container”>

<header class=”header” role=”banner”>
<h1>Test1</h1>
</header>

<nav class=”nav” role=”navigation”>
<h3>Test2</h3>
</nav>

<section class=”content” role=”main”>
Test3
</section>
<!– END .content –>

<aside class=”aside”>
<h4>Test4</h4>
</aside>

</div>
<!– END .container –>
</body>

Categories: Design Tags:

Responsive Design


Responsive Design

<!doctype html>
<html lang=”en”>
<head>
<title>Flexbox Layout Demo</title>

<meta charset=”utf-8″>
<meta name=”description” content=”” />

<style>
/* SECTIONS */
.section
{
clear: both;
padding: 0px;
margin: 0px;
}

/* COLUMN SETUP */
.col
{
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}

.col:first-child
{
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after
{
content: “”;
display: table;
}

.group:after
{
clear: both;
}

/* GRID OF THREE */
.span_3_of_3
{
width: 100%;
}

.span_2_of_3
{
width: 66.1%;
}

.span_1_of_3
{
width: 32.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px)
{
.col
{
margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px)
{
.span_3_of_3
{
width: 100%;
}

.span_2_of_3
{
width: 100%;
}

.span_1_of_3
{
width: 100%;
}
}
</style>

</head>
<body>

<div class=”section group”>
<div class=”col span_1_of_3″>
This is column 1
</div>
<div class=”col span_1_of_3″>
This is column 2
</div>
<div class=”col span_1_of_3″>
This is column 3
</div>
</div>
</body>

</html>

 

how it works:

http://www.responsivegridsystem.com/

Categories: Design Tags:

Flexbox Design

Categories: Design Tags:

Working with flexbox

Categories: Design Tags:

Responsive web design sharepoint 2013


Responsive web design sharepoint 2013

Mega Menu in SharePoint

Categories: Design Tags:

Apply CSS styles to SharePoint Web parts