Piss & skit
Här kanske vi kan spara grejer man ofta kopierar.
header.inc
<!DOCTYPE html>
<html lang="{{ locale {{">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
{% if seo.description != '' %}
<meta name="description" content="{{ seo.description }}">
<meta property="og:description" content="{{ seo.description }}" />
{% else %{
<meta property="og:description" content="{{ seo.title }}" />
{% endif %{
{% if seo.keywords != '' %{{% endif %{
<meta property="og:title" content="{{ seo.title }}" />
{% if article.preview %{
<meta property="og:image" content="{{ article.preview }}" />
{% endif %{
<title>{{ seo.title }}</title>
{{ wm3 }}
<link rel="alternate" type="application/rss+xml" href="/{{locale}}/a.rss" title="RSS Feed">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="{{ 'main.css' | template_path {{" rel="stylesheet">
<link href="{{ 'responsive.css' | template_path {{" rel="stylesheet">
</head>
<body class="{% if admin {{admin}} endif %}" >
{% assign page_path = request.path %}
<main>
<header>
<nav>
<div class="container">
<div class="row">
<div class="col-sm-12 clearfix">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="/">
<img alt="{{ seo.title {{" src="{{ 'logo.png' | asset_path }}">
</a>
</div>
<div id="navbar" class="pull-left hidden-xs">
{{ 'root' | menu: 'desktop-menu' }}
</div>
<div class="responsive-menu-opener pull-right visible-xs">
<i class="fa fa-bars">
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="responsive-menu-wrapper">
{{ 'map' | menu: 'responsive-menu' }}
</div>
start.tpl / default.tpl
{% include 'header' %}
<section class="">
<div class="container">
<div class="row">
<div class="col-sm-12">
{{ 'main' | page_editable }}
</div>
</div>
</div>
</section>
{% include 'footer' %}
footer.inc
<div class="footer-fix"></div>
</main>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
{{ 'footer' | global_editable }}
</div>
</div>
</div>
</footer>
<div id="cookie-wrapper">
<div class="container clearfix">
<div class="row">
<div class="col-sm-12">
<p>Vi använder cookies på våran webbplats, genom att surfa vidare godkänner du detta. Klicka här för att stänga rutan
</div>
</div>
</div>
</div>
<!--[if lte IE 9]>
<div class="ie-container">
<p>Du surfar via en äldre version av webbläsare. För en bättre upplevelse uppdatera din webbläsare.
<a href="http://windows.microsoft.com/sv-se/internet-explorer/download-ie">Uppdatera här
</div>
<![endif]-->
</body>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
<script src="{{ 'main.js' | template_path }}">
</html>
main.css
// COLORS
$main: black
$secondary: black
$text: #424242
// FONTS
$Paragraph: 'specialFont', Helvetica, Arial, sans-serif
$Heading: 'specialFont', Helvetica, Arial, sans-serif
// MIXINS
@mixin border-radius($radius)
-webkit-border-radius: $radius!important
-moz-border-radius: $radius!important
-ms-border-radius: $radius!important
border-radius: $radius!important
@mixin transition($values)
-webkit-transition: $values
-moz-transition: $values
-ms-transition: $values
-o-transition: $values
transition: $values
// RESET
*
-webkit-font-smoothing: antialiased
-moz-font-smoothing: antialiased
-o-font-smoothing: antialiased
&:focus
outline: 0!important
&:active
box-shadow: none!important
input
outline: none
// HELPERS
.vcenter-parent
display: table
width: 100%
.vcenter-child
display: table-cell
vertical-align: middle
.padding-0
padding: 0
.padding-30
padding: 30px 0
.padding-50
padding: 50px 0
.spacer-60
margin-top: 60px !important
.spacer-50
margin-top: 50px !important
.spacer-40
margin-top: 40px !important
.spacer-30
margin-top: 30px !important
.spacer-25
margin-top: 25px !important
.spacer-20
margin-top: 20px !important
.spacer-10
margin-top: 10px !important
.resp
display: none!important
.hidden-resp
display: block!important
// BUTTONS
=primarybutton
display: inline-block
padding: 10px 20px
font-size: 16px
+border-radius(50px)
background-color: $main
color: $secondary
border: 1px solid $main
+transition(all 0.3s ease-in-out)
text-decoration: none
font-family: $Heading
text-transform: uppercase
&:hover
background-color: darken( $main, 10% )
border: 1px solid darken( $main, 10% )
=secondarybutton
display: inline-block
padding: 10px 20px
font-size: 16px
+border-radius(50px)
background-color: $secondary
color: $main
border: 1px solid $secondary
+transition(all 0.3s ease-in-out)
text-decoration: none
font-family: $Heading
text-transform: uppercase
&:hover
background-color: darken( $secondary, 10% )
border: 1px solid darken( $secondary, 10% )
.btn-default, .btn-primary
+primarybutton
.btn-secondary
+secondarybutton
// GENERAL
html, body
font-family: $Paragraph
font-size: 14px
font-weight: normal
line-height: 1.6
color: $text
margin: 0
padding: 0
min-height: 100%
height: 100%
position: relative
h1,h2,h3,h4,h5,h6
font-family: $Heading
font-weight: 700
color: $main
p,span
font-family: $Paragraph
color: $text
// CONTENT WRAPPER AND FOOTER
// Minus on the wrapper must equal height of footer-fix and footer
// footer-fix is needed to maintain constant negative margin at the bottom
main
min-height: calc(100vh - 250px)
padding-top: 50px //Must equal height of the header
.footer-fix
margin-bottom: 0px
.footer
height: 250px
background-color: orange
// COOKIES
#cookie-wrapper
position: fixed
bottom: 0
left: 0
width: 100%
height: 100px
padding: 10px 0 0
z-index: 9999
background-color: #fbf6de
body.cookie-added, body.cookie-found
#cookie-wrapper
display: none
// NAV
header
position: fixed
top: 0
left: 0
width: 100%
background: pink
z-index: 9999
nav
.navbar-header
#navbar
.desktop-menu
list-style-type: none
padding: 0
li
display: inline-block
.responsive-menu-opener
cursor: pointer
.responsive-menu-wrapper
display: none
background: $main
.responsive-menu
list-style-type: none
padding: 0
li
display: block
responsive.sass
// MIN WIDTHS
@media (min-width: 1300px)
.container
width: 1200px
@media (min-width: 1400px)
.container
width: 1200px
@media (min-width: 1500px)
.container
width: 1300px
@media (min-width: 1600px)
.container
width: 1400px
@media (min-width: 1700px)
.container
width: 1500px
// MAX WIDTHS
// BOOTSTRAP LG TO MD
@media (max-width: 1200px)
// IPAD 1,2,3,4 IPAD MINI LANDSCAPE,GALAXY TAB LANDSCAPE 7
@media (max-width: 1024px)
// BOOTSTRAP MD TO SM
@media (max-width: 992px)
// GALAXY NOTE 3 LANDSCAPE
@media (max-width: 960px)
// GALAXY TAB PORTRAIT
@media (max-width: 800px)
// IPAD 1,2,3,4 IPAD MINI PORTRAIT, BOOTSTRAP SM TO XS
@media (max-width: 767px)
// IPHONE 6 PLUS LANDSCAPE
@media (max-width: 736px)
// IPHONE 6 LANDSCAPE
@media (max-width: 667px)
// GALAXY NOTE 2 LANDSCAPE, GALAXY S4
@media (max-width: 640px)
// IPHONE 5 LANDSCAPE
@media (max-width: 568px)
// GALAXY NOTE 3 PORTRAIT
@media (max-width: 540px)
// GALAXY S, S2, W LANDSCAPE
@media (max-width: 533px)
// IPHONE 3G, 4 LANDSCAPE
@media (max-width: 480px)
// IPHONE 6 PLUS PORTRAIT
@media (max-width: 414px)
// GALAXY NOTE PORTRAIT
@media (max-width: 400px)
// IPHONE 6 POTRAIT
@media (max-width: 375px)
// GALAXY NOTE 2 PORTRAIT, GALAXY S4
@media (max-width: 360px)
// IPHONE 3G, 4, 5 PORTRAIT
@media (max-width: 320px)
main.coffee
$(document).ready ->
############################
# RESPONSIVE MENU OPENER #
############################
$('.responsive-menu-opener').click (e) ->
$('.responsive-menu-wrapper').slideToggle()
############
# COOKIE #
############
referrer_url = document.referrer.split('.se')[0]
if referrer_url == "http://sitename" || referrer_url == "http://www.sitename" || referrer_url == "http://sitename.wm3"
$.cookie('view-with-cookies', 'no-problem', { expires: 365, path: '/' })
$('body').addClass('cookie-added')
$('#cookie-wrapper').on 'click', ->
$.cookie('view-with-cookies', 'no-problem', { expires: 365, path: '/' })
$('body').addClass('cookie-added')
if $.cookie('view-with-cookies') == undefined
$('body').addClass('cookie-not-agreed')
if $.cookie('view-with-cookies')
$('body').addClass('cookie-found');