Minimum Bootstrap

Posted on 06/01/2016 by jacv

Custom barebone version of Bootstrap v4.

/*!
 * Bootstrap v3.3.5 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=4f64d5f4283f0ee25ee9)
 * Config saved to config.json and https://gist.github.com/4f64d5f4283f0ee25ee9
 */
/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
html input[disabled] {
  cursor: default;
}
td,
th {
  padding: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
img {
  vertical-align: middle;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
[role="button"] {
  cursor: pointer;
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
/*
    jvo added */
.wrapperFullWidth {
    width: 100%;
    max-width: 940px;
    margin: 0px auto;}
img {
    max-width: 100%;
    height: auto;}
@media (min-width: 420px) {
  .container {
    width: 400px;
  }
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-xxs-1, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xxs-2, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xxs-3, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xxs-4, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xxs-5, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xxs-6, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xxs-7, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xxs-8, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xxs-9, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xxs-10, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xxs-11, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xxs-12, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
  float: left;
}
.col-xxs-12 {
  width: 100%;
}
.col-xxs-11 {
  width: 91.66666667%;
}
.col-xxs-10 {
  width: 83.33333333%;
}
.col-xxs-9 {
  width: 75%;
}
.col-xxs-8 {
  width: 66.66666667%;
}
.col-xxs-7 {
  width: 58.33333333%;
}
.col-xxs-6 {
  width: 50%;
}
.col-xxs-5 {
  width: 41.66666667%;
}
.col-xxs-4 {
  width: 33.33333333%;
}
.col-xxs-3 {
  width: 25%;
}
.col-xxs-2 {
  width: 16.66666667%;
}
.col-xxs-1 {
  width: 8.33333333%;
}
.col-xxs-pull-12 {
  right: 100%;
}
.col-xxs-pull-11 {
  right: 91.66666667%;
}
.col-xxs-pull-10 {
  right: 83.33333333%;
}
.col-xxs-pull-9 {
  right: 75%;
}
.col-xxs-pull-8 {
  right: 66.66666667%;
}
.col-xxs-pull-7 {
  right: 58.33333333%;
}
.col-xxs-pull-6 {
  right: 50%;
}
.col-xxs-pull-5 {
  right: 41.66666667%;
}
.col-xxs-pull-4 {
  right: 33.33333333%;
}
.col-xxs-pull-3 {
  right: 25%;
}
.col-xxs-pull-2 {
  right: 16.66666667%;
}
.col-xxs-pull-1 {
  right: 8.33333333%;
}
.col-xxs-pull-0 {
  right: auto;
}
.col-xxs-push-12 {
  left: 100%;
}
.col-xxs-push-11 {
  left: 91.66666667%;
}
.col-xxs-push-10 {
  left: 83.33333333%;
}
.col-xxs-push-9 {
  left: 75%;
}
.col-xxs-push-8 {
  left: 66.66666667%;
}
.col-xxs-push-7 {
  left: 58.33333333%;
}
.col-xxs-push-6 {
  left: 50%;
}
.col-xxs-push-5 {
  left: 41.66666667%;
}
.col-xxs-push-4 {
  left: 33.33333333%;
}
.col-xxs-push-3 {
  left: 25%;
}
.col-xxs-push-2 {
  left: 16.66666667%;
}
.col-xxs-push-1 {
  left: 8.33333333%;
}
.col-xxs-push-0 {
  left: auto;
}
.col-xxs-offset-12 {
  margin-left: 100%;
}
.col-xxs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xxs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xxs-offset-9 {
  margin-left: 75%;
}
.col-xxs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xxs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xxs-offset-6 {
  margin-left: 50%;
}
.col-xxs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xxs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xxs-offset-3 {
  margin-left: 25%;
}
.col-xxs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xxs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xxs-offset-0 {
  margin-left: 0%;
}
@media (min-width: 420px) {
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
  }
  .col-xs-12 {
    width: 100%;
  }
  .col-xs-11 {
    width: 91.66666667%;
  }
  .col-xs-10 {
    width: 83.33333333%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-8 {
    width: 66.66666667%;
  }
  .col-xs-7 {
    width: 58.33333333%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-5 {
    width: 41.66666667%;
  }
  .col-xs-4 {
    width: 33.33333333%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-2 {
    width: 16.66666667%;
  }
  .col-xs-1 {
    width: 8.33333333%;
  }
  .col-xs-pull-12 {
    right: 100%;
  }
  .col-xs-pull-11 {
    right: 91.66666667%;
  }
  .col-xs-pull-10 {
    right: 83.33333333%;
  }
  .col-xs-pull-9 {
    right: 75%;
  }
  .col-xs-pull-8 {
    right: 66.66666667%;
  }
  .col-xs-pull-7 {
    right: 58.33333333%;
  }
  .col-xs-pull-6 {
    right: 50%;
  }
  .col-xs-pull-5 {
    right: 41.66666667%;
  }
  .col-xs-pull-4 {
    right: 33.33333333%;
  }
  .col-xs-pull-3 {
    right: 25%;
  }
  .col-xs-pull-2 {
    right: 16.66666667%;
  }
  .col-xs-pull-1 {
    right: 8.33333333%;
  }
  .col-xs-pull-0 {
    right: auto;
  }
  .col-xs-push-12 {
    left: 100%;
  }
  .col-xs-push-11 {
    left: 91.66666667%;
  }
  .col-xs-push-10 {
    left: 83.33333333%;
  }
  .col-xs-push-9 {
    left: 75%;
  }
  .col-xs-push-8 {
    left: 66.66666667%;
  }
  .col-xs-push-7 {
    left: 58.33333333%;
  }
  .col-xs-push-6 {
    left: 50%;
  }
  .col-xs-push-5 {
    left: 41.66666667%;
  }
  .col-xs-push-4 {
    left: 33.33333333%;
  }
  .col-xs-push-3 {
    left: 25%;
  }
  .col-xs-push-2 {
    left: 16.66666667%;
  }
  .col-xs-push-1 {
    left: 8.33333333%;
  }
  .col-xs-push-0 {
    left: auto;
  }
  .col-xs-offset-12 {
    margin-left: 100%;
  }
  .col-xs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xs-offset-9 {
    margin-left: 75%;
  }
  .col-xs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xs-offset-6 {
    margin-left: 50%;
  }
  .col-xs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xs-offset-3 {
    margin-left: 25%;
  }
  .col-xs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xs-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-pull-12 {
    right: 100%;
  }
  .col-md-pull-11 {
    right: 91.66666667%;
  }
  .col-md-pull-10 {
    right: 83.33333333%;
  }
  .col-md-pull-9 {
    right: 75%;
  }
  .col-md-pull-8 {
    right: 66.66666667%;
  }
  .col-md-pull-7 {
    right: 58.33333333%;
  }
  .col-md-pull-6 {
    right: 50%;
  }
  .col-md-pull-5 {
    right: 41.66666667%;
  }
  .col-md-pull-4 {
    right: 33.33333333%;
  }
  .col-md-pull-3 {
    right: 25%;
  }
  .col-md-pull-2 {
    right: 16.66666667%;
  }
  .col-md-pull-1 {
    right: 8.33333333%;
  }
  .col-md-pull-0 {
    right: auto;
  }
  .col-md-push-12 {
    left: 100%;
  }
  .col-md-push-11 {
    left: 91.66666667%;
  }
  .col-md-push-10 {
    left: 83.33333333%;
  }
  .col-md-push-9 {
    left: 75%;
  }
  .col-md-push-8 {
    left: 66.66666667%;
  }
  .col-md-push-7 {
    left: 58.33333333%;
  }
  .col-md-push-6 {
    left: 50%;
  }
  .col-md-push-5 {
    left: 41.66666667%;
  }
  .col-md-push-4 {
    left: 33.33333333%;
  }
  .col-md-push-3 {
    left: 25%;
  }
  .col-md-push-2 {
    left: 16.66666667%;
  }
  .col-md-push-1 {
    left: 8.33333333%;
  }
  .col-md-push-0 {
    left: auto;
  }
  .col-md-offset-12 {
    margin-left: 100%;
  }
  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-md-offset-0 {
    margin-left: 0%;
  }
}
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-pull-12 {
    right: 100%;
  }
  .col-lg-pull-11 {
    right: 91.66666667%;
  }
  .col-lg-pull-10 {
    right: 83.33333333%;
  }
  .col-lg-pull-9 {
    right: 75%;
  }
  .col-lg-pull-8 {
    right: 66.66666667%;
  }
  .col-lg-pull-7 {
    right: 58.33333333%;
  }
  .col-lg-pull-6 {
    right: 50%;
  }
  .col-lg-pull-5 {
    right: 41.66666667%;
  }
  .col-lg-pull-4 {
    right: 33.33333333%;
  }
  .col-lg-pull-3 {
    right: 25%;
  }
  .col-lg-pull-2 {
    right: 16.66666667%;
  }
  .col-lg-pull-1 {
    right: 8.33333333%;
  }
  .col-lg-pull-0 {
    right: auto;
  }
  .col-lg-push-12 {
    left: 100%;
  }
  .col-lg-push-11 {
    left: 91.66666667%;
  }
  .col-lg-push-10 {
    left: 83.33333333%;
  }
  .col-lg-push-9 {
    left: 75%;
  }
  .col-lg-push-8 {
    left: 66.66666667%;
  }
  .col-lg-push-7 {
    left: 58.33333333%;
  }
  .col-lg-push-6 {
    left: 50%;
  }
  .col-lg-push-5 {
    left: 41.66666667%;
  }
  .col-lg-push-4 {
    left: 33.33333333%;
  }
  .col-lg-push-3 {
    left: 25%;
  }
  .col-lg-push-2 {
    left: 16.66666667%;
  }
  .col-lg-push-1 {
    left: 8.33333333%;
  }
  .col-lg-push-0 {
    left: auto;
  }
  .col-lg-offset-12 {
    margin-left: 100%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-0 {
    margin-left: 0%;
  }
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
  clear: both;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Vertical center/middle align with picture

Posted on 13/08/2015 by jacv

I WP skal det være JPG billeder
Løsningen er ikke responsive

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Reference: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Viewport Sized Typography

Posted on 13/06/2015 by jacv

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side

https://css-tricks.com/viewport-sized-typography/

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

CSS: Video embed

Posted on 03/06/2015 by jacv

Responsive scale when embedding video.

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    margin-bottom: 30px;
    height: 0;}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}

Ease in

Posted on 27/01/2015 by jacv

På hover element

-moz-animation-name: easeIn;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.3s;
-webkit-animation-name: easeIn;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.3s;
animation-name: easeIn;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.3s;

Tilføjes css

@-moz-keyframes easeIn {
    0% {
        opacity: 0.0;
        filter: alpha(opacity=0);}
    100% {
        opacity: 1.0;
        filter: alpha(opacity=1);}
}
@-webkit-keyframes easeIn {
    0% {
        opacity: 0.0;
        filter: alpha(opacity=0);}
    100% {
        opacity: 1.0;
        filter: alpha(opacity=1);
    }
}
@keyframes easeIn {
    0% {
        opacity: 0.0;
        filter: alpha(opacity=0);}
    100% {
        opacity: 1.0;
        filter: alpha(opacity=1);}
}

CSS liquid design – responsive

Posted on 26/09/2014 by jacv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liquid tables with content</title>
</head>
<body>
<style>
*:before, *:after {box-sizing: border-box;}
body {margin: 0;}
h1 {font-size: 1.5em; line-height: 2em; padding: 0; margin: 0; text-align: left;}
p {font-size: 1em; line-height: 1em; padding: 0; margin: 0; text-align: left;}
div {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.bodyWrap {
    padding: 0 10px;
    background-color: #aaa;}
.pageWrap {
    max-width: 1160px;
    margin: 0 auto;
    background-color: #bbb;}
.row {
    display: table-row;
    background-color: #66ccff;}
.column {
    display: table-cell;
    border-collapse: collapse;}
.aside {
    width: 285px;
    padding-left: 10px;}
.imageList {
    width: 260px;
    padding-right: 10px;}
.imageListWrapper {
    max-width: 250px;
    height: auto;
    overflow: hidden}
</style>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Right fixed</h1>
        <div class="row">
            <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div><!-- .column -->
            <div class="column aside"><p>column + aside</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Left fixed</h1>
        <div class="row">
            <div class="column imageList"><p>column + imageList</p><div class="imageListWrapper"><img src="http://inbounder.dk/wp-content/uploads/2014/07/pelicase1510-08-300x200.jpg" class="attachment-249x166 wp-post-image" alt="Alternativ tekst" height="166" width="250"></div><!-- .imageListWrapper --></div><!-- .column -->
            <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Full width</h1>
        <div class="row">
            <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
<div class="bodyWrap"><!-- css: margin -->
    <div class="pageWrap"><!-- css: max-width + center -->
        <h1>Right fixed combined with left fixed</h1>
        <div class="row">
            <div class="column">
                <div class="row">
                    <div class="column imageList"><p>column + imageList</p><div class="imageListWrapper"><img src="http://inbounder.dk/wp-content/uploads/2014/07/pelicase1510-08-300x200.jpg" class="attachment-249x166 wp-post-image" alt="Alternativ tekst" height="166" width="250"></div><!-- .imageListWrapper --></div><!-- .column -->
                    <div class="column"><p>column</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
                </div><!-- .column -->
            </div><!-- .column -->
            <div class="column aside"><p>column + aside</p><p>Fusce at eros vestibulum, aliquam erat sit amet, consequat dolor. Duis pulvinar ut nunc a placerat. vivamus euismod enim eget rhoncus luctus. Morbi mollis sollicitudin ipsum, nec euismod ante sollicitudin vel. Curabitur fringilla orci eu sem semper feugiat. Phasellus ornare, nibh eget ultrices tincidunt, dolor magna ultricies enim, a tempus sapien dui at nisl. Quisque rhoncus orci sed est euismod venenatis.</p></div>
        </div><!-- .column -->
    </div><!-- .pageWrap -->
</div><!-- .bodyWrap -->
<p>space</p>
<p>space</p>
<p>space</p>
</body>
</html>

CSS resource: https://developer.mozilla.org/en-US/docs/Web/CSS

CSS animation examples: http://www.dynamicdrive.com/

CSS semantic:
http://css-tricks.com/semantic-class-names/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

Failed resources:

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/

CSS Sprite / Sliding Doors

Posted on 16/08/2014 by jacv

body {
     background-image: url('smiley.gif');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 50px 100px;
 }

http://www.w3schools.com/cssref/pr_background-position.asp

Example: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

CSS – box

Posted on 10/08/2014 by jacv

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Reference: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Bootstrap

Posted on 10/08/2014 by jacv

CSS: http://getbootstrap.com/css/

col-lg-4 col-md-4 col-sm-4 col-xs-12

Default bootstrap breakpoints

@media (min-width: 768px)

@media (min-width: 992px)

@media (min-width: 1200px)

Max-width +1px

Foundation5: Første post i WP med anden CSS formatering

Posted on 05/07/2014 by jacv

Ikke den mest elegante løsning, for at vise første post med anden formatering med Foundation 5 – men det virker. Desuden kan du let redigere i det, hvis du kender lidt til WordPress Codex.

PHP (i fx. index.php):

    <div class="row site-content first-post">
        <div class="large-12 columns">
            <?php $the_query = new WP_Query( 'showposts=1' ); ?>
            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <a href="<?php the_permalink() ?>">
                <div>
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_post_thumbnail('thumbnail'); ?></p>
                    <p><?php echo substr(get_the_excerpt(), 0,230); ?></p>
                    <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> -->
                </div>
            </a>
            <?php endwhile;?>
        </div>
    </div><!-- #row site-content -->
    <div class="row site-content posts">
        <div class="large-4 medium-4 columns">
            <?php $the_query = new WP_Query( 'posts_per_page=1&offset=1' ); ?>
            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <a href="<?php the_permalink() ?>">
                <div>
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_post_thumbnail('thumbnail'); ?></p>
                    <p><?php echo substr(get_the_excerpt(), 0,230); ?></p>
                    <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> -->
                </div>
            </a>
            <?php endwhile;?>
        </div>
        <div class="large-4 medium-4 columns">
            <?php $the_query = new WP_Query( 'posts_per_page=1&offset=2' ); ?>
            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <a href="<?php the_permalink() ?>">
                <div>
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_post_thumbnail('thumbnail'); ?></p>
                    <p><?php echo substr(get_the_excerpt(), 0,230); ?></p>
                    <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> -->
                </div>
            </a>
            <?php endwhile;?>
        </div>
        <div class="large-4 medium-4 columns">
            <?php $the_query = new WP_Query( 'posts_per_page=1&offset=3' ); ?>
            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <a href="<?php the_permalink() ?>">
                <div>
                    <h2><?php the_title(); ?></h2>
                    <p><?php the_post_thumbnail('thumbnail'); ?></p>
                    <p><?php echo substr(get_the_excerpt(), 0,230); ?></p>
                    <!-- <p><?php echo substr(strip_tags($post->post_content), 0, 250);?></p> -->
                </div>
            </a>
            <?php endwhile;?>
        </div>
    </div><!-- #row site-content -->

CSS:

body.home .first-post div a div,
body.home .posts div a div {
    padding: 25px;
    margin: 15px;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-top: 1px solid #ECEDEE;
    border-right: 1px solid #D6D7D8;
    border-bottom: 1px solid #C2C3C3;
    border-left: 1px solid #D6D7D8;
background-color: transparent;
background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #F6F6F6),
    color-stop(0.35, #FFFFFF));
background-image: -o-linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%); /* Opera */
background-image: -moz-linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%) ;/* Mozilla Firefox */
background-image: -webkit-linear-gradient(center top , #F6F6F6 0%, #FFFFFF 35%); /* Webkit (Chrome 11+) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F6F6F6), color-stop(0.35, #FFFFFF)); /* Webkit (Safari/Chrome 10) */
background-image: -ms-linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%); /* IE10 */
background-image: linear-gradient(top , #F6F6F6 0%, #FFFFFF 35%); /* Proposed W3C Markup */
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
/* inside white border */
box-shadow: 0px 1px 0px 0px #FFF inset, 1px 0px 0px 0px #FFF inset, -1px 0px 0px 0px #FFF inset, 0px -1px 0px 0px #FFF inset, 0px 2px 0px 0px rgba(0, 0, 0, 0.03), 0px 1px 0px 0px rgba(0, 0, 0, 0.05);}
body.home .first-post div a div {margin-top: 0;}
    body.home .first-post div a div h2 {font-size: 2.1em;}
    body.home .first-post div a div p {font-size: 1.15em;}
body.home .first-post div a div,
body.home .posts div a:first-child div {margin-left: 0;}
body.home .first-post div a div,
body.home .posts div a:last-child div {margin-right: 0;}
body.home .first-post div a:hover div,
body.home .posts div a:hover div {
    background-color: #F6F6F6;
    background-image: -moz-linear-gradient(center top , #efefef 0%, #FFF 100%);}
body.home .first-post div a:hover div h2,
body.home .posts div a:hover div h2 {
    color: #000;}

Resultatet:

Foundation 5

WordPress

Om WordPress, plugins, XAMPP, WAMP, web udvikling etc.

Category Archives: CSS