1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 01:58:50 +02:00

Merge pull request #24 from kremalicious/flexbox-grid

Flexbox grid
This commit is contained in:
Matthias Kretschmann 2015-08-19 00:38:14 +02:00
commit 5dcf9a88dc
30 changed files with 511 additions and 337 deletions

16
.travis.yml Normal file
View File

@ -0,0 +1,16 @@
sudo: false
language: ruby
rvm:
- 2.2.2
- 1.9.3
cache: bundler
addons:
apt:
packages:
- libgsl0-dev
before_script:
- npm install gulp bower -g
- npm install
- bower install
- bundle install
script: gulp build

View File

@ -14,4 +14,5 @@ group :development do
gem 'mini_magick'
gem 'fileutils'
gem 'gsl'
gem 'narray'
end

View File

@ -3,7 +3,8 @@ kremalicious3
> [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat.
[ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092) [![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3)
[ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092)
[![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3)
Requirements
@ -37,7 +38,7 @@ Get up and running
Run the following command from the repository's root folder to install all dependencies.
```bash
npm install
npm install && bower install && bundle install
```
### Development build

View File

@ -15,9 +15,9 @@ var siteNavigation = {
siteSearch: function() {
var $content = $('.content'),
var $content = $('.site__content'),
$searchlink = $('.search-btn'),
$searcharea = $('.topbar .search-area'),
$searcharea = $('.search-area'),
$searchfield = $('#search-input'),
$searchresults = $('#search-results'),
$searchpop = $('#search-popover');
@ -36,7 +36,7 @@ var siteNavigation = {
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/search.json',
searchResultTemplate: '<li class="col3"><a class="search-link" href="{url}">{title}</a></li>',
searchResultTemplate: '<li class="grid__col"><a class="search-link" href="{url}">{title}</a></li>',
fuzzy: false
})

View File

@ -154,24 +154,25 @@ a.btn-primary
.icon
width: 15px
height: 15px
margin: 1px 0 0 0
margin: 1px 3px 0 0
fill: #0089cb
float: left
// Close button
/////////////////////////////////////
.close
@extend .textcenter
width: 16px
height: 16px
line-height: 12px
font-size: $font-size-small
@extend .textcenter, .transition
width: 14px
height: 14px
padding: 0
border-radius: 16px
border-radius: 50%
display: block
background: $brand-grey-light
background: lighten($brand-grey-light, 50%)
color: #fff
line-height: 1
font-size: $font-size-mini
&:hover,
&:focus
@ -185,12 +186,18 @@ a.btn-primary
/////////////////////////////////////
.content-download
@extend .clearfix
@extend .grid, .grid--gutters
display: block
margin-top: 0
@media $breakpoint1
display: flex
margin-top: -($gutter-space)
a
@extend .btn
padding-left: 15px
padding-right: 15px
@extend .btn, .grid__col
margin: $gutter-space 0 0 $gutter-space
display: block
span

View File

@ -6,20 +6,20 @@
.featured
@extend .divider-bottom
padding-top: $line-height-computed
padding-bottom: $line-height-computed
@media $breakpoint2
padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
@media $breakpoint2
padding-top: ($line-height-computed*3)
padding-bottom: ($line-height-computed*3)
.grid
margin-bottom: 0
.featured-link
display: block
margin-bottom: $line-height-computed
transition-property: none
@media $breakpoint2
margin-bottom: 0
&:hover
transform: scale(1.03)

View File

@ -17,7 +17,6 @@
.post-title
@extend .h5
margin: 0
margin-bottom: $line-height-computed
.post-title,
.post-title-link

View File

@ -25,18 +25,18 @@
color: darken($page-bg, 15%)
margin-right: 2px
.hentry,
.grid > .hentry
.hentry
@extend .divider-bottom
padding-top: ($line-height-computed*2)
padding-bottom: ($line-height-computed*2)
width: 100%
@media $breakpoint2
padding-top: ($line-height-computed*4)
padding-bottom: ($line-height-computed*4)
.page-index &:first-child
padding-top: ($line-height-computed*2)
padding-top: ($line-height-computed*3)
.page-single &
padding-bottom: ($line-height-computed*2)
@ -153,8 +153,7 @@
.masonry
@media $breakpoint2
width: 125%
margin-left: -12.5%
width: 100%
clearfix()
.hentry

View File

@ -4,10 +4,11 @@
// Footer
//
.footer
.site__footer
@extend .textcenter
border-top: 1px solid rgba(255,255,255,.7)
box-shadow: inset 0 1px 4px alpha($brand-dark, .2)
padding-top: ($line-height-computed*2)
.gravatar
margin-bottom: ($line-height-computed/2)

View File

@ -5,74 +5,185 @@
//
// Prevents padding to be added
*
*,
*:before,
*:after
box-sizing: border-box
.container
padding-left: 7%
padding-right: 7%
width: 100%
@media $breakpoint2
padding-left: 15%
padding-right: 15%
//
// Base
//
.grid
margin: auto
padding: 0
display: flex
flex-wrap: wrap
list-style: none
margin: 0
padding: 0
@media $breakpoint2
max-width: 35em
> .col1,
> .col2,
> .col3,
> .col4,
> .col5,
> .col6
.grid__col
flex: 1
flex: 0 0 100%
padding: 1em 0 0 1em
> .col6
padding-left: 0
> .col1-xs,
> .col2-xs,
> .col3-xs,
> .col4-xs,
> .col5-xs,
> .col6-xs
//
// Alignment per row
//
.grid--top
align-items: flex-start
.grid--bottom
align-items: flex-end
.grid--center
align-items: center
//
// Alignment per cell
//
.grid_col--top
align-self: flex-start
.grid_col--bottom
align-self: flex-end
.grid_col--center
align-self: center
//
// Gutters
//
.grid--gutters
margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
> .grid__col
padding: $gutter-space 0 0 $gutter-space
//
// Columns
//
.grid--fit
> .grid__col
flex: 1
padding: 1em 0 0 1em
> .col1-xs
flex: 0 0 16.666666667%
> .col2-xs
flex: 0 0 33.333333333%
> .col3-xs
flex: 0 0 50%
> .col4-xs
flex: 0 0 66.666666666%
> .col5-xs
flex: 0 0 83.333333333%
> .col6-xs
.grid--full
> .grid__col
flex: 0 0 100%
padding-left: 0
@media $breakpoint2
> .col1
.grid--1of6
> .grid__col
flex: 0 0 16.5%
> .col2
.grid--2of6,
.grid--third
> .grid__col
flex: 0 0 33%
> .col3
.grid--3of6,
.grid--half
> .grid__col
flex: 0 0 50%
> .col4
.grid--4of6
> .grid__col
flex: 0 0 66%
> .col5
.grid--5of6
> .grid__col
flex: 0 0 82.5%
> .col6
@media $breakpoint1
.grid-small--fit
> .grid__col
flex: 1
.grid-small--full
> .grid__col
flex: 0 0 100%
.grid-small--1of6
> .grid__col
flex: 0 0 16.5%
.grid-small--2of6,
.grid-small--third
> .grid__col
flex: 0 0 33%
.grid-small--3of6,
.grid-small--half
> .grid__col
flex: 0 0 50%
.grid-small--4of6
> .grid__col
flex: 0 0 66%
.grid-small--5of6
> .grid__col
flex: 0 0 82.5%
@media $breakpoint2
.grid-medium--fit
> .grid__col
flex: 1
.grid-medium--full
> .grid__col
flex: 0 0 100%
.grid-medium--1of6
> .grid__col
flex: 0 0 16.5%
.grid-medium--2of6,
.grid-medium--third
> .grid__col
flex: 0 0 33%
.grid-medium--3of6,
.grid-medium--half
> .grid__col
flex: 0 0 50%
.grid-medium--4of6
> .grid__col
flex: 0 0 66%
.grid-medium--5of6
> .grid__col
flex: 0 0 82.5%
@media $breakpoint3
.grid-large--fit
> .grid__col
flex: 1
.grid-large--full
> .grid__col
flex: 0 0 100%
.grid-large--1of6
> .grid__col
flex: 0 0 16.5%
.grid-large--2of6,
.grid-large--third
> .grid__col
flex: 0 0 33%
.grid-large--3of6,
.grid-large--half
> .grid__col
flex: 0 0 50%
.grid-large--4of6
> .grid__col
flex: 0 0 66%
.grid-large--5of6
> .grid__col
flex: 0 0 82.5%

View File

@ -4,10 +4,8 @@
// Header
//
// Topbar
/////////////////////////////////////
.topbar
.site__header
width: 100%
background: $body-bg
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
@ -46,20 +44,13 @@
background-image: url('../img/logo@3x.png')
background-size: 183px 62px
// Banner
/////////////////////////////////////
.banner
padding-top: 0
.banner-title
.header__title
margin: 0
// display toned down logo
// by default
@extend .logo
.banner-logo
.header__logo
@extend .ir
// repeat logo
// but display hover version

View File

@ -14,8 +14,9 @@
@import 'mixins'
// Core CSS
@import 'grid'
@import 'scaffolding'
@import 'grid'
@import 'layout'
@import 'typography'
@import 'forms'
@import 'buttons'

View File

@ -0,0 +1,62 @@
//
// kremalicious3
// --------------
// Layout
//
.site__content,
.header__content
.footer__content
padding: 0 7%
width: 100%
@media $breakpoint2
padding: 0 15%
.container
max-width: 35em
margin: 0 auto
// topbar and footer as fixed
// site background
/////////////////////////////////////
.site__document
background-color: $page-bg
border-top: 1px solid rgba(255,255,255,.7)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
@media only screen and (min-width: 40.625em) and (min-height: 650px)
.site
position: relative
.site__document
@extend .transition
position: relative
z-index: 2
margin-top: 80px
margin-bottom: 420px
.menu-open &
margin-top: 220px
.site__header,
.site__footer
position: fixed
border: none
width: 100%
.site__header
z-index: 1
top: 0
border: none
.site__footer
z-index: 0
bottom: 0
box-shadow: none
.menu-open &
hide()

View File

@ -41,10 +41,14 @@
.nav-popover
@extend .divider-top, .list-unstyled
padding: $line-height-computed 0
margin-top: 60px
margin-top: 30px
margin-bottom: 0
width: 100%
background: $body-bg
display: flex
.grid__col
padding-top: 0
.nav-link
@extend .h6, .textcenter
@ -73,8 +77,13 @@
/////////////////////////////////////
.paginator
padding-top: $line-height-computed
padding-bottom: $line-height-computed
.icon
margin-bottom: -3px
p
margin-bottom: 0;
.paginator-next
text-align: right

View File

@ -26,46 +26,3 @@ textarea
font-family: inherit
font-size: inherit
line-height: inherit
// topbar and footer as fixed
// site background
/////////////////////////////////////
.document
background-color: $page-bg
border-top: 1px solid rgba(255,255,255,.7)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
@media only screen and (min-width: 40.625em) and (min-height: 650px)
body
position: relative
.document
@extend .transition
position: relative
z-index: 2
margin-top: 80px
margin-bottom: 500px
.menu-open &
margin-top: 220px
.topbar,
.footer
position: fixed
border: none
.topbar
z-index: 1
top: 0
border: none
.footer
z-index: 0
bottom: 0
box-shadow: none
.menu-open &
hide()

View File

@ -5,8 +5,9 @@
//
&.search-open-blur
@extend .transition
filter: blur(10px)
user-select: none
pointer-events: none
.search-btn
right: 50px
@ -17,12 +18,12 @@
.search-close
position: absolute
right: 32px
right: 16px
&,
&:active
top: 50%
margin-top: -8px
margin-top: -7px
.search-area
@extend .transition
@ -38,10 +39,29 @@
&.ready
display: block
.search-popover
position: absolute
left: 0
top: 71px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
top: 0
.search-results
@extend .list-unstyled, .textcenter
@extend .list-unstyled
display: flex
.grid__col
padding-top: 0
@media $breakpoint2
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
@ -63,17 +83,3 @@
border: none
&:before
display: none
.search-popover
position: absolute
left: 0
top: 71px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
top: 0

View File

@ -94,6 +94,11 @@ $link-color = lighten($brand-cyan, 5%)
$link-color-hover = lighten($link-color, 10%)
// Grid
/////////////////////////////////////
$gutter-space = $line-height-computed
// Components spacing
/////////////////////////////////////

View File

@ -1,7 +1,7 @@
{% if post.layout == "link" %}
<article class="hentry format-link col6">
<article class="hentry format-link">
<header>
<h1 class="entry-title">
<a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
@ -33,7 +33,7 @@
{% elsif post.layout == "photo" %}
<article class="hentry format-photo col6">
<article class="hentry format-photo">
<a class="photo-link" href="{{ post.url }}">
<figure class="hmedia">
@ -48,7 +48,7 @@
{% else %}
<article class="hentry format-post col6">
<article class="hentry format-post">
<header>
<h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
</header>

View File

@ -1,8 +1,9 @@
<aside class="grid featured">
<aside class="featured">
<div class="grid grid--full grid-small--fit grid--gutters">
{% for post in site.posts %}
{% if post.featured %}
<article class="col2">
<article class="grid__col">
<a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
{% picture featured {{ post.image }} %}
<h1 class="featured-title">{{ post.title | titlecase }}</h1>
@ -10,4 +11,5 @@
</article>
{% endif %}
{% endfor %}
</div>
</aside>

View File

@ -1,13 +1,14 @@
<footer role="contentinfo" class="footer container">
<footer role="contentinfo" class="site__footer">
<div class="footer__content">
<div class="grid">
<div class="container">
<div class="vcard author col6">
<div class="vcard author">
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
</div>
<aside class="subscribe col6">
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed">
@ -33,10 +34,7 @@
</p>
</aside>
</div>
<section class="footer-copyright" class="grid">
<div class="col6">
<section class="footer-copyright">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
@ -47,9 +45,11 @@
View source
</a>
</p>
</div>
</section>
</div>
</div>
</footer>
<script src="/assets/js/kremalicious3.min.js" async></script>

View File

@ -1,14 +1,17 @@
<div class="topbar container">
<div class="grid">
<header role="banner" class="site__header">
<div class="header__content">
<div class="container">
<header role="banner" class="banner col3-xs">
<h1 class="banner-title">
<a class="banner-logo" href="/">kremalicious</a>
<div class="grid grid--half">
<div class="grid__col">
<h1 class="header__title">
<a class="header__logo" href="/">kremalicious</a>
</h1>
</header>
</div>
<nav role="navigation" class="nav-main col3-xs">
<nav role="navigation" class="nav-main grid__col">
<button type="button" class="menu-btn">
<svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
<title id="title">Menu</title>
@ -32,9 +35,9 @@
</div>
<ul class="nav-popover grid hide">
<ul class="nav-popover grid grid--gutters grid--half grid-medium--third hide">
{% for category in site.categories %}
<li class="col3-xs col2">
<li class="grid__col">
<a class="nav-link" href="/{{ category | first }}/">
{{ category | first }}
</a>
@ -42,8 +45,12 @@
{% endfor %}
</ul>
</div>
</div>
</div>
</header>
<div id="search-popover" class="search-popover container hide">
<ul id="search-results" class="search-results grid"></ul>
<div id="search-popover" class="search-popover hide">
<div class="container">
<ul id="search-results" class="search-results grid grid--gutters grid-medium--half"></ul>
</div>
</div>

View File

@ -2,7 +2,7 @@
<nav class="paginator grid">
<p class="paginator-previous col2-xs">
<p class="paginator-previous grid__col">
{% if paginator.previous_page %}
<a
{% if page.category %}
@ -27,11 +27,11 @@
{% endif %}
</p>
<p class="paginator-pages col2-xs">
<p class="paginator-pages grid__col">
<span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span>
</p>
<p class="paginator-next col2-xs">
<p class="paginator-next grid__col">
{% if paginator.next_page %}
<a
{% if page.category %}

View File

@ -1,10 +1,10 @@
<aside class="related-photos">
<div class="grid">
<div class="grid grid--gutters grid--half grid-medium--third">
{% for post in site.categories['photos'] limit:6 %}
<article class="related-photo col3-xs col2">
<article class="related-photo grid__col">
<a class="photo-link" href="{{ post.url }}">
{% picture photothumb {{ post.image }} %}
</a>

View File

@ -3,11 +3,11 @@
<h1 class="related-posts-title">Related</h1>
<div class="grid">
<div class="grid grid--gutters grid--full grid-small--half grid-medium--third">
{% for post in site.related_posts limit:6 %}
<article class="related-post col2">
<article class="related-post grid__col">
<a class="post-title-link" href="{{ post.url }}">
<h1 class="post-title">{{ post.title }}</h1>
</a>

View File

@ -3,14 +3,16 @@
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
<body class="page-{{ id | remove:'-' }}">
<body class="page-{{ id | remove:'-' }} site">
{% include header.html %}
<section role="document" class="document container">
<div class="content">
<section role="document" class="site__document">
<div class="site__content">
<div class="container">
{{ content }}
</div>
</div>
</section>
</body>

View File

@ -25,6 +25,6 @@ The wallpaper comes in four versions with two color variations and two text vari
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
<p class="content-download">
<a class="btn-primary icon-download col3" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
<a href="http://krlc.us/givecoffee" class="icon-heart col3">Donate</a>
<a class="btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
<a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
</p>

View File

@ -28,7 +28,7 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
<p class="content-download">
<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress col2">Plugin Page</a> <a class="btn-primary icon-github col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn col2">Donate</a>
<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress">Plugin Page</a> <a class="btn-primary icon-github" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
</p>
The plugin is hosted on GitHub and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:

View File

@ -35,7 +35,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
Ive put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
<p class="content-download">
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download col2">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github col2">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart col2">Donate</a>
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
</p>
### Usage

View File

@ -23,8 +23,8 @@ The above picture might be blurry depending on the device you're using so here's
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
<p class="content-download">
<a class="btn-primary icon-eye col3" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
<a class="icon-github col3" href="https://github.com/kremalicious/kbdfun/">Github</a>
<a class="btn-primary icon-eye" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
<a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
</p>
## Usage

View File

@ -9,9 +9,6 @@
"version": "3.0.0",
"license": "MIT",
"main": "gulpfile.js",
"scripts": {
"postinstall": "bower install && bundle install"
},
"dependencies": {
"imagesloaded": ">=3.1.8",
"jquery": ">=2.1.4",