responsive
@ auxmoney
<!DOCTYPE html>
<!--[if lte IE 8]> <html lang="{{ lang }}" class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]> <html lang="{{ lang }}" class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="{{ lang }}" class="no-js"> <!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<!--[if lte IE 8]>
<link rel="stylesheet" href="{{ asset('bundles/auxmoneymain/css/main-responsive-fallback.css') }}">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" data-is-responsive="true" href="{{ asset('bundles/auxmoneymain/css/main-responsive.css') }}">
<!--<![endif]-->
<script src="{{ asset('External/js/modernizr.custom.min.js') }}"></script>
<script src="{{ asset('External/js/picturefill.min.js') }}" async></script>
</head>
<body>
<header class="mainHeader">
</header>
<div class="wrapper">
<h1 class="headline">{% block pageTitle %}{% endblock %}</h1>
<main class="mainContent">
{% block body %}
<article class="pageType {% if block('sidebar') %}pageType-withSidebar{% endif %}">
<div class="pageType--main">
{% block mainContent %}
Main Content to be placed
{% endblock %}
</div>
{% if block('sidebar') %}
<aside class="pageType--sidebar">
{% block sidebar %}{% endblock %}
</aside>
{% endif %}
</article>
{% endblock %}
</main>
</div>
{% block footer %}{% include 'AuxmoneyMainBundle:includes:footer.html.twig' %}{% endblock %}
</body>
</html>@charset "UTF-8";
/* main-responsive.scss */
// compiling settings
$responsiveLayout: true;
// all partials necessary for classic layout
@import "main-imports-cl";
@charset "UTF-8";
/* main-responsive-fallback.scss */
// compiling settings
$responsiveLayout: true;
$mediaQuerySupport: false;
// all partials necessary for classic layout
@import "main-imports-cl";
@charset "UTF-8";
/* ------------------------------ */
/* ***** config ***** */
/* ------------------------------ */
// default variables
// for different compiling settings
// default values go through
// if value isn't set anywhere else
$responsiveLayout: false !default;
$mediaQuerySupport: true !default;/* _global-mixins.scss */
@mixin aux-breakpoint($point1, $point2:0) {
@if $mediaQuerySupport and $responsiveLayout {
@if $point2 == 0 {
@media screen and (min-width:$point1) {
@content;
}
}
@else if $point2 == max {
@media screen and (max-width:$point1 - 1px) {
@content;
}
}
@else {
@media screen and (min-width:$point1) and (max-width:$point2 - 1px) {
@content;
}
}
}
@else {
// only definitions with min-width are added for desktop layout
@if $point2 == 0 {
@content;
}
}
}/* ------------------------------------------------------------------------ */
/* ***** media query defaults ***** */
/* ------------------------------------------------------------------------ */
$mq-xxsmall: 180px;
$mq-xsmall: 290px;
$mq-small: 360px;
$mq-smallMedium: 480px;
$mq-medium: 768px;
$mq-mediumLarge: 940px;
$mq-large: 1024px;
// special breakpoint: major switch of main navigation in layout + behaviour
$mq-mainNav: 650px;
// special breakpoint: width of website wrapper -> max width of website
$mq-wrapper: 1040px;
/**
* common.js
*
*/
var AUX = {
mqMainNav : 'screen and (min-width: 650px)',
mqMedium : 'screen and (min-width: 768px)'
};
/* e.g. navigation.js */
if (Modernizr.mq(AUX.mqMedium)) {
// larger screens only
}
/* responsive images */
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
{# first matching source element will be used, so put large sizes with min-width first (reverse way as in CSS) #}
<source srcset="logoWithClaim.svg" media="(min-width: 768px)">
<source srcset="logoWithClaim_280.png" media="(min-width: 768px)">
<source srcset="auxmoney-white.svg" media="(min-width: 160px)">
<!--[if IE 9]></video><![endif]-->
<img src="/bundles/auxmoneymain/images/logos/auxmoney-white_120.png" alt="logo">
</picture><div class="grid">
<div class="
grid--size1of3
grid--mediumSize1of4
grid--largeSize1of6
grid--rowStart
">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</div>
<div class="
grid--size2of3
grid--mediumSize1of2
grid--rowEnd
">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>@charset "UTF-8";
/**
* global grid styles
*/
/* -------------------------------------------------------------------------- */
/* ***** placeholders ***** */
/* USAGE: selector { @extend %placeholder; } */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* ***** grid container ***** */
/* -------------------------------------------------------------------------- */
.grid {
// @include container(100%);
@extend %clearfix;
}
/* -------------------------------------------------------------------------- */
/* ***** sub elements ***** */
/* -------------------------------------------------------------------------- */
// base sizes (small displays)
@include with-layout(12 .75) { // 12 columns + 0.75% gutter width
.grid--size1of2 { @include span(6); }
.grid--size1of3 { @include span(4); }
.grid--size2of3 { @include span(8); }
.grid--size1of4 { @include span(3); }
.grid--size3of4 { @include span(9); }
// grid classes specific for mq-smallMedium size
@include aux-breakpoint($mq-smallMedium) {
.grid--smallMediumSize1of2 { @include span(6); }
.grid--smallMediumSize1of3 { @include span(4); }
.grid--smallMediumSize2of3 { @include span(8); }
.grid--smallMediumSize1of4 { @include span(3); }
.grid--smallMediumSize3of4 { @include span(9); }
}
}
// sizes dependant on different column contexts (when screensize ist wide enough)
// needed to have consistent grid over different page types + sizes
@include aux-breakpoint($mq-medium) {
.pageType--main,
.grid-fullWidth {
@include with-layout(36 2.5) { // 36 columns + 2.5% gutter width (needed to create all grid columns in template with sidebar)
.grid--size1of2 { @include span(18); }
.grid--size1of3 { @include span(12); }
.grid--size2of3 { @include span(24); }
.grid--size1of4 { @include span(9); }
.grid--size3of4 { @include span(27); }
.grid--size1of6 { @include span(6); }
.grid--size1of12 { @include span(3); }
// grid classes specific for mq-medium size
// mustn't be defined together with above styles because of order / specificity
.grid--mediumSize1of2 { @include span(18); }
.grid--mediumSize1of3 { @include span(12); }
.grid--mediumSize2of3 { @include span(24); }
.grid--mediumSize1of4 { @include span(9); }
.grid--mediumSize3of4 { @include span(27); }
.grid--mediumSize1of6 { @include span(6); }
.grid--mediumSize1of12 { @include span(3); }
}
}
.pageType-withSidebar .pageType--main {
@include with-layout(24 2.5) { // 24 columns + 2.5% gutter (add to 36 columns together with sidebar)
.grid--size1of2 { @include span(12); }
.grid--size1of3 { @include span(8); }
.grid--size2of3 { @include span(16); }
.grid--size1of4 { @include span(6); }
.grid--size3of4 { @include span(18); }
.grid--size1of6 { @include span(4); }
.grid--size1of8 { @include span(3); }
// grid classes specific for mq-medium size
// mustn't be defined together with above styles because of order / specificity
.grid--mediumSize1of2 { @include span(12); }
.grid--mediumSize1of3 { @include span(8); }
.grid--mediumSize2of3 { @include span(16); }
.grid--mediumSize1of4 { @include span(6); }
.grid--mediumSize3of4 { @include span(18); }
.grid--mediumSize1of6 { @include span(4); }
.grid--mediumSize1of8 { @include span(3); }
}
}
.pageType--sidebar {
@include with-layout(12 2.5) { // 12 columns + 2.5% gutter (add to 36 columns together with main content)
.grid--size1of2 { @include span(6); }
.grid--size1of3 { @include span(4); }
.grid--size2of3 { @include span(8); }
.grid--size1of4 { @include span(3); }
.grid--size3of4 { @include span(9); }
// grid classes specific for mq-medium size
// mustn't be defined together with above styles because of order / specificity
.grid--mediumSize1of2 { @include span(6); }
.grid--mediumSize1of3 { @include span(4); }
.grid--mediumSize2of3 { @include span(8); }
.grid--mediumSize1of4 { @include span(3); }
.grid--mediumSize3of4 { @include span(9); }
}
}
}
// grid classes specific for mq-large size
@include aux-breakpoint($mq-large) {
.pageType--main,
.grid-fullWidth {
@include with-layout(36 2.5) { // 36 columns + 2.5% gutter width (needed to create all grid columns in template with sidebar)
.grid--largeSize1of2 { @include span(18); }
.grid--largeSize1of3 { @include span(12); }
.grid--largeSize2of3 { @include span(24); }
.grid--largeSize1of4 { @include span(9); }
.grid--largeSize3of4 { @include span(27); }
.grid--largeSize1of6 { @include span(6); }
.grid--largeSize1of12 { @include span(3); }
}
}
.pageType-withSidebar .pageType--main {
@include with-layout(24 2.5) { // 24 columns + 2.5% gutter (add to 36 columns together with sidebar)
.grid--largeSize1of2 { @include span(12); }
.grid--largeSize1of3 { @include span(8); }
.grid--largeSize2of3 { @include span(16); }
.grid--largeSize1of4 { @include span(6); }
.grid--largeSize3of4 { @include span(18); }
.grid--largeSize1of6 { @include span(4); }
.grid--largeSize1of8 { @include span(3); }
}
}
.pageType--sidebar {
@include with-layout(12 2.5) { // 12 columns + 2.5% gutter (add to 36 columns together with main content)
.grid--largeSize1of2 { @include span(6); }
.grid--largeSize1of3 { @include span(4); }
.grid--largeSize2of3 { @include span(8); }
.grid--largeSize1of4 { @include span(3); }
.grid--largeSize3of4 { @include span(9); }
}
}
}
// independant of context
.grid--sizeFull {
@include full;
}
// can be used if only one element sits in a row, that is not full width
// specificity needed to work in all contexts
.grid--singleRow.grid--singleRow.grid--singleRow {
float: none;
}
// defines last element in a row without margin to the right
// specificity needed to work in all contexts + containers
.grid--rowEnd.grid--rowEnd.grid--rowEnd {
margin-right: 0;
}
// only for medium size (if in large size there mustn't be a rowEnd)
@include aux-breakpoint($mq-medium, $mq-large) {
.grid--mediumRowEnd.grid--mediumRowEnd.grid--mediumRowEnd {
margin-right: 0;
}
}
// needed to start a new row if previous row isn't full (clear previous elements)
.grid--rowStart {
@include break;
}
responsive
By phpiet
responsive
- 417
