├── .gitignore ├── 404.html ├── Gemfile ├── README.md ├── _config.yml ├── _includes ├── footer.html ├── head.html ├── header.html └── page-tools.html ├── _layouts ├── apps.html ├── default.html ├── docs.html ├── page.html ├── pattern.html └── post.html ├── _sass ├── _grid-layout.scss ├── base │ ├── _base.scss │ ├── _buttons.scss │ ├── _forms.scss │ ├── _grid-settings.scss │ ├── _lists.scss │ ├── _tables.scss │ ├── _typography.scss │ └── _variables.scss ├── bourbon │ ├── _bourbon-deprecated-upcoming.scss │ ├── _bourbon.scss │ ├── addons │ │ ├── _clearfix.scss │ │ ├── _directional-values.scss │ │ ├── _ellipsis.scss │ │ ├── _font-family.scss │ │ ├── _hide-text.scss │ │ ├── _html5-input-types.scss │ │ ├── _position.scss │ │ ├── _prefixer.scss │ │ ├── _retina-image.scss │ │ ├── _size.scss │ │ ├── _timing-functions.scss │ │ ├── _triangle.scss │ │ └── _word-wrap.scss │ ├── css3 │ │ ├── _animation.scss │ │ ├── _appearance.scss │ │ ├── _backface-visibility.scss │ │ ├── _background-image.scss │ │ ├── _background.scss │ │ ├── _border-image.scss │ │ ├── _border-radius.scss │ │ ├── _box-sizing.scss │ │ ├── _calc.scss │ │ ├── _columns.scss │ │ ├── _filter.scss │ │ ├── _flex-box.scss │ │ ├── _font-face.scss │ │ ├── _font-feature-settings.scss │ │ ├── _hidpi-media-query.scss │ │ ├── _hyphens.scss │ │ ├── _image-rendering.scss │ │ ├── _keyframes.scss │ │ ├── _linear-gradient.scss │ │ ├── _perspective.scss │ │ ├── _placeholder.scss │ │ ├── _radial-gradient.scss │ │ ├── _selection.scss │ │ ├── _text-decoration.scss │ │ ├── _transform.scss │ │ ├── _transition.scss │ │ └── _user-select.scss │ ├── functions │ │ ├── _assign.scss │ │ ├── _color-lightness.scss │ │ ├── _contains.scss │ │ ├── _is-length.scss │ │ ├── _is-size.scss │ │ ├── _modular-scale.scss │ │ ├── _px-to-em.scss │ │ ├── _px-to-rem.scss │ │ ├── _strip-units.scss │ │ ├── _tint-shade.scss │ │ ├── _transition-property-name.scss │ │ └── _unpack.scss │ ├── helpers │ │ ├── _convert-units.scss │ │ ├── _font-source-declaration.scss │ │ ├── _gradient-positions-parser.scss │ │ ├── _is-num.scss │ │ ├── _linear-angle-parser.scss │ │ ├── _linear-gradient-parser.scss │ │ ├── _linear-positions-parser.scss │ │ ├── _linear-side-corner-parser.scss │ │ ├── _radial-arg-parser.scss │ │ ├── _radial-gradient-parser.scss │ │ ├── _radial-positions-parser.scss │ │ ├── _render-gradients.scss │ │ ├── _shape-size-stripper.scss │ │ └── _str-to-num.scss │ └── settings │ │ ├── _asset-pipeline.scss │ │ ├── _prefixer.scss │ │ └── _px-to-em.scss ├── icons.scss ├── mmenu │ ├── addons │ │ ├── jquery.mmenu.buttonbars.scss │ │ ├── jquery.mmenu.counters.scss │ │ ├── jquery.mmenu.dragopen.scss │ │ ├── jquery.mmenu.footer.scss │ │ ├── jquery.mmenu.header.scss │ │ ├── jquery.mmenu.labels.scss │ │ ├── jquery.mmenu.offcanvas.scss │ │ ├── jquery.mmenu.searchfield.scss │ │ └── jquery.mmenu.toggles.scss │ ├── extensions │ │ ├── jquery.mmenu.effects.scss │ │ ├── jquery.mmenu.fullscreen.scss │ │ ├── jquery.mmenu.iconbar.scss │ │ ├── jquery.mmenu.positioning.scss │ │ ├── jquery.mmenu.themes.scss │ │ └── jquery.mmenu.widescreen.scss │ ├── inc │ │ ├── _colors.scss │ │ ├── _mixins.scss │ │ ├── _sizing.scss │ │ └── _variables.scss │ ├── jquery.mmenu.all.scss │ ├── jquery.mmenu.oncanvas.scss │ └── jquery.mmenu.scss ├── neat │ ├── _neat-helpers.scss │ ├── _neat.scss │ ├── functions │ │ ├── _new-breakpoint.scss │ │ └── _private.scss │ ├── grid │ │ ├── _box-sizing.scss │ │ ├── _direction-context.scss │ │ ├── _display-context.scss │ │ ├── _fill-parent.scss │ │ ├── _media.scss │ │ ├── _omega.scss │ │ ├── _outer-container.scss │ │ ├── _pad.scss │ │ ├── _private.scss │ │ ├── _row.scss │ │ ├── _shift.scss │ │ ├── _span-columns.scss │ │ ├── _to-deprecate.scss │ │ └── _visual-grid.scss │ └── settings │ │ ├── _disable-warnings.scss │ │ ├── _grid.scss │ │ └── _visual-grid.scss ├── normalize.scss ├── persons.scss └── syntax.scss ├── contribute ├── adding.html ├── editing.html ├── index.html └── markdown-examples.md ├── core-datasets ├── core-data-curators.md ├── core-datasets-roadmap.md ├── guide │ └── index.md ├── images │ ├── create-repository-init-readme.jpg │ ├── create-repository-name.jpg │ ├── export.jpg │ ├── issues.jpg │ ├── remote-v-links.jpg │ └── repo-create.jpg ├── index.md └── working-with-git.md ├── css ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── main.scss └── widescreen.scss ├── data ├── archive │ ├── data-wrangling-intro.md │ ├── howtogetdata.md │ ├── mapping.md │ └── scraping.md ├── csv.md ├── glossary.md ├── images │ ├── gssImportFormula.jpg │ ├── gssImportFormulaFull.jpg │ ├── gssImportedHTMLTable.jpg │ └── wikipediaTable.jpg ├── index.md ├── patterns │ ├── archiving-twitter.md │ ├── choropleth-maps-from-spreadsheets.md │ ├── cleaning-data-scraped-from-the-web.md │ ├── cleaning-data-with-refine.md │ ├── cleaning-data-with-spreadsheets.md │ ├── cleaning-spending-data-open-refine.md │ ├── datahub.md │ ├── extracting-data-from-pdf-with-tabula.md │ ├── filtering-data-with-spreadsheets.md │ ├── foi.md │ ├── formulae-with-spreadsheets.md │ ├── geo-googledocs.md │ ├── geocoding.md │ ├── getting-data-from-world-bank.md │ ├── how-to-find-data.md │ ├── index.md │ ├── interactive_bubble_charts.md │ ├── intro-to-apis.md │ ├── introduction-to-html.md │ ├── liberating-access-databases.md │ ├── liberating-html-tables.md │ ├── line-charts-from-spreadsheets.md │ ├── mirroring.md │ ├── publishing-work-online.md │ ├── scatterplots-from-spreadsheets.md │ ├── scraper-extension-for-chrome.md │ ├── scraping-beyond-the-basics.md │ ├── scraping-multiple-pages-with-refine-and-scraper.md │ ├── sorting-data-with-spreadsheets.md │ └── sql-output-csv-from-postgresql.md ├── sql-for-data-manipulation.md └── tutorial │ └── index.md ├── favicon.ico ├── feed.xml ├── glossary └── index.md ├── img ├── data-wrench.png ├── home-banner-bg.jpg ├── home-banner.jpg ├── home-banner_2x.jpg ├── open-content.svg ├── open-knowledge-large.png ├── open-knowledge.png └── supporters │ ├── 4ip-footer.png │ ├── hewlett-footer.png │ ├── kf-footer.png │ ├── on-footer.png │ └── osf-footer.png ├── index.html ├── js ├── apps.js ├── home.js ├── main.js ├── plugins.js ├── resources.js └── vendor │ ├── isotope.pkgd.min.js │ ├── jquery-1.11.2.min.js │ ├── jquery.adaptive-backgrounds.min.js │ └── modernizr-2.8.3.min.js ├── start └── index.md ├── tile-wide.png └── tile.png /.gitignore: -------------------------------------------------------------------------------- 1 | _site/* 2 | .sass-cache/ -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found 6 | 7 | 54 | 55 | 56 |

Page Not Found

57 |

Sorry, but the page you were trying to view does not exist.

58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # A sample Gemfile 2 | source "https://rubygems.org" 3 | 4 | gem 'github-pages' 5 | gem 'jekyll-redirect-from' 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Github repo for [Data Patterns][dp] - a collection of tips and tricks for data 2 | work. 3 | 4 | [dp]: http://okfnlabs.org/datapatterns/ 5 | 6 | 7 | 8 | [![Join the chat at https://gitter.im/okfn/chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/okfn/chat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 9 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | title: Open Knowledge Labs Handbook 2 | short_title: Labs Handbook 3 | description: "A collection of guides and advice to participate in Open Knowledge Labs" 4 | baseurl: "/handbook" 5 | issues_url: http://github.com/okfn/handbook/issues 6 | url: "http://datapatterns.org/" 7 | github_username: okfn 8 | github_repo: handbook 9 | paypal: admin@okfn.org 10 | contact: "https://discuss.okfn.org/c/open-knowledge-labs" 11 | markdown: kramdown 12 | highlighter: rouge 13 | gems: 14 | - jekyll-redirect-from 15 | devs: 16 | - 17 | name: Dan Fowler 18 | github: danfowler 19 | 20 | name: Gustavo Silva 21 | github: gsilvapt 22 | 23 | googleanalytics: UA-8271754-43 24 | permalink: pretty 25 | openknowledgeribbon: true 26 | 27 | defaults: 28 | - 29 | scope: 30 | path: "" # an empty string here means all files in the project 31 | values: 32 | layout: "page" 33 | edit: true 34 | - 35 | scope: 36 | path: "data/patterns" 37 | values: 38 | section: "patterns" 39 | 40 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {% if page.wide %} 15 | 16 | {% endif %} 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | {% assign url_parts = page.url | split: '/' %} 2 | {% assign url_last = url_parts |last %} 3 | 4 |
5 | Open the menu 6 | {{ site.short_title }} 7 |
8 | 9 | 67 | -------------------------------------------------------------------------------- /_layouts/apps.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | wide: true 4 | edit: true 5 | --- 6 | 7 | {% assign section = page.section %} 8 | {% assign section_base = site.baseurl | append: section | append: '/' | append: page.lang | append: '/' %} 9 | 10 |
11 |
12 | {{ section }} 13 |

{{ page.title }}

14 | 15 | {% if page.end %} 16 | {% if page.start %}{{ page.start }} -{% else %}Ended{% endif %} {{ page.end }} 17 | {% else %} 18 | Active 19 | {% endif %} 20 | 21 | {% if page.creators %} 22 |
By 23 |
    24 | {% for creator in page.creators %} 25 |
  • {{ creator }}
    • 26 | {% endfor %} 27 |
28 |
29 | {% endif %} 30 | 31 | {% include languages.html %} 32 | {% if page.image %} 33 |
34 | 70 |
71 |
72 | 73 | {% if page.image_attribution %} 74 | {{ page.image_attribution }} 75 | {% endif %} 76 |
77 | {% endif %} 78 | {{ content }} 79 | {% if page.website %} 80 | Go to website   81 | {% endif %} 82 | {% if page.code %} 83 | View source code 84 | {% endif %} 85 | 86 | {% if page.data_resource %} 87 |
88 | Data resource: {{ page.data_resource }} 89 |
90 | {% endif %} 91 |
92 | 93 |
94 | 95 | {% include page-tools.html %} 96 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 10 |
11 |
12 | Open Knowledge 13 |
14 | {% include header.html %} 15 | 16 |
17 | {{ content }} 18 |
19 | 20 | {% include footer.html %} 21 |
22 |
23 | 24 | 25 | 26 | {% if page.githubactivity %} 27 | 28 | 29 | {% endif %} 30 | 31 | 32 | 33 | {% if page.js %} 34 | {% for file in page.js %} 35 | 36 | {% endfor %} 37 | {% endif %} 38 | 39 | 40 | 62 | 63 | {% if site.googleanalytics %} 64 | 72 | {% endif %} 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /_layouts/docs.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | wide: true 4 | --- 5 | 6 | {% assign section_base = site.baseurl | append: page.section | append: '/' %} 7 |
8 |
9 | {{ page.section }} 10 |

{{ page.title }}

11 | {% if page.authors %} 12 |
Written by 13 |
    14 | {% for author in page.authors %} 15 |
  • {{ author }}
    • 16 | {% endfor %} 17 |
18 |
19 | {% endif %} 20 | {{ content }} 21 |
22 | 23 |
24 | 25 | {% include page-tools.html %} 26 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | wide: true 4 | --- 5 | 6 | {% assign section = page.section %} 7 | 8 | {% assign section_base = site.baseurl | append: '/' | append: section | append: '/' %} 9 | 10 |
11 |
12 | {{ section }} 13 |

{{ page.title }}

14 | {{ content }} 15 |
16 | 17 |
18 | 19 | {% include page-tools.html %} 20 | -------------------------------------------------------------------------------- /_layouts/pattern.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | type: pattern 4 | --- 5 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | wide: true 4 | --- 5 | 6 | {% assign section = page.section %} 7 | 8 | {% assign section_base = site.baseurl | append: section | append: '/' %} 9 | 10 |
11 |
12 | {{ section }} 13 |

{{ page.title }}

14 | {% if page.authors %} 15 |
Written by 16 |
    17 | {% for author in page.authors %} 18 |
  • {{ author }}
    • 19 | {% endfor %} 20 |
21 |
22 | {% endif %} 23 | {{ content }} 24 |
25 | 26 |
27 | 28 | {% include page-tools.html %} 29 | -------------------------------------------------------------------------------- /_sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | // Bitters 1.0.0 2 | // http://bitters.bourbon.io 3 | // Copyright 2013-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | @import "variables"; 7 | 8 | // Neat Settings -- uncomment if using Neat -- must be imported before Neat 9 | @import "grid-settings"; 10 | 11 | @import "buttons"; 12 | @import "forms"; 13 | @import "lists"; 14 | @import "tables"; 15 | @import "typography"; 16 | -------------------------------------------------------------------------------- /_sass/base/_buttons.scss: -------------------------------------------------------------------------------- 1 | #{$all-button-inputs}, 2 | button { 3 | @include appearance(none); 4 | -webkit-font-smoothing: antialiased; 5 | background-color: $action-color; 6 | border-radius: $base-border-radius; 7 | border: none; 8 | color: #fff; 9 | cursor: pointer; 10 | display: inline-block; 11 | font-family: $base-font-family; 12 | font-size: $base-font-size; 13 | font-weight: 600; 14 | line-height: 1; 15 | padding: 0.75em 1em; 16 | text-decoration: none; 17 | user-select: none; 18 | vertical-align: middle; 19 | white-space: nowrap; 20 | 21 | &:hover, 22 | &:focus { 23 | background-color: darken($action-color, 15%); 24 | color: #fff; 25 | } 26 | 27 | &:disabled { 28 | cursor: not-allowed; 29 | opacity: 0.5; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/base/_forms.scss: -------------------------------------------------------------------------------- 1 | fieldset { 2 | background-color: lighten($base-border-color, 10%); 3 | border: $base-border; 4 | margin: 0 0 $small-spacing; 5 | padding: $base-spacing; 6 | } 7 | 8 | input, 9 | label, 10 | select { 11 | display: block; 12 | font-family: $base-font-family; 13 | font-size: $base-font-size; 14 | } 15 | 16 | label { 17 | font-weight: 600; 18 | margin-bottom: $small-spacing / 2; 19 | 20 | &.required::after { 21 | content: "*"; 22 | } 23 | 24 | abbr { 25 | display: none; 26 | } 27 | } 28 | 29 | #{$all-text-inputs}, 30 | select[multiple=multiple], 31 | textarea { 32 | background-color: $base-background-color; 33 | border: $base-border; 34 | border-radius: $base-border-radius; 35 | box-shadow: $form-box-shadow; 36 | box-sizing: border-box; 37 | font-family: $base-font-family; 38 | font-size: $base-font-size; 39 | margin-bottom: $base-spacing / 2; 40 | padding: $base-spacing / 3; 41 | transition: border-color; 42 | width: 100%; 43 | 44 | &:hover { 45 | border-color: darken($base-border-color, 10%); 46 | } 47 | 48 | &:focus { 49 | border-color: $action-color; 50 | box-shadow: $form-box-shadow-focus; 51 | outline: none; 52 | } 53 | } 54 | 55 | textarea { 56 | resize: vertical; 57 | } 58 | 59 | input[type="search"] { 60 | @include appearance(none); 61 | } 62 | 63 | input[type="checkbox"], 64 | input[type="radio"] { 65 | display: inline; 66 | margin-right: $small-spacing / 2; 67 | } 68 | 69 | input[type="file"] { 70 | padding-bottom: $small-spacing; 71 | width: 100%; 72 | } 73 | 74 | select { 75 | margin-bottom: $base-spacing; 76 | max-width: 100%; 77 | width: auto; 78 | } 79 | -------------------------------------------------------------------------------- /_sass/base/_grid-settings.scss: -------------------------------------------------------------------------------- 1 | @import "../neat/neat-helpers"; 2 | 3 | // Neat Overrides 4 | // $column: 90px; 5 | // $gutter: 30px; 6 | // $grid-columns: 12; 7 | // $max-width: em(1088); 8 | 9 | // Neat Breakpoints 10 | $medium-screen: em(640); 11 | $large-screen: em(860); 12 | 13 | $medium-screen-up: new-breakpoint(min-width $medium-screen 4); 14 | $large-screen-up: new-breakpoint(min-width $large-screen 8); 15 | -------------------------------------------------------------------------------- /_sass/base/_lists.scss: -------------------------------------------------------------------------------- 1 | ul, 2 | ol { 3 | list-style-type: none; 4 | margin: 0; 5 | padding: 0; 6 | 7 | &%default-ul { 8 | list-style-type: disc; 9 | margin-bottom: $small-spacing; 10 | padding-left: $base-spacing; 11 | } 12 | 13 | &%default-ol { 14 | list-style-type: decimal; 15 | margin-bottom: $small-spacing; 16 | padding-left: $base-spacing; 17 | } 18 | } 19 | 20 | dl { 21 | margin-bottom: $small-spacing; 22 | 23 | dt { 24 | font-weight: bold; 25 | margin-top: $small-spacing; 26 | } 27 | 28 | dd { 29 | margin: 0; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/base/_tables.scss: -------------------------------------------------------------------------------- 1 | table { 2 | @include font-feature-settings("kern", "liga", "tnum"); 3 | border-collapse: collapse; 4 | margin: $small-spacing 0; 5 | table-layout: fixed; 6 | width: 100%; 7 | } 8 | 9 | th { 10 | border-bottom: 1px solid darken($base-border-color, 15%); 11 | font-weight: 600; 12 | padding: $small-spacing 0; 13 | text-align: left; 14 | } 15 | 16 | td { 17 | border-bottom: $base-border; 18 | padding: $small-spacing 0; 19 | } 20 | 21 | tr, 22 | td, 23 | th { 24 | vertical-align: middle; 25 | } 26 | -------------------------------------------------------------------------------- /_sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | body { 2 | @include font-feature-settings("kern", "liga", "pnum"); 3 | -webkit-font-smoothing: antialiased; 4 | color: $base-font-color; 5 | font-family: $base-font-family; 6 | font-size: $base-font-size; 7 | line-height: $base-line-height; 8 | } 9 | 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5, 15 | h6 { 16 | font-family: $heading-font-family; 17 | font-size: $base-font-size; 18 | line-height: $heading-line-height; 19 | margin: 0 0 $small-spacing; 20 | } 21 | 22 | p { 23 | margin: 0 0 $small-spacing; 24 | } 25 | 26 | a { 27 | color: $action-color; 28 | text-decoration: none; 29 | transition: color 0.1s linear; 30 | 31 | &:active, 32 | &:focus, 33 | &:hover { 34 | color: darken($action-color, 15%); 35 | } 36 | 37 | &:active, 38 | &:focus { 39 | outline: none; 40 | } 41 | } 42 | 43 | hr { 44 | border-bottom: $base-border; 45 | border-left: none; 46 | border-right: none; 47 | border-top: none; 48 | margin: $base-spacing 0; 49 | } 50 | 51 | img, 52 | picture { 53 | margin: 0; 54 | max-width: 100%; 55 | } 56 | -------------------------------------------------------------------------------- /_sass/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | $serif: 'Lora', Georgia, Cambria, "Times New Roman", Times, serif; 3 | $sans-serif: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; 4 | 5 | $monospaced: monaco,Consolas,"Lucida Console",monospace; 6 | 7 | $base-font-family: $sans-serif; 8 | $heading-font-family: $base-font-family; 9 | 10 | // Font Sizes 11 | $base-font-size: 1em; 12 | 13 | // Line height 14 | $base-line-height: 1.5; 15 | $heading-line-height: 1.2; 16 | 17 | // Other Sizes 18 | $base-border-radius: 3px; 19 | $base-spacing: $base-line-height * 1em; 20 | $small-spacing: $base-spacing / 2; 21 | $base-z-index: 0; 22 | 23 | // Colors 24 | $base-accent-color: rgb(122,184,0); 25 | $dark-gray: #333; 26 | $medium-gray: #EDEDED; 27 | $light-gray: #FAFAFA; 28 | 29 | // Font Colors 30 | $base-background-color: #fff; 31 | $base-font-color: $dark-gray; 32 | $action-color: $base-accent-color; 33 | $base-link-color: $base-accent-color !default; 34 | 35 | // Border 36 | $base-border-color: $light-gray; 37 | $base-border: 1px solid $base-border-color; 38 | 39 | // Forms 40 | $form-box-shadow: none; 41 | $form-box-shadow-focus: none; 42 | -------------------------------------------------------------------------------- /_sass/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Bourbon 4.1.1 2 | // http://bourbon.io 3 | // Copyright 2011-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | // Settings 7 | @import "settings/prefixer"; 8 | @import "settings/px-to-em"; 9 | @import "settings/asset-pipeline"; 10 | 11 | // Custom Helpers 12 | @import "helpers/convert-units"; 13 | @import "helpers/font-source-declaration"; 14 | @import "helpers/gradient-positions-parser"; 15 | @import "helpers/is-num"; 16 | @import "helpers/linear-angle-parser"; 17 | @import "helpers/linear-gradient-parser"; 18 | @import "helpers/linear-positions-parser"; 19 | @import "helpers/linear-side-corner-parser"; 20 | @import "helpers/radial-arg-parser"; 21 | @import "helpers/radial-positions-parser"; 22 | @import "helpers/radial-gradient-parser"; 23 | @import "helpers/render-gradients"; 24 | @import "helpers/shape-size-stripper"; 25 | @import "helpers/str-to-num"; 26 | 27 | // Custom Functions 28 | @import "functions/assign"; 29 | @import "functions/color-lightness"; 30 | @import "functions/contains"; 31 | @import "functions/is-length"; 32 | @import "functions/is-size"; 33 | @import "functions/px-to-em"; 34 | @import "functions/px-to-rem"; 35 | @import "functions/strip-units"; 36 | @import "functions/tint-shade"; 37 | @import "functions/transition-property-name"; 38 | @import "functions/unpack"; 39 | @import "functions/modular-scale"; 40 | 41 | // CSS3 Mixins 42 | @import "css3/animation"; 43 | @import "css3/appearance"; 44 | @import "css3/backface-visibility"; 45 | @import "css3/background"; 46 | @import "css3/background-image"; 47 | @import "css3/border-image"; 48 | @import "css3/border-radius"; 49 | @import "css3/box-sizing"; 50 | @import "css3/calc"; 51 | @import "css3/columns"; 52 | @import "css3/filter"; 53 | @import "css3/flex-box"; 54 | @import "css3/font-face"; 55 | @import "css3/font-feature-settings"; 56 | @import "css3/hidpi-media-query"; 57 | @import "css3/hyphens"; 58 | @import "css3/image-rendering"; 59 | @import "css3/keyframes"; 60 | @import "css3/linear-gradient"; 61 | @import "css3/perspective"; 62 | @import "css3/placeholder"; 63 | @import "css3/radial-gradient"; 64 | @import "css3/selection"; 65 | @import "css3/text-decoration"; 66 | @import "css3/transform"; 67 | @import "css3/transition"; 68 | @import "css3/user-select"; 69 | 70 | // Addons & other mixins 71 | @import "addons/clearfix"; 72 | @import "addons/directional-values"; 73 | @import "addons/ellipsis"; 74 | @import "addons/font-family"; 75 | @import "addons/hide-text"; 76 | @import "addons/html5-input-types"; 77 | @import "addons/position"; 78 | @import "addons/prefixer"; 79 | @import "addons/retina-image"; 80 | @import "addons/size"; 81 | @import "addons/timing-functions"; 82 | @import "addons/triangle"; 83 | @import "addons/word-wrap"; 84 | 85 | // Soon to be deprecated Mixins 86 | @import "bourbon-deprecated-upcoming"; 87 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // The clearfix mixin provides an easy way to contain floats 2 | // 3 | // Example usage: 4 | // .wrapper { 5 | // @include clearfix; 6 | // } 7 | 8 | @mixin clearfix { 9 | &::after { 10 | clear: both; 11 | content: ""; 12 | display: table; 13 | } 14 | } 15 | 16 | // Acknowledgements: 17 | // Thierry Koblentz, cssmojo 18 | // http://goo.gl/AQWvyH 19 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_directional-values.scss: -------------------------------------------------------------------------------- 1 | // directional-property mixins are shorthands 2 | // for writing properties like the following 3 | // 4 | // @include margin(null 0 10px); 5 | // ------ 6 | // margin-right: 0; 7 | // margin-bottom: 10px; 8 | // margin-left: 0; 9 | // 10 | // - or - 11 | // 12 | // @include border-style(dotted null); 13 | // ------ 14 | // border-top-style: dotted; 15 | // border-bottom-style: dotted; 16 | // 17 | // ------ 18 | // 19 | // Note: You can also use false instead of null 20 | 21 | @function collapse-directionals($vals) { 22 | $output: null; 23 | 24 | $A: nth( $vals, 1 ); 25 | $B: if( length($vals) < 2, $A, nth($vals, 2)); 26 | $C: if( length($vals) < 3, $A, nth($vals, 3)); 27 | $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); 28 | 29 | @if $A == 0 { $A: 0 } 30 | @if $B == 0 { $B: 0 } 31 | @if $C == 0 { $C: 0 } 32 | @if $D == 0 { $D: 0 } 33 | 34 | @if $A == $B and $A == $C and $A == $D { $output: $A } 35 | @else if $A == $C and $B == $D { $output: $A $B } 36 | @else if $B == $D { $output: $A $B $C } 37 | @else { $output: $A $B $C $D } 38 | 39 | @return $output; 40 | } 41 | 42 | @function contains-falsy($list) { 43 | @each $item in $list { 44 | @if not $item { 45 | @return true; 46 | } 47 | } 48 | 49 | @return false; 50 | } 51 | 52 | @mixin directional-property($pre, $suf, $vals) { 53 | // Property Names 54 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 55 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 56 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 57 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 58 | $all: $pre + if($suf, "-#{$suf}", ""); 59 | 60 | $vals: collapse-directionals($vals); 61 | 62 | @if contains-falsy($vals) { 63 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 64 | 65 | @if length($vals) == 1 { 66 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 67 | } @else { 68 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 69 | } 70 | 71 | // prop: top/bottom right/left 72 | @if length($vals) == 2 { 73 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 74 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 75 | 76 | // prop: top right/left bottom 77 | } @else if length($vals) == 3 { 78 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 79 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 80 | 81 | // prop: top right bottom left 82 | } @else if length($vals) == 4 { 83 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 84 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 85 | } 86 | 87 | // prop: top/right/bottom/left 88 | } @else { 89 | #{$all}: $vals; 90 | } 91 | } 92 | 93 | @mixin margin($vals...) { 94 | @include directional-property(margin, false, $vals...); 95 | } 96 | 97 | @mixin padding($vals...) { 98 | @include directional-property(padding, false, $vals...); 99 | } 100 | 101 | @mixin border-style($vals...) { 102 | @include directional-property(border, style, $vals...); 103 | } 104 | 105 | @mixin border-color($vals...) { 106 | @include directional-property(border, color, $vals...); 107 | } 108 | 109 | @mixin border-width($vals...) { 110 | @include directional-property(border, width, $vals...); 111 | } 112 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin ellipsis($width: 100%) { 2 | display: inline-block; 3 | max-width: $width; 4 | overflow: hidden; 5 | text-overflow: ellipsis; 6 | white-space: nowrap; 7 | word-wrap: normal; 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif; 2 | $helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 3 | $lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; 5 | $verdana: "Verdana", "Geneva", sans-serif; 6 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text($height: 1em) { 2 | height: $height; 3 | line-height: 1.5; 4 | overflow: hidden; 5 | 6 | &::before { 7 | content: ""; 8 | display: block; 9 | width: 0; 10 | height: 100%; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | // Set element positioning in a single statement 2 | 3 | @mixin position($position: relative, $coordinates: null null null null) { 4 | 5 | @if type-of($position) == list { 6 | $coordinates: $position; 7 | $position: relative; 8 | } 9 | 10 | $coordinates: unpack($coordinates); 11 | 12 | $offsets: ( 13 | top: nth($coordinates, 1), 14 | right: nth($coordinates, 2), 15 | bottom: nth($coordinates, 3), 16 | left: nth($coordinates, 4) 17 | ); 18 | 19 | position: $position; 20 | 21 | @each $offset, $value in $offsets { 22 | @if is-length($value) { 23 | #{$offset}: $value; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | // Variables located in /settings/_prefixer.scss 5 | 6 | @mixin prefixer ($property, $value, $prefixes) { 7 | @each $prefix in $prefixes { 8 | @if $prefix == webkit { 9 | @if $prefix-for-webkit { 10 | -webkit-#{$property}: $value; 11 | } 12 | } 13 | @else if $prefix == moz { 14 | @if $prefix-for-mozilla { 15 | -moz-#{$property}: $value; 16 | } 17 | } 18 | @else if $prefix == ms { 19 | @if $prefix-for-microsoft { 20 | -ms-#{$property}: $value; 21 | } 22 | } 23 | @else if $prefix == o { 24 | @if $prefix-for-opera { 25 | -o-#{$property}: $value; 26 | } 27 | } 28 | @else if $prefix == spec { 29 | @if $prefix-for-spec { 30 | #{$property}: $value; 31 | } 32 | } 33 | @else { 34 | @warn "Unrecognized prefix: #{$prefix}"; 35 | } 36 | } 37 | } 38 | 39 | @mixin disable-prefix-for-all() { 40 | $prefix-for-webkit: false !global; 41 | $prefix-for-mozilla: false !global; 42 | $prefix-for-microsoft: false !global; 43 | $prefix-for-opera: false !global; 44 | $prefix-for-spec: false !global; 45 | } 46 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | @if $asset-pipeline { 11 | @if $retina-filename { 12 | background-image: image-url("#{$retina-filename}.#{$extension}"); 13 | } 14 | @else { 15 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 16 | } 17 | } 18 | 19 | @else { 20 | @if $retina-filename { 21 | background-image: url("#{$retina-filename}.#{$extension}"); 22 | } 23 | @else { 24 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 25 | } 26 | } 27 | 28 | background-size: $background-size; 29 | 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | // Set `width` and `height` in a single statement 2 | 3 | @mixin size($value) { 4 | $width: nth($value, 1); 5 | $height: $width; 6 | 7 | @if length($value) > 1 { 8 | $height: nth($value, 2); 9 | } 10 | 11 | @if is-size($height) { 12 | height: $height; 13 | } 14 | 15 | @else { 16 | @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; 17 | } 18 | 19 | @if is-size($width) { 20 | width: $width; 21 | } 22 | 23 | @else { 24 | @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | $width: nth($size, 1); 6 | $height: nth($size, length($size)); 7 | 8 | $foreground-color: nth($color, 1); 9 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 10 | 11 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 12 | 13 | $width: $width / 2; 14 | $height: if(length($size) > 1, $height, $height/2); 15 | 16 | @if $direction == up { 17 | border-left: $width solid $background-color; 18 | border-right: $width solid $background-color; 19 | border-bottom: $height solid $foreground-color; 20 | 21 | } @else if $direction == right { 22 | border-top: $width solid $background-color; 23 | border-bottom: $width solid $background-color; 24 | border-left: $height solid $foreground-color; 25 | 26 | } @else if $direction == down { 27 | border-left: $width solid $background-color; 28 | border-right: $width solid $background-color; 29 | border-top: $height solid $foreground-color; 30 | 31 | } @else if $direction == left { 32 | border-top: $width solid $background-color; 33 | border-bottom: $width solid $background-color; 34 | border-right: $height solid $foreground-color; 35 | } 36 | } 37 | 38 | @else if ($direction == up-right) or ($direction == up-left) { 39 | border-top: $height solid $foreground-color; 40 | 41 | @if $direction == up-right { 42 | border-left: $width solid $background-color; 43 | 44 | } @else if $direction == up-left { 45 | border-right: $width solid $background-color; 46 | } 47 | } 48 | 49 | @else if ($direction == down-right) or ($direction == down-left) { 50 | border-bottom: $height solid $foreground-color; 51 | 52 | @if $direction == down-right { 53 | border-left: $width solid $background-color; 54 | 55 | } @else if $direction == down-left { 56 | border-right: $width solid $background-color; 57 | } 58 | } 59 | 60 | @else if ($direction == inset-up) { 61 | border-width: $height $width; 62 | border-style: solid; 63 | border-color: $background-color $background-color $foreground-color; 64 | } 65 | 66 | @else if ($direction == inset-down) { 67 | border-width: $height $width; 68 | border-style: solid; 69 | border-color: $foreground-color $background-color $background-color; 70 | } 71 | 72 | @else if ($direction == inset-right) { 73 | border-width: $width $height; 74 | border-style: solid; 75 | border-color: $background-color $background-color $background-color $foreground-color; 76 | } 77 | 78 | @else if ($direction == inset-left) { 79 | border-width: $width $height; 80 | border-style: solid; 81 | border-color: $background-color $foreground-color $background-color $background-color; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin word-wrap($wrap: break-word) { 2 | overflow-wrap: $wrap; 3 | word-wrap: $wrap; 4 | 5 | @if $wrap == break-word { 6 | word-break: break-all; 7 | } @else { 8 | word-break: $wrap; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or $background-type == list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 0, 3); 19 | $gradient-type: str-slice($background-str, 0, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 0, 3); 14 | $gradient-type: str-slice($border-str, 0, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Border Radius (Shorthand) 2 | // Provides a shorthand syntax to target and add border radii to both corners on one side of a box 3 | 4 | @mixin border-top-radius($radii) { 5 | border-top-left-radius: $radii; 6 | border-top-right-radius: $radii; 7 | } 8 | 9 | @mixin border-right-radius($radii) { 10 | border-bottom-right-radius: $radii; 11 | border-top-right-radius: $radii; 12 | } 13 | 14 | @mixin border-bottom-radius($radii) { 15 | border-bottom-left-radius: $radii; 16 | border-bottom-right-radius: $radii; 17 | } 18 | 19 | @mixin border-left-radius($radii) { 20 | border-bottom-left-radius: $radii; 21 | border-top-left-radius: $radii; 22 | } 23 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: null, $G4: null, 4 | $G5: null, $G6: null, 5 | $G7: null, $G8: null, 6 | $G9: null, $G10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 12 | $G1: nth($data, 1); 13 | $G2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $G1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 32 | $pos: if($pos, '#{$pos}, ', null); 33 | $pos-spec: if($pos, 'at #{$pos}', null); 34 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 38 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 39 | } 40 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_selection.scss: -------------------------------------------------------------------------------- 1 | @mixin selection { 2 | $before-colons: ""; 3 | 4 | @if & { 5 | $before-colons: "&" 6 | } 7 | 8 | #{$before-colons}::selection { 9 | @content; 10 | } 11 | #{$before-colons}::-moz-selection { 12 | @content; 13 | } 14 | } -------------------------------------------------------------------------------- /_sass/bourbon/css3/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | @mixin text-decoration($value) { 2 | // || || 3 | @include prefixer(text-decoration, $value, moz); 4 | } 5 | 6 | @mixin text-decoration-line($line: none) { 7 | // none || underline || overline || line-through 8 | @include prefixer(text-decoration-line, $line, moz); 9 | } 10 | 11 | @mixin text-decoration-style($style: solid) { 12 | // solid || double || dotted || dashed || wavy 13 | @include prefixer(text-decoration-style, $style, moz webkit); 14 | } 15 | 16 | @mixin text-decoration-color($color: currentColor) { 17 | // currentColor || 18 | @include prefixer(text-decoration-color, $color, moz); 19 | } 20 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition ($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } 34 | 35 | // Create lists for non-prefixed transition properties 36 | @else { 37 | $webkit: append($webkit, $list, comma); 38 | $moz: append($moz, $list, comma); 39 | $spec: append($spec, $list, comma); 40 | } 41 | } 42 | 43 | @if $needs-prefixes { 44 | -webkit-transition: $webkit; 45 | -moz-transition: $moz; 46 | transition: $spec; 47 | } 48 | @else { 49 | @if length($properties) >= 1 { 50 | @include prefixer(transition, $properties, webkit moz spec); 51 | } 52 | 53 | @else { 54 | $properties: all 0.15s ease-out 0s; 55 | @include prefixer(transition, $properties, webkit moz spec); 56 | } 57 | } 58 | } 59 | 60 | @mixin transition-property ($properties...) { 61 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 62 | -moz-transition-property: transition-property-names($properties, 'moz'); 63 | transition-property: transition-property-names($properties, false); 64 | } 65 | 66 | @mixin transition-duration ($times...) { 67 | @include prefixer(transition-duration, $times, webkit moz spec); 68 | } 69 | 70 | @mixin transition-timing-function ($motions...) { 71 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 72 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 73 | } 74 | 75 | @mixin transition-delay ($times...) { 76 | @include prefixer(transition-delay, $times, webkit moz spec); 77 | } 78 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_assign.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list : (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } -------------------------------------------------------------------------------- /_sass/bourbon/functions/_color-lightness.scss: -------------------------------------------------------------------------------- 1 | // Programatically determines whether a color is light or dark 2 | // Returns a boolean 3 | // More details here http://robots.thoughtbot.com/closer-look-color-lightness 4 | 5 | @function is-light($hex-color) { 6 | $-local-red: red(rgba($hex-color, 1.0)); 7 | $-local-green: green(rgba($hex-color, 1.0)); 8 | $-local-blue: blue(rgba($hex-color, 1.0)); 9 | 10 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 11 | 12 | @return $-local-lightness > .6; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_contains.scss: -------------------------------------------------------------------------------- 1 | // Test a Sass list to see if it contains a defined value 2 | // Allows for checking if a list contains several values at once 3 | 4 | @function contains($list, $values...) { 5 | @each $value in $values { 6 | @if type-of(index($list, $value)) != "number" { 7 | @return false; 8 | } 9 | } 10 | 11 | @return true; 12 | } 13 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_is-length.scss: -------------------------------------------------------------------------------- 1 | // Check for a valid length 2 | 3 | @function is-length($value) { 4 | @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == 'calc' 5 | or index(auto inherit initial 0, $value) 6 | or (type-of($value) == "number" and not(unitless($value)))); 7 | } 8 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_is-size.scss: -------------------------------------------------------------------------------- 1 | // Check for a valid size 2 | 3 | @function is-size($value) { 4 | @return is-length($value) 5 | or contains("fill" "fit-content" "min-content" "max-content", $value); 6 | } 7 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | $modular-scale-ratio: $perfect-fourth !default; 21 | $modular-scale-base: em($em-base) !default; 22 | 23 | @function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { 24 | $v1: nth($value, 1); 25 | $v2: nth($value, length($value)); 26 | $value: $v1; 27 | 28 | // scale $v2 to just above $v1 29 | @while $v2 > $v1 { 30 | $v2: ($v2 / $ratio); // will be off-by-1 31 | } 32 | @while $v2 < $v1 { 33 | $v2: ($v2 * $ratio); // will fix off-by-1 34 | } 35 | 36 | // check AFTER scaling $v2 to prevent double-counting corner-case 37 | $double-stranded: $v2 > $v1; 38 | 39 | @if $increment > 0 { 40 | @for $i from 1 through $increment { 41 | @if $double-stranded and ($v1 * $ratio) > $v2 { 42 | $value: $v2; 43 | $v2: ($v2 * $ratio); 44 | } @else { 45 | $v1: ($v1 * $ratio); 46 | $value: $v1; 47 | } 48 | } 49 | } 50 | 51 | @if $increment < 0 { 52 | // adjust $v2 to just below $v1 53 | @if $double-stranded { 54 | $v2: ($v2 / $ratio); 55 | } 56 | 57 | @for $i from $increment through -1 { 58 | @if $double-stranded and ($v1 / $ratio) < $v2 { 59 | $value: $v2; 60 | $v2: ($v2 / $ratio); 61 | } @else { 62 | $v1: ($v1 / $ratio); 63 | $value: $v1; 64 | } 65 | } 66 | } 67 | 68 | @return $value; 69 | } 70 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | // Srtips the units from a value. e.g. 12px -> 12 2 | 3 | @function strip-units($val) { 4 | @return ($val / ($val * 0 + 1)); 5 | } 6 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /_sass/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | // Convert shorthand to the 4-value syntax 2 | 3 | @function unpack($shorthand) { 4 | @if length($shorthand) == 1 { 5 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 6 | } 7 | @else if length($shorthand) == 2 { 8 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 9 | } 10 | @else if length($shorthand) == 3 { 11 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 12 | } 13 | @else { 14 | @return $shorthand; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; 7 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_font-source-declaration.scss: -------------------------------------------------------------------------------- 1 | // Used for creating the source string for fonts using @font-face 2 | // Reference: http://goo.gl/Ru1bKP 3 | 4 | @function font-url-prefixer($asset-pipeline) { 5 | @if $asset-pipeline == true { 6 | @return font-url; 7 | } @else { 8 | @return url; 9 | } 10 | } 11 | 12 | @function font-source-declaration( 13 | $font-family, 14 | $file-path, 15 | $asset-pipeline, 16 | $file-formats, 17 | $font-url) { 18 | 19 | $src: null; 20 | 21 | $formats-map: ( 22 | eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), 23 | woff2: "#{$file-path}.woff2" format("woff2"), 24 | woff: "#{$file-path}.woff" format("woff"), 25 | ttf: "#{$file-path}.ttf" format("truetype"), 26 | svg: "#{$file-path}.svg##{$font-family}" format("svg") 27 | ); 28 | 29 | @each $key, $values in $formats-map { 30 | @if contains($file-formats, $key) { 31 | $file-path: nth($values, 1); 32 | $font-format: nth($values, 2); 33 | 34 | @if $asset-pipeline == true { 35 | $src: append($src, font-url($file-path) $font-format, comma); 36 | } @else { 37 | $src: append($src, url($file-path) $font-format, comma); 38 | } 39 | } 40 | } 41 | 42 | @return $src; 43 | } 44 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_is-num.scss: -------------------------------------------------------------------------------- 1 | // Check for a valid number 2 | 3 | @function _is-num($value) { 4 | @return contains('0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9, $value); 5 | } 6 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: _is-num(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: null; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ) 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ) 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ) 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ) 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == '-' { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == '.' { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /_sass/bourbon/settings/_asset-pipeline.scss: -------------------------------------------------------------------------------- 1 | $asset-pipeline: false !default; 2 | -------------------------------------------------------------------------------- /_sass/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | // Variable settings for /addons/prefixer.scss 2 | $prefix-for-webkit: true !default; 3 | $prefix-for-mozilla: true !default; 4 | $prefix-for-microsoft: true !default; 5 | $prefix-for-opera: true !default; 6 | $prefix-for-spec: true !default; // required for keyframe mixin 7 | -------------------------------------------------------------------------------- /_sass/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /_sass/icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('fonts/icomoon.eot?-xa2jhf'); 4 | src:url('fonts/icomoon.eot?#iefix-xa2jhf') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?-xa2jhf') format('truetype'), 6 | url('fonts/icomoon.woff?-xa2jhf') format('woff'), 7 | url('fonts/icomoon.svg?-xa2jhf#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | @mixin icon-font() { 13 | font-family: 'icomoon'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | [class^="icon-"], [class*=" icon-"] { 27 | @include icon-font(); 28 | } 29 | 30 | .icon-skip-back:before { 31 | content: "\e050"; 32 | } 33 | .icon-rewind:before { 34 | content: "\e051"; 35 | } 36 | .icon-speech-bubble:before { 37 | content: "\e60c"; 38 | } 39 | .icon-circle-check:before { 40 | content: "\e60b"; 41 | } 42 | .icon-plus:before { 43 | content: "\e60a"; 44 | } 45 | .icon-mail:before { 46 | content: "\e609"; 47 | } 48 | .icon-translate:before { 49 | content: "\e608"; 50 | } 51 | .icon-arrow-drop-down:before { 52 | content: "\e607"; 53 | } 54 | .icon-youtube:before { 55 | content: "\e606"; 56 | } 57 | .icon-square-minus:before { 58 | content: "\e603"; 59 | } 60 | .icon-square-plus:before { 61 | content: "\e604"; 62 | } 63 | .icon-link:before { 64 | content: "\e602"; 65 | } 66 | .icon-share:before { 67 | content: "\e601"; 68 | } 69 | .icon-git-compare:before { 70 | content: "\f0ac"; 71 | } 72 | .icon-git-pull-request:before { 73 | content: "\f009"; 74 | } 75 | .icon-eye:before { 76 | content: "\f04e"; 77 | } 78 | .icon-test-tube:before { 79 | content: "\e600"; 80 | } 81 | .icon-mark-github:before { 82 | content: "\f00a"; 83 | } 84 | .icon-markdown:before { 85 | content: "\f0c9"; 86 | } 87 | .icon-pencil:before { 88 | content: "\f058"; 89 | } 90 | .icon-fast-forward:before { 91 | content: "\e055"; 92 | } 93 | .icon-heart:before { 94 | content: "\e024"; 95 | } 96 | .icon-paper:before { 97 | content: "\e034"; 98 | } 99 | .icon-search:before { 100 | content: "\e036"; 101 | } 102 | .icon-menu:before { 103 | content: "\e120"; 104 | } 105 | .icon-github:before { 106 | content: "\eab4"; 107 | } 108 | .icon-section:before { 109 | content: "\ea76"; 110 | } 111 | .icon-book:before { 112 | content: "\e91f"; 113 | } 114 | .icon-file-pdf:before { 115 | content: "\eada"; 116 | } 117 | .icon-world:before { 118 | content: "\e605"; 119 | } 120 | .icon-info:before { 121 | content: "\ea0c"; 122 | } 123 | -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.buttonbars.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu buttonbars addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | 8 | .mm-buttonbar 9 | { 10 | border: 1px solid transparent; 11 | border-radius: $mm_padding / 2; 12 | text-align: center; 13 | line-height: $mm_buttonbarHeight; 14 | overflow: hidden; 15 | display: block; 16 | padding: 0; 17 | margin: 0; 18 | position: relative; 19 | 20 | @include mm_clearfix; 21 | 22 | > * 23 | { 24 | border-left: 1px solid transparent; 25 | box-sizing: border-box; 26 | display: block; 27 | width: 100%; 28 | height: 100%; 29 | float: left; 30 | 31 | @include mm_ellipsis; 32 | } 33 | > a 34 | { 35 | text-decoration: none; 36 | } 37 | > input 38 | { 39 | position: absolute; 40 | left: -1000px; 41 | top: -1000px; 42 | } 43 | > input:checked + label 44 | { 45 | border-color: transparent !important; 46 | } 47 | 48 | > *:first-child, 49 | > input:first-child + * 50 | { 51 | border-left: none; 52 | } 53 | 54 | 55 | &.mm-buttonbar-2 > * 56 | { 57 | width: 50%; 58 | } 59 | &.mm-buttonbar-3 > * 60 | { 61 | width: 33.33%; 62 | } 63 | &.mm-buttonbar-4 > * 64 | { 65 | width: 25%; 66 | } 67 | &.mm-buttonbar-5 > * 68 | { 69 | width: 20%; 70 | } 71 | } 72 | 73 | .mm-header .mm-buttonbar 74 | { 75 | margin-top: $mm_headerHeight - ( $mm_buttonbarHeight * 2 ); 76 | margin-left: -( $mm_btnSize - $mm_padding ); 77 | margin-right: -( $mm_btnSize - $mm_padding ); 78 | } 79 | 80 | .mm-footer .mm-buttonbar 81 | { 82 | border: none; 83 | border-radius: none; 84 | line-height: $mm_footerHeight; 85 | margin: ( -$mm_padding ) ( -$mm_padding ) 0 ( -( $mm_padding * 2 ) ); 86 | 87 | > * 88 | { 89 | border-left: none; 90 | } 91 | } 92 | 93 | .mm-list > li > .mm-buttonbar 94 | { 95 | margin: $mm_padding ( $mm_padding * 2 ); 96 | } 97 | 98 | 99 | @include mm_colors_buttonbars; -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.counters.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu counters addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | 8 | em.mm-counter 9 | { 10 | font: inherit; 11 | font-size: $mm_fontSize; 12 | font-style: normal; 13 | text-indent: 0; 14 | line-height: $mm_btnSize / 2; 15 | display: block; 16 | margin-top: -( $mm_btnSize / 4 ); 17 | position: absolute; 18 | right: $mm_subopenWidth; 19 | top: 50%; 20 | 21 | + a.mm-subopen 22 | { 23 | padding-left: $mm_counterWidth; 24 | 25 | + a, 26 | + span 27 | { 28 | margin-right: $mm_counterWidth + $mm_subopenWidth; 29 | } 30 | } 31 | + a.mm-fullsubopen 32 | { 33 | padding-left: 0; 34 | } 35 | } 36 | 37 | // vertical submenu 38 | .mm-vertical 39 | { 40 | em.mm-counter 41 | { 42 | top: ( $mm_btnSize / 4 ) + 2; 43 | margin-top: 0; 44 | } 45 | } 46 | 47 | // Search 48 | .mm-nosubresults > em.mm-counter 49 | { 50 | display: none; 51 | } 52 | 53 | @include mm_colors_counters; -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.dragopen.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu dragOpen addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | html.mm-opened.mm-dragging 8 | { 9 | .mm-menu, 10 | .mm-page, 11 | .mm-fixed-top, 12 | .mm-fixed-bottom, 13 | #mm-blocker 14 | { 15 | @include mm_webkit-prefix( "transition-duration", 0s ); 16 | } 17 | } -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.footer.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu footer addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | 8 | .mm-footer 9 | { 10 | background: inherit; 11 | border-top: 1px solid transparent; 12 | text-align: center; 13 | line-height: $mm_footerHeight - ( $mm_padding * 2 ); 14 | 15 | box-sizing: border-box; 16 | width: 100%; 17 | height: $mm_footerHeight; 18 | padding: $mm_padding $mm_padding 0 ( $mm_padding * 2 ); 19 | position: absolute; 20 | z-index: 2; 21 | bottom: 0; 22 | left: 0; 23 | } 24 | 25 | .mm-menu.mm-hasfooter 26 | { 27 | > .mm-panel:after 28 | { 29 | height: $mm_footerHeight + $mm_btnSize; 30 | } 31 | } 32 | 33 | 34 | @include mm_colors_footer; -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.header.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu header addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | 8 | .mm-header 9 | { 10 | background: inherit; 11 | border-bottom: 1px solid transparent; 12 | text-align: center; 13 | line-height: $mm_btnSize / 2; 14 | 15 | box-sizing: border-box; 16 | width: 100%; 17 | height: $mm_headerHeight; 18 | padding: 0 ( $mm_btnSize + $mm_padding ); 19 | position: absolute; 20 | z-index: 2; 21 | top: 0; 22 | left: 0; 23 | 24 | .mm-title, 25 | .mm-prev, 26 | .mm-next, 27 | .mm-close 28 | { 29 | padding-top: $mm_headerPaddingTop; 30 | } 31 | .mm-title 32 | { 33 | @include mm_ellipsis; 34 | 35 | display: inline-block; 36 | width: 100%; 37 | position: relative; 38 | } 39 | 40 | .mm-prev, 41 | .mm-next, 42 | .mm-close 43 | { 44 | text-decoration: none; 45 | display: block; 46 | box-sizing: border-box; 47 | min-width: $mm_padding; 48 | height: 100%; 49 | position: absolute; 50 | top: 0; 51 | z-index: 1; 52 | } 53 | .mm-prev 54 | { 55 | padding-left: ( $mm_padding * 2 ); 56 | padding-right: $mm_padding; 57 | left: 0; 58 | } 59 | .mm-next, 60 | .mm-close 61 | { 62 | padding-left: $mm_padding; 63 | padding-right: ( $mm_padding * 2 ); 64 | right: 0; 65 | } 66 | [href] 67 | { 68 | &.mm-prev:before, 69 | &.mm-next:after 70 | { 71 | @include mm_arrow; 72 | } 73 | &.mm-prev:before 74 | { 75 | @include mm_arrow-prev; 76 | margin-left: 2px; 77 | margin-right: $mm_padding / 2; 78 | } 79 | &.mm-next:after, 80 | &.mm-close:after 81 | { 82 | margin-left: $mm_padding / 2; 83 | margin-right: -2px; 84 | } 85 | &.mm-next:after 86 | { 87 | @include mm_arrow-next; 88 | } 89 | &.mm-close:after 90 | { 91 | content: 'x'; 92 | } 93 | } 94 | } 95 | 96 | .mm-menu.mm-hassearch .mm-header 97 | { 98 | height: $mm_headerHeight - $mm_padding; 99 | top: $mm_searchHeight; 100 | 101 | .mm-title, 102 | .mm-prev, 103 | .mm-next, 104 | .mm-close 105 | { 106 | padding-top: $mm_headerPaddingTop - $mm_padding; 107 | } 108 | } 109 | 110 | $mm_paddingBeneathHeader: $mm_padding * 2 !default; 111 | .mm-menu.mm-hasheader 112 | { 113 | li.mm-subtitle 114 | { 115 | display: none; 116 | } 117 | > .mm-panel 118 | { 119 | padding-top: $mm_headerHeight + $mm_paddingBeneathHeader; 120 | &.mm-list 121 | { 122 | padding-top: $mm_headerHeight; 123 | } 124 | > .mm-list:first-child 125 | { 126 | margin-top: -$mm_paddingBeneathHeader; 127 | } 128 | } 129 | &.mm-hassearch > .mm-panel 130 | { 131 | padding-top: $mm_headerHeight + $mm_searchHeight + $mm_padding; 132 | 133 | &.mm-list 134 | { 135 | padding-top: $mm_headerHeight + $mm_searchHeight - $mm_padding; 136 | } 137 | } 138 | } 139 | 140 | 141 | 142 | @include mm_colors_header; -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.labels.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu labels addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | .mm-list 8 | { 9 | li.mm-label 10 | { 11 | > span 12 | { 13 | @include mm_ellipsis; 14 | padding: 0; 15 | line-height: $mm_labelHeight; 16 | } 17 | 18 | &.mm-opened a.mm-subopen:after 19 | { 20 | @include mm_webkit-prefix( "transform", rotate( 45deg ) ); 21 | } 22 | } 23 | li.mm-collapsed:not( .mm-uncollapsed ) 24 | { 25 | display: none; 26 | } 27 | } 28 | 29 | .mm-menu.mm-vertical .mm-list 30 | { 31 | > li.mm-label 32 | { 33 | > a.mm-subopen:after 34 | { 35 | top: ( $mm_labelHeight / 2 ) - 4; 36 | } 37 | } 38 | } 39 | 40 | @include mm_colors_labels; -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.offcanvas.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu offcanvas addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | 8 | // Animations 9 | .mm-page 10 | { 11 | box-sizing: border-box; 12 | position: relative; 13 | } 14 | .mm-slideout 15 | { 16 | -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; 17 | -ms-transition: -ms-transform $mm_transitionDuration $mm_transitionFunction; 18 | transition: transform $mm_transitionDuration $mm_transitionFunction; 19 | } 20 | 21 | // Container, Page, Blocker 22 | html.mm-opened 23 | { 24 | overflow: hidden; 25 | position: relative; 26 | 27 | body 28 | { 29 | overflow: hidden; 30 | } 31 | } 32 | 33 | html.mm-background .mm-page 34 | { 35 | background: inherit; 36 | } 37 | #mm-blocker 38 | { 39 | background: rgba( 3, 2, 1, 0 ); 40 | display: none; 41 | width: 100%; 42 | height: 100%; 43 | position: fixed; 44 | top: 0; 45 | left: 0; 46 | z-index: 999999; 47 | } 48 | html.mm-opened, 49 | html.mm-blocking 50 | { 51 | #mm-blocker 52 | { 53 | display: block; 54 | } 55 | } 56 | 57 | // Menu 58 | .mm-menu 59 | { 60 | &.mm-offcanvas 61 | { 62 | display: none; 63 | position: fixed; 64 | } 65 | &.mm-current 66 | { 67 | display: block; 68 | } 69 | } 70 | 71 | 72 | @include mm_sizing; -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.searchfield.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu searchfield addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | .mm-search, 8 | .mm-search input 9 | { 10 | box-sizing: border-box; 11 | } 12 | .mm-list 13 | { 14 | > li.mm-search 15 | { 16 | padding: $mm_padding; 17 | margin-top: -( $mm_padding * 2 ); 18 | } 19 | > li.mm-subtitle + li.mm-search 20 | { 21 | margin-top: 0; 22 | } 23 | } 24 | div.mm-panel > div.mm-search 25 | { 26 | padding: 0 0 $mm_padding 0; 27 | } 28 | .mm-menu.mm-hasheader .mm-list > li.mm-search 29 | { 30 | margin-top: 0; 31 | } 32 | .mm-menu > .mm-search 33 | { 34 | background: inherit; 35 | width: 100%; 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | z-index: 2; 40 | } 41 | .mm-search 42 | { 43 | padding: $mm_padding; 44 | 45 | input 46 | { 47 | border: none; 48 | border-radius: $mm_searchfieldHeight; 49 | font: inherit; 50 | font-size: $mm_fontSize; 51 | line-height: $mm_searchfieldHeight; 52 | outline: none; 53 | display: block; 54 | width: 100%; 55 | height: $mm_searchfieldHeight; 56 | margin: 0; 57 | padding: 0 $mm_padding; 58 | } 59 | input::-ms-clear 60 | { 61 | display: none; 62 | } 63 | } 64 | 65 | .mm-menu .mm-noresultsmsg 66 | { 67 | text-align: center; 68 | font-size: round( $mm_fontSize * 1.5 ); 69 | display: none; 70 | padding: ( $mm_btnSize * 1.5 ) 0; 71 | 72 | &:after 73 | { 74 | border: none !important; 75 | } 76 | } 77 | .mm-noresults .mm-noresultsmsg 78 | { 79 | display: block; 80 | } 81 | 82 | $mm_paddingBeneathHeader: $mm_padding * 2 !default; 83 | .mm-menu 84 | { 85 | li.mm-nosubresults > a.mm-subopen 86 | { 87 | display: none; 88 | 89 | + a, 90 | + span 91 | { 92 | padding-right: 10px; 93 | } 94 | } 95 | &.mm-hassearch 96 | { 97 | > .mm-panel 98 | { 99 | padding-top: $mm_searchHeight + $mm_paddingBeneathHeader; 100 | 101 | > .mm-list:first-child 102 | { 103 | margin-top: -$mm_paddingBeneathHeader; 104 | } 105 | } 106 | } 107 | &.mm-hasheader 108 | { 109 | > .mm-panel 110 | { 111 | > div.mm-search:first-child 112 | { 113 | margin-top: -$mm_padding; 114 | 115 | + .mm-list 116 | { 117 | padding-top: 0; 118 | } 119 | } 120 | } 121 | } 122 | } 123 | 124 | 125 | @include mm_colors_searchfield; -------------------------------------------------------------------------------- /_sass/mmenu/addons/jquery.mmenu.toggles.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu toggles addon CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | 8 | input.mm-toggle, 9 | input.mm-check 10 | { 11 | position: absolute; 12 | left: -10000px; 13 | } 14 | 15 | label.mm-toggle, 16 | label.mm-check 17 | { 18 | margin: 0; 19 | position: absolute; 20 | bottom: 50%; 21 | z-index: 2; 22 | 23 | &:before 24 | { 25 | content: ''; 26 | display: block; 27 | } 28 | } 29 | 30 | // styling 31 | label.mm-toggle 32 | { 33 | border-radius: $mm_toggleHeight; 34 | width: $mm_toggleWidth; 35 | height: $mm_toggleHeight; 36 | margin-bottom: -( $mm_toggleHeight / 2 ); 37 | 38 | &:before 39 | { 40 | border-radius: $mm_toggleHeight; 41 | width: $mm_toggleHeight - 2; 42 | height: $mm_toggleHeight - 2; 43 | margin: 1px; 44 | } 45 | } 46 | input.mm-toggle:checked ~ label.mm-toggle:before 47 | { 48 | float: right; 49 | } 50 | 51 | label.mm-check 52 | { 53 | width: $mm_checkWidth; 54 | height: $mm_checkHeight; 55 | margin-bottom: -( $mm_checkHeight / 2 ); 56 | 57 | &:before 58 | { 59 | border-left: 3px solid; 60 | border-bottom: 3px solid; 61 | width: 40%; 62 | height: 20%; 63 | margin: 25% 0 0 20%; 64 | opacity: 0.1; 65 | 66 | @include mm-webkit-prefix( 'transform', rotate( -45deg ) ); 67 | } 68 | } 69 | input.mm-check:checked ~ label.mm-check:before 70 | { 71 | opacity: 1; 72 | } 73 | 74 | 75 | // vertical submenu 76 | .mm-menu.mm-vertical .mm-list 77 | { 78 | > li label 79 | { 80 | &.mm-toggle, 81 | &.mm-check 82 | { 83 | bottom: auto; 84 | margin-bottom: 0; 85 | } 86 | &.mm-toggle 87 | { 88 | top: ( $mm_btnSize - $mm_toggleHeight ) / 2; 89 | 90 | } 91 | &.mm-check 92 | { 93 | top: ( $mm_btnSize - $mm_checkHeight ) / 2; 94 | } 95 | } 96 | } 97 | 98 | 99 | // positioning 100 | label 101 | { 102 | &.mm-toggle, 103 | &.mm-check 104 | { 105 | right: $mm_padding * 2; 106 | } 107 | } 108 | label.mm-toggle 109 | { 110 | + a, 111 | + span 112 | { 113 | margin-right: $mm_toggleWidth + ( $mm_padding * 2 ); 114 | } 115 | } 116 | label.mm-check 117 | { 118 | + a, 119 | + span 120 | { 121 | margin-right: $mm_checkWidth + ( $mm_padding * 2 ); 122 | } 123 | } 124 | 125 | // positioning with subopen 126 | a.mm-subopen + label 127 | { 128 | &.mm-toggle, 129 | &.mm-check 130 | { 131 | right: $mm_subopenWidth + $mm_padding; 132 | } 133 | } 134 | a.mm-subopen + label.mm-toggle 135 | { 136 | + a, 137 | + span 138 | { 139 | margin-right: $mm_subopenWidth + $mm_toggleWidth + $mm_padding; 140 | } 141 | } 142 | a.mm-subopen + label.mm-check 143 | { 144 | + a, 145 | + span 146 | { 147 | margin-right: $mm_subopenWidth + $mm_checkWidth + $mm_padding; 148 | } 149 | } 150 | 151 | // positioning with counter 152 | em.mm-counter + a.mm-subopen + label 153 | { 154 | &.mm-toggle, 155 | &.mm-check 156 | { 157 | right: $mm_counterWidth + $mm_subopenWidth + $mm_padding; 158 | } 159 | } 160 | em.mm-counter + a.mm-subopen + label.mm-toggle 161 | { 162 | + a, 163 | + span 164 | { 165 | margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_toggleWidth + $mm_padding; 166 | } 167 | } 168 | em.mm-counter + a.mm-subopen + label.mm-check 169 | { 170 | + a, 171 | + span 172 | { 173 | margin-right: $mm_counterWidth + $mm_subopenWidth + $mm_checkWidth + $mm_padding; 174 | } 175 | } 176 | 177 | @include mm_colors_toggles; 178 | @include mm_colors_checks; -------------------------------------------------------------------------------- /_sass/mmenu/extensions/jquery.mmenu.fullscreen.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu fullscreen extension CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | $mm_fs_class : ".mm-fullscreen"; 8 | $mm_fs_full : 1 !default; 9 | $mm_fs_min : 140px !default; 10 | $mm_fs_max : 10000px !default; 11 | 12 | @include mm_sizing( $mm_fs_class, 13 | $mm_fs_full, $mm_fs_min, $mm_fs_max ); 14 | 15 | @include mm_sizing_right( $mm_fs_class, 16 | $mm_fs_full, $mm_fs_min, $mm_fs_max); 17 | 18 | @include mm_sizing_zposition( $mm_fs_class, 19 | $mm_fs_full, $mm_fs_min, $mm_fs_max ); 20 | 21 | html.mm-opened#{$mm_fs_class} .mm-page 22 | { 23 | box-shadow: none !important; 24 | } -------------------------------------------------------------------------------- /_sass/mmenu/extensions/jquery.mmenu.iconbar.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu iconbar extension CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | 8 | $mm_ib_pageOffset: $mm_btnSize + ( $mm_padding * 2 ) !default; 9 | 10 | body 11 | { 12 | overflow-x: hidden; 13 | } 14 | 15 | .mm-page 16 | { 17 | background: inherit; 18 | min-height: 100vh; 19 | 20 | padding-right: $mm_ib_pageOffset; 21 | @include mm-webkit-prefix( 'transform', translateX( $mm_ib_pageOffset ) ); 22 | } 23 | 24 | .mm-menu 25 | { 26 | &:first-child, 27 | &.mm-current 28 | { 29 | display: block; 30 | } 31 | } -------------------------------------------------------------------------------- /_sass/mmenu/extensions/jquery.mmenu.positioning.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu position extension CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | // top 8 | // bottom 9 | .mm-menu.mm-top, 10 | .mm-menu.mm-bottom 11 | { 12 | width: 100%; 13 | min-width: 100%; 14 | max-width: 100%; 15 | } 16 | 17 | // right 18 | .mm-menu.mm-right 19 | { 20 | left: auto; 21 | right: 0; 22 | } 23 | 24 | // bottom 25 | .mm-menu.mm-bottom 26 | { 27 | top: auto; 28 | bottom: 0; 29 | } 30 | 31 | @include mm_sizing_right; 32 | 33 | 34 | 35 | /* 36 | jQuery.mmenu z-position extension CSS 37 | */ 38 | 39 | // reset defaults 40 | html.mm-front 41 | { 42 | .mm-slideout 43 | { 44 | @include mm-webkit-prefix( 'transform', none !important ); 45 | z-index: 0 !important; 46 | } 47 | } 48 | 49 | // styling 50 | .mm-menu.mm-front 51 | { 52 | z-index: 1; 53 | box-shadow: 0 0 15px rgba( 0, 0, 0, 0.5 ); 54 | } 55 | html.mm-opened.mm-next .mm-page 56 | { 57 | box-shadow: none; 58 | } 59 | 60 | // animations 61 | .mm-menu 62 | { 63 | &.mm-front, 64 | &.mm-next 65 | { 66 | -webkit-transition: -webkit-transform $mm_transitionDuration $mm_transitionFunction; 67 | -ms-transition: -ms-transform $mm_transitionDuration $mm_transitionFunction; 68 | transition: transform $mm_transitionDuration $mm_transitionFunction; 69 | 70 | @include mm-webkit-prefix( 'transform', translate( -100%, 0 ) ); 71 | 72 | &.mm-right 73 | { 74 | @include mm-webkit-prefix( 'transform', translate( 100%, 0 ) ); 75 | } 76 | } 77 | &.mm-front 78 | { 79 | &.mm-top 80 | { 81 | @include mm-webkit-prefix( 'transform', translate( 0, -100% ) ); 82 | } 83 | &.mm-bottom 84 | { 85 | @include mm-webkit-prefix( 'transform', translate( 0, 100% ) ); 86 | } 87 | } 88 | } 89 | html.mm-opening .mm-menu 90 | { 91 | &.mm-front, 92 | &.mm-next 93 | { 94 | @include mm-webkit-prefix( 'transform', translate( 0, 0 ) ); 95 | } 96 | } 97 | 98 | @include mm_sizing_zposition; -------------------------------------------------------------------------------- /_sass/mmenu/extensions/jquery.mmenu.themes.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu themes extension CSS 3 | */ 4 | 5 | @import "../inc/variables"; 6 | 7 | @mixin mm_apply_theme() 8 | { 9 | @include mm_colors( $mm_t_cls, 10 | $mm_t_backgroundColor, $mm_t_pageShadow, 11 | $mm_t_textColor, $mm_t_dimmedTextColor, 12 | $mm_t_emphasizedBackgroundColor, $mm_t_highlightedBackgroundColor, 13 | $mm_t_borderColor ); 14 | 15 | @include mm_colors_buttonbars( $mm_t_cls, 16 | $mm_t_backgroundColor, 17 | $mm_t_textColor ); 18 | 19 | @include mm_colors_checks( $mm_t_cls, 20 | $mm_t_textColor ); 21 | 22 | @include mm_colors_counters( $mm_t_cls, 23 | $mm_t_dimmedTextColor ); 24 | 25 | @include mm_colors_footer( $mm_t_cls, 26 | $mm_t_dimmedTextColor, 27 | $mm_t_borderColor ); 28 | 29 | @include mm_colors_header( $mm_t_cls, 30 | $mm_t_dimmedTextColor, 31 | $mm_t_borderColor ); 32 | 33 | @include mm_colors_labels( $mm_t_cls, 34 | $mm_t_highlightedBackgroundColor ); 35 | 36 | @include mm_colors_searchfield( $mm_t_cls, 37 | $mm_t_inputBackgroundColor, $mm_t_textColor, 38 | $mm_t_dimmedTextColor ); 39 | 40 | @include mm_colors_toggles( $mm_t_cls, 41 | $mm_t_backgroundColor, 42 | $mm_t_borderColor ); 43 | } 44 | 45 | 46 | // Light 47 | $mm_t_cls : ".mm-light"; 48 | $mm_t_pageShadow : 0 0 10px rgba( 0, 0, 0, 0.3 ); 49 | $mm_t_borderColor : rgba( 0, 0, 0, 0.1 ); 50 | $mm_t_backgroundColor : #f3f3f3; 51 | $mm_t_emphasizedBackgroundColor : rgba( 255, 255, 255, 0.6 ); 52 | $mm_t_highlightedBackgroundColor: rgba( 0, 0, 0, 0.03 ); 53 | $mm_t_textColor : rgba( 0, 0, 0, 0.6 ); 54 | $mm_t_dimmedTextColor : rgba( 0, 0, 0, 0.3 ); 55 | $mm_t_inputBackgroundColor : rgba( 0, 0, 0, 0.1 ); 56 | @include mm_apply_theme; 57 | 58 | 59 | // White 60 | $mm_t_cls : ".mm-white"; 61 | $mm_t_pageShadow : 0 0 10px rgba( 0, 0, 0, 0.3 ); 62 | $mm_t_borderColor : rgba( 0, 0, 0, 0.1 ); 63 | $mm_t_backgroundColor : #fff; 64 | $mm_t_emphasizedBackgroundColor : rgba( 0, 0, 0, 0.06 ); 65 | $mm_t_highlightedBackgroundColor: rgba( 0, 0, 0, 0.03 ); 66 | $mm_t_textColor : rgba( 0, 0, 0, 0.6 ); 67 | $mm_t_dimmedTextColor : rgba( 0, 0, 0, 0.3 ); 68 | $mm_t_inputBackgroundColor : rgba( 0, 0, 0, 0.1 ); 69 | @include mm_apply_theme; 70 | 71 | 72 | // Black 73 | $mm_t_cls : ".mm-black"; 74 | $mm_t_pageShadow : none; 75 | $mm_t_borderColor : rgba( 255, 255, 255, 0.2 ); 76 | $mm_t_backgroundColor : #000; 77 | $mm_t_emphasizedBackgroundColor : rgba( 255, 255, 255, 0.25 ); 78 | $mm_t_highlightedBackgroundColor: rgba( 255, 255, 255, 0.15 ); 79 | $mm_t_textColor : rgba( 255, 255, 255, 0.6 ); 80 | $mm_t_dimmedTextColor : rgba( 255, 255, 255, 0.3 ); 81 | $mm_t_inputBackgroundColor : rgba( 255, 255, 255, 0.3 ); 82 | @include mm_apply_theme; -------------------------------------------------------------------------------- /_sass/mmenu/extensions/jquery.mmenu.widescreen.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu widescreen extension CSS 3 | 4 | To use on widescreens only, include it using a mediaquery: 5 | 6 | */ 7 | 8 | @import "../inc/variables"; 9 | 10 | $mm_ws_menuWidth: 0.3 !default; 11 | 12 | 13 | // Positioning and sizing 14 | html, 15 | body, 16 | html.mm-opened, 17 | html.mm-opened body 18 | { 19 | overflow: auto; 20 | } 21 | body 22 | { 23 | padding-left: percentage( $mm_ws_menuWidth ) !important; 24 | position: relative; 25 | } 26 | #mm-blocker 27 | { 28 | display: none !important; 29 | } 30 | .mm-page 31 | { 32 | box-shadow: none !important; 33 | background: inherit; 34 | 35 | box-sizing: border-box; 36 | min-height: 100vh; 37 | height: auto !important; 38 | margin: 0 !important; 39 | position: relative !important; 40 | top: 0 !important; 41 | z-index: 1; 42 | } 43 | .mm-slideout 44 | { 45 | @include mm-webkit-prefix( 'transform', none !important ); 46 | } 47 | .mm-menu 48 | { 49 | width: percentage( $mm_ws_menuWidth ) !important; 50 | min-width: none !important; 51 | max-width: none !important; 52 | 53 | z-index: 0; 54 | top: 0 !important; 55 | right: auto !important; 56 | bottom: auto !important; 57 | left: 0 !important; 58 | 59 | &:first-child, 60 | &.mm-current 61 | { 62 | display: block; 63 | } 64 | } -------------------------------------------------------------------------------- /_sass/mmenu/inc/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Arrows 2 | @mixin mm_arrow 3 | { 4 | content: ''; 5 | border: 2px solid transparent; 6 | display: inline-block; 7 | width: 7px; 8 | height: 7px; 9 | 10 | @include mm_webkit-prefix( "transform", rotate( -45deg ) ); 11 | } 12 | @mixin mm_arrow-prev 13 | { 14 | border-right: none; 15 | border-bottom: none; 16 | } 17 | @mixin mm_arrow-next 18 | { 19 | border-top: none; 20 | border-left: none; 21 | } 22 | 23 | 24 | // Borders 25 | @mixin mm_border( $border, $pseudo, $size, $pos1, $pos2 ) 26 | { 27 | &:#{$pseudo} 28 | { 29 | content: ''; 30 | border-#{$border}-width: 1px; 31 | border-#{$border}-style: solid; 32 | display: block; 33 | #{$size}: 100%; 34 | position: absolute; 35 | #{$pos1}: 0; 36 | #{$pos2}: 0; 37 | } 38 | } 39 | @mixin mm_border-top 40 | { 41 | @include mm_border( "top", "before", "width", "top", "left" ); 42 | } 43 | @mixin mm_border-right 44 | { 45 | @include mm_border( "right", "after", "height", "right", "top" ); 46 | } 47 | @mixin mm_border-bottom 48 | { 49 | @include mm_border( "bottom", "after", "width", "bottom", "left" ); 50 | } 51 | @mixin mm_border-left 52 | { 53 | @include mm_border( "left", "before", "height", "left", "top" ); 54 | } 55 | 56 | 57 | // Misc 58 | @mixin mm_vendor-prefix( $prop, $val ) 59 | { 60 | -webkit-#{$prop}: $val; 61 | -moz-#{$prop}: $val; 62 | -ms-#{$prop}: $val; 63 | -o-#{$prop}: $val; 64 | #{$prop}: $val; 65 | } 66 | @mixin mm_webkit-prefix( $prop, $val ) 67 | { 68 | // we're not yet ready to drop vendor prefixes due to IE9 and older versions of FF 69 | @include mm_vendor-prefix( $prop, $val ); 70 | // -webkit-#{$prop}: $val; 71 | // #{$prop}: $val; 72 | } 73 | @mixin mm_ellipsis() 74 | { 75 | text-overflow: ellipsis; 76 | white-space: nowrap; 77 | overflow: hidden; 78 | } 79 | @mixin mm_clearfix() 80 | { 81 | &:after 82 | { 83 | content: ''; 84 | display: block; 85 | clear: both; 86 | } 87 | } -------------------------------------------------------------------------------- /_sass/mmenu/inc/_sizing.scss: -------------------------------------------------------------------------------- 1 | // Sizing left (default) 2 | @mixin mm_sizing( $cls: "", 3 | $width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth 4 | ) { 5 | .mm-menu#{$cls} 6 | { 7 | width: percentage( $width ); 8 | min-width: $minWidth; 9 | max-width: $maxWidth; 10 | } 11 | html.mm-opening#{$cls} 12 | { 13 | .mm-slideout 14 | { 15 | @include mm-webkit-prefix( 'transform', translate( percentage( $width ), 0 ) ); 16 | } 17 | } 18 | @media all and (max-width: $minWidth / $width ) { 19 | html.mm-opening#{$cls} 20 | { 21 | .mm-slideout 22 | { 23 | @include mm-webkit-prefix( 'transform', translate( $minWidth, 0 ) ); 24 | } 25 | } 26 | } 27 | @media all and (min-width: $maxWidth / $width ) { 28 | html.mm-opening#{$cls} 29 | { 30 | .mm-slideout 31 | { 32 | @include mm-webkit-prefix( 'transform', translate( $maxWidth, 0 ) ); 33 | } 34 | } 35 | } 36 | } 37 | 38 | // Sizing right 39 | @mixin mm_sizing_right( $cls: "", 40 | $width: $mm_width, $minWidth: $mm_minWidth, $maxWidth: $mm_maxWidth 41 | ) { 42 | html.mm-right.mm-opening#{$cls} 43 | { 44 | .mm-slideout 45 | { 46 | @include mm-webkit-prefix( 'transform', translate( -( percentage( $width ) ), 0 ) ); 47 | } 48 | } 49 | @media all and ( max-width: $minWidth / $width ) { 50 | html.mm-right.mm-opening#{$cls} 51 | { 52 | .mm-slideout 53 | { 54 | @include mm-webkit-prefix( 'transform', translate( -$minWidth, 0 ) ); 55 | } 56 | } 57 | } 58 | @media all and ( min-width: $maxWidth / $width ) { 59 | html.mm-right.mm-opening#{$cls} 60 | { 61 | .mm-slideout 62 | { 63 | @include mm-webkit-prefix( 'transform', translate( -$maxWidth, 0 ) ); 64 | } 65 | } 66 | } 67 | } 68 | 69 | // Sizing z-position 70 | @mixin mm_sizing_zposition( $cls: "", 71 | $height: $mm_height, $minHeight: $mm_minHeight, $maxHeight: $mm_maxHeight 72 | ) { 73 | 74 | // top 75 | // bottom 76 | .mm-menu.mm-front#{$cls} 77 | { 78 | &.mm-top, 79 | &.mm-bottom 80 | { 81 | height: percentage( $height ); 82 | min-height: $minHeight; 83 | max-height: $maxHeight; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /_sass/mmenu/inc/_variables.scss: -------------------------------------------------------------------------------- 1 | // Animations 2 | $mm_transitionDuration: 0.4s !default; 3 | $mm_transitionFunction: ease !default; 4 | 5 | // Sizes 6 | $mm_width : 0.8 !default; 7 | $mm_minWidth : 140px !default; 8 | $mm_maxWidth : 440px !default; 9 | 10 | $mm_height : 0.8 !default; 11 | $mm_minHeight : 140px !default; 12 | $mm_maxHeight : 880px !default; 13 | 14 | $mm_btnSize : 40px !default; 15 | $mm_padding : 10px !default; 16 | $mm_fontSize : 14px !default; 17 | 18 | $mm_subpanelOffset : 30% !default; 19 | $mm_subopenWidth : $mm_btnSize !default; 20 | 21 | // Addon sizes 22 | $mm_buttonbarHeight : $mm_btnSize - ( $mm_padding * 2 ) !default; 23 | 24 | $mm_counterWidth : $mm_btnSize !default; 25 | 26 | $mm_toggleHeight : $mm_btnSize - $mm_padding !default; 27 | $mm_toggleWidth : ( $mm_toggleHeight * 2 ) - $mm_padding !default; 28 | 29 | $mm_checkHeight : $mm_btnSize - $mm_padding !default; 30 | $mm_checkWidth : $mm_btnSize - $mm_padding !default; 31 | 32 | $mm_footerHeight : $mm_btnSize; 33 | 34 | $mm_headerHeight : $mm_btnSize * 1.5 !default; 35 | $mm_headerPaddingTop : $mm_headerHeight / 2 !default; 36 | 37 | $mm_labelHeight : ( $mm_btnSize / 2 ) + ( $mm_padding / 2 ) !default; 38 | 39 | $mm_searchHeight : $mm_btnSize + $mm_padding !default; 40 | $mm_searchfieldHeight : $mm_searchHeight - ( $mm_padding * 2 ) !default; 41 | 42 | // Colors 43 | $mm_pageShadow : 0 0 20px rgba( 0, 0, 0, 0.5 ) !default; 44 | $mm_borderColor : rgba( 0, 0, 0, 0.15 ) !default; 45 | $mm_backgroundColor : #333 !default; 46 | $mm_emphasizedBackgroundColor : rgba( 0, 0, 0, 0.1 ) !default; 47 | $mm_highlightedBackgroundColor : rgba( 255, 255, 255, 0.05 ) !default; 48 | $mm_textColor : rgba( 255, 255, 255, 0.6 ) !default; 49 | $mm_dimmedTextColor : rgba( 255, 255, 255, 0.3 ) !default; 50 | 51 | // Addon colors 52 | $mm_toggleCheckedColor : #4bd963 !default; 53 | 54 | 55 | 56 | @import "mixins"; 57 | @import "sizing"; 58 | @import "colors"; -------------------------------------------------------------------------------- /_sass/mmenu/jquery.mmenu.all.scss: -------------------------------------------------------------------------------- 1 | @import "jquery.mmenu"; 2 | 3 | @import "addons/jquery.mmenu.buttonbars"; 4 | @import "addons/jquery.mmenu.counters"; 5 | @import "addons/jquery.mmenu.dragopen"; 6 | @import "addons/jquery.mmenu.footer"; 7 | @import "addons/jquery.mmenu.header"; 8 | @import "addons/jquery.mmenu.labels"; 9 | @import "addons/jquery.mmenu.searchfield"; 10 | @import "addons/jquery.mmenu.toggles"; 11 | 12 | @import "extensions/jquery.mmenu.effects"; 13 | @import "extensions/jquery.mmenu.fullscreen"; 14 | @import "extensions/jquery.mmenu.positioning"; 15 | @import "extensions/jquery.mmenu.themes"; -------------------------------------------------------------------------------- /_sass/mmenu/jquery.mmenu.scss: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery.mmenu CSS 3 | */ 4 | 5 | @import "jquery.mmenu.oncanvas"; 6 | @import "addons/jquery.mmenu.offcanvas"; 7 | -------------------------------------------------------------------------------- /_sass/neat/_neat-helpers.scss: -------------------------------------------------------------------------------- 1 | // Functions 2 | @import "functions/private"; 3 | @import "functions/new-breakpoint"; 4 | 5 | // Settings 6 | @import "settings/grid"; 7 | @import "settings/visual-grid"; 8 | @import "settings/disable-warnings"; 9 | -------------------------------------------------------------------------------- /_sass/neat/_neat.scss: -------------------------------------------------------------------------------- 1 | // Neat 1.7.1 2 | // http://neat.bourbon.io 3 | // Copyright 2012-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | // Helpers 7 | @import "neat-helpers"; 8 | 9 | // Grid 10 | @import "grid/private"; 11 | @import "grid/box-sizing"; 12 | @import "grid/omega"; 13 | @import "grid/outer-container"; 14 | @import "grid/span-columns"; 15 | @import "grid/row"; 16 | @import "grid/shift"; 17 | @import "grid/pad"; 18 | @import "grid/fill-parent"; 19 | @import "grid/media"; 20 | @import "grid/to-deprecate"; 21 | @import "grid/visual-grid"; 22 | @import "grid/display-context"; 23 | @import "grid/direction-context"; 24 | -------------------------------------------------------------------------------- /_sass/neat/functions/_new-breakpoint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat. 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values. Each `$feature` should have a corresponding `$value`. 7 | /// 8 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 9 | /// 10 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 11 | /// 12 | /// @param {Number (unitless)} $total-columns ($grid-columns) 13 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 14 | /// 15 | /// @example scss - Usage 16 | /// $mobile: new-breakpoint(max-width 480px 4); 17 | /// 18 | /// .element { 19 | /// @include media($mobile) { 20 | /// @include span-columns(4); 21 | /// } 22 | /// } 23 | /// 24 | /// @example css - CSS Output 25 | /// @media screen and (max-width: 480px) { 26 | /// .element { 27 | /// display: block; 28 | /// float: left; 29 | /// margin-right: 7.42297%; 30 | /// width: 100%; 31 | /// } 32 | /// .element:last-child { 33 | /// margin-right: 0; 34 | /// } 35 | /// } 36 | 37 | @function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { 38 | @if length($query) == 1 { 39 | $query: $default-feature nth($query, 1) $total-columns; 40 | } @else if is-even(length($query)) { 41 | $query: append($query, $total-columns); 42 | } 43 | 44 | @if is-not(belongs-to($query, $visual-grid-breakpoints)) { 45 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; 46 | } 47 | 48 | @return $query; 49 | } 50 | -------------------------------------------------------------------------------- /_sass/neat/functions/_private.scss: -------------------------------------------------------------------------------- 1 | // Not function for Libsass compatibility 2 | // https://github.com/sass/libsass/issues/368 3 | @function is-not($value) { 4 | @return if($value, false, true); 5 | } 6 | 7 | // Checks if a number is even 8 | @function is-even($int) { 9 | @return $int % 2 == 0; 10 | } 11 | 12 | // Checks if an element belongs to a list or not 13 | @function belongs-to($tested-item, $list) { 14 | @return is-not(not-belongs-to($tested-item, $list)); 15 | } 16 | 17 | @function not-belongs-to($tested-item, $list) { 18 | @return is-not(index($list, $tested-item)); 19 | } 20 | 21 | // Contains display value 22 | @function contains-display-value($query) { 23 | @return belongs-to(table, $query) 24 | or belongs-to(block, $query) 25 | or belongs-to(inline-block, $query) 26 | or belongs-to(inline, $query); 27 | } 28 | 29 | // Parses the first argument of span-columns() 30 | @function container-span($span: $span) { 31 | @if length($span) == 3 { 32 | $container-columns: nth($span, 3); 33 | @return $container-columns; 34 | } @else if length($span) == 2 { 35 | $container-columns: nth($span, 2); 36 | @return $container-columns; 37 | } 38 | 39 | @return $grid-columns; 40 | } 41 | 42 | @function container-shift($shift: $shift) { 43 | $parent-columns: $grid-columns !default !global; 44 | 45 | @if length($shift) == 3 { 46 | $container-columns: nth($shift, 3); 47 | @return $container-columns; 48 | } @else if length($shift) == 2 { 49 | $container-columns: nth($shift, 2); 50 | @return $container-columns; 51 | } 52 | 53 | @return $parent-columns; 54 | } 55 | 56 | // Generates a striped background 57 | @function gradient-stops($grid-columns, $color: $visual-grid-color) { 58 | $transparent: transparent; 59 | 60 | $column-width: flex-grid(1, $grid-columns); 61 | $gutter-width: flex-gutter($grid-columns); 62 | $column-offset: $column-width; 63 | 64 | $values: ($transparent 0, $color 0); 65 | 66 | @for $i from 1 to $grid-columns*2 { 67 | @if is-even($i) { 68 | $values: append($values, $transparent $column-offset, comma); 69 | $values: append($values, $color $column-offset, comma); 70 | $column-offset: $column-offset + $column-width; 71 | } @else { 72 | $values: append($values, $color $column-offset, comma); 73 | $values: append($values, $transparent $column-offset, comma); 74 | $column-offset: $column-offset + $gutter-width; 75 | } 76 | } 77 | 78 | @return $values; 79 | } 80 | 81 | // Layout direction 82 | @function get-direction($layout, $default) { 83 | $direction: null; 84 | 85 | @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" { 86 | $direction: direction-from-layout($layout); 87 | } @else { 88 | $direction: direction-from-layout($default); 89 | } 90 | 91 | @return $direction; 92 | } 93 | 94 | @function direction-from-layout($layout) { 95 | $direction: null; 96 | 97 | @if to-upper-case($layout) == "LTR" { 98 | $direction: right; 99 | } @else { 100 | $direction: left; 101 | } 102 | 103 | @return $direction; 104 | } 105 | 106 | @function get-opposite-direction($direction) { 107 | $opposite-direction: left; 108 | 109 | @if $direction == "left" { 110 | $opposite-direction: right; 111 | } 112 | 113 | @return $opposite-direction; 114 | } 115 | -------------------------------------------------------------------------------- /_sass/neat/grid/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @if $border-box-sizing == true { 4 | html { // http://bit.ly/1qk2tVR 5 | @include box-sizing(border-box); 6 | } 7 | 8 | * { 9 | &, 10 | &:before, 11 | &:after { 12 | @include box-sizing(inherit); 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /_sass/neat/grid/_direction-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the direction property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $direction (left-to-right) 6 | /// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`. 7 | /// 8 | /// @example scss - Usage 9 | /// @include direction-context(right-to-left) { 10 | /// .right-to-left-block { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .right-to-left-block { 17 | /// float: right; 18 | /// ... 19 | /// } 20 | 21 | @mixin direction-context($direction: left-to-right) { 22 | $scope-direction: $layout-direction; 23 | 24 | @if to-lower-case($direction) == "left-to-right" { 25 | $layout-direction: LTR !global; 26 | } @else if to-lower-case($direction) == "right-to-left" { 27 | $layout-direction: RTL !global; 28 | } 29 | 30 | @content; 31 | 32 | $layout-direction: $scope-direction !global; 33 | } 34 | -------------------------------------------------------------------------------- /_sass/neat/grid/_display-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the display property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $display (block) 6 | /// Display value to be used within the block. Can be `table` or `block`. 7 | /// 8 | /// @example scss 9 | /// @include display-context(table) { 10 | /// .display-table { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css 16 | /// .display-table { 17 | /// display: table-cell; 18 | /// ... 19 | /// } 20 | 21 | @mixin display-context($display: block) { 22 | $scope-display: $container-display-table; 23 | $container-display-table: $display == table !global; 24 | 25 | @content; 26 | 27 | $container-display-table: $scope-display !global; 28 | } 29 | -------------------------------------------------------------------------------- /_sass/neat/grid/_fill-parent.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Forces the element to fill its parent container. 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include fill-parent; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// width: 100%; 13 | /// -webkit-box-sizing: border-box; 14 | /// -moz-box-sizing: border-box; 15 | /// box-sizing: border-box; 16 | /// } 17 | 18 | @mixin fill-parent() { 19 | width: 100%; 20 | 21 | @if $border-box-sizing == false { 22 | @include box-sizing(border-box); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /_sass/neat/grid/_media.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs a media-query block with an optional grid context (the total number of columns used in the grid). 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values, where each `$feature` should have a corresponding `$value`. 7 | /// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 8 | /// 9 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 10 | /// 11 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). 12 | /// 13 | /// 14 | /// @param {Number (unitless)} $total-columns ($grid-columns) 15 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 16 | /// 17 | /// @example scss - Usage 18 | /// .responsive-element { 19 | /// @include media(769px) { 20 | /// @include span-columns(6); 21 | /// } 22 | /// } 23 | /// 24 | /// .new-context-element { 25 | /// @include media(min-width 320px max-width 480px, 6) { 26 | /// @include span-columns(6); 27 | /// } 28 | /// } 29 | /// 30 | /// @example css - CSS Output 31 | /// @media screen and (min-width: 769px) { 32 | /// .responsive-element { 33 | /// display: block; 34 | /// float: left; 35 | /// margin-right: 2.35765%; 36 | /// width: 48.82117%; 37 | /// } 38 | /// 39 | /// .responsive-element:last-child { 40 | /// margin-right: 0; 41 | /// } 42 | /// } 43 | /// 44 | /// @media screen and (min-width: 320px) and (max-width: 480px) { 45 | /// .new-context-element { 46 | /// display: block; 47 | /// float: left; 48 | /// margin-right: 4.82916%; 49 | /// width: 100%; 50 | /// } 51 | /// 52 | /// .new-context-element:last-child { 53 | /// margin-right: 0; 54 | /// } 55 | /// } 56 | 57 | @mixin media($query: $feature $value $columns, $total-columns: $grid-columns) { 58 | @if length($query) == 1 { 59 | @media screen and ($default-feature: nth($query, 1)) { 60 | $default-grid-columns: $grid-columns; 61 | $grid-columns: $total-columns !global; 62 | @content; 63 | $grid-columns: $default-grid-columns !global; 64 | } 65 | } @else { 66 | $loop-to: length($query); 67 | $media-query: "screen and "; 68 | $default-grid-columns: $grid-columns; 69 | $grid-columns: $total-columns !global; 70 | 71 | @if is-not(is-even(length($query))) { 72 | $grid-columns: nth($query, $loop-to) !global; 73 | $loop-to: $loop-to - 1; 74 | } 75 | 76 | $i: 1; 77 | @while $i <= $loop-to { 78 | $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") "; 79 | 80 | @if ($i + 1) != $loop-to { 81 | $media-query: $media-query + "and "; 82 | } 83 | 84 | $i: $i + 2; 85 | } 86 | 87 | @media #{$media-query} { 88 | @content; 89 | $grid-columns: $default-grid-columns !global; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /_sass/neat/grid/_omega.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts. 4 | /// 5 | /// @param {List} $query (block) 6 | /// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`). 7 | /// 8 | /// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature. 9 | /// 10 | /// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead. 11 | /// 12 | /// @example scss - Usage 13 | /// .element { 14 | /// @include omega; 15 | /// } 16 | /// 17 | /// .nth-element { 18 | /// @include omega(4n); 19 | /// } 20 | /// 21 | /// @example css - CSS Output 22 | /// .element { 23 | /// margin-right: 0; 24 | /// } 25 | /// 26 | /// .nth-element:nth-child(4n) { 27 | /// margin-right: 0; 28 | /// } 29 | /// 30 | /// .nth-element:nth-child(4n+1) { 31 | /// clear: left; 32 | /// } 33 | 34 | @mixin omega($query: block, $direction: default) { 35 | $table: belongs-to(table, $query); 36 | $auto: belongs-to(auto, $query); 37 | 38 | @if $direction != default { 39 | @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin."); 40 | } @else { 41 | $direction: get-direction($layout-direction, $default-layout-direction); 42 | } 43 | 44 | @if $table { 45 | @include -neat-warn("The omega mixin no longer removes padding in table layouts."); 46 | } 47 | 48 | @if length($query) == 1 { 49 | @if $auto { 50 | &:last-child { 51 | margin-#{$direction}: 0; 52 | } 53 | } 54 | 55 | @else if contains-display-value($query) and $table == false { 56 | margin-#{$direction}: 0; 57 | } 58 | 59 | @else { 60 | @include nth-child($query, $direction); 61 | } 62 | } @else if length($query) == 2 { 63 | @if $auto { 64 | &:last-child { 65 | margin-#{$direction}: 0; 66 | } 67 | } @else { 68 | @include nth-child(nth($query, 1), $direction); 69 | } 70 | } @else { 71 | @include -neat-warn("Too many arguments passed to the omega() mixin."); 72 | } 73 | } 74 | 75 | @mixin nth-child($query, $direction) { 76 | $opposite-direction: get-opposite-direction($direction); 77 | 78 | &:nth-child(#{$query}) { 79 | margin-#{$direction}: 0; 80 | } 81 | 82 | @if type-of($query) == number and unit($query) == "n" { 83 | &:nth-child(#{$query}+1) { 84 | clear: $opposite-direction; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /_sass/neat/grid/_outer-container.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`. 4 | /// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested. 5 | /// 6 | /// @param {Number (unit)} $local-max-width ($max-width) 7 | /// Max width to be applied to the element. Can be a percentage or a measure. 8 | /// 9 | /// @example scss - Usage 10 | /// .element { 11 | /// @include outer-container(100%); 12 | /// } 13 | /// 14 | /// @example css - CSS Output 15 | /// .element { 16 | /// *zoom: 1; 17 | /// max-width: 100%; 18 | /// margin-left: auto; 19 | /// margin-right: auto; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin outer-container($local-max-width: $max-width) { 32 | @include clearfix; 33 | max-width: $local-max-width; 34 | margin: { 35 | left: auto; 36 | right: auto; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /_sass/neat/grid/_pad.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Adds padding to the element. 4 | /// 5 | /// @param {List} $padding (flex-gutter()) 6 | /// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include pad(30px -20px 10px default); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding: 30px -20px 10px 2.35765%; 16 | /// } 17 | 18 | @mixin pad($padding: flex-gutter()) { 19 | $padding-list: null; 20 | @each $value in $padding { 21 | $value: if($value == 'default', flex-gutter(), $value); 22 | $padding-list: join($padding-list, $value); 23 | } 24 | padding: $padding-list; 25 | } 26 | -------------------------------------------------------------------------------- /_sass/neat/grid/_private.scss: -------------------------------------------------------------------------------- 1 | $parent-columns: $grid-columns !default; 2 | $fg-column: $column; 3 | $fg-gutter: $gutter; 4 | $fg-max-columns: $grid-columns; 5 | $container-display-table: false !default; 6 | $layout-direction: LTR !default; 7 | 8 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 9 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($width / $container-width); 12 | } 13 | 14 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 15 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 16 | @return percentage($gutter / $container-width); 17 | } 18 | 19 | @function grid-width($n) { 20 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 21 | } 22 | 23 | @function get-parent-columns($columns) { 24 | @if $columns != $grid-columns { 25 | $parent-columns: $columns !global; 26 | } @else { 27 | $parent-columns: $grid-columns !global; 28 | } 29 | 30 | @return $parent-columns; 31 | } 32 | 33 | @function is-display-table($container-is-display-table, $display) { 34 | @return $container-is-display-table == true or $display == table; 35 | } 36 | -------------------------------------------------------------------------------- /_sass/neat/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout. 4 | /// 5 | /// @param {String} $display (default) 6 | /// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`. 7 | /// 8 | /// @param {String} $direction ($default-layout-direction) 9 | /// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left). 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include row(); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// *zoom: 1; 19 | /// display: block; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin row($display: default, $direction: $default-layout-direction) { 32 | @if $direction != $default-layout-direction { 33 | @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."); 34 | } 35 | 36 | $layout-direction: $direction !global; 37 | 38 | @if $display != default { 39 | @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin."); 40 | } 41 | 42 | @if $display == table { 43 | display: table; 44 | @include fill-parent; 45 | table-layout: fixed; 46 | $container-display-table: true !global; 47 | } @else { 48 | @include clearfix; 49 | display: block; 50 | $container-display-table: false !global; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /_sass/neat/grid/_shift.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction. 4 | /// 5 | /// @param {Number (unitless)} $n-columns (1) 6 | /// Number of columns by which the element shifts. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include shift(-3); 11 | /// } 12 | /// 13 | /// @example css - CSS output 14 | /// .element { 15 | /// margin-left: -25.58941%; 16 | /// } 17 | 18 | @mixin shift($n-columns: 1) { 19 | @include shift-in-context($n-columns); 20 | } 21 | 22 | /// Translates an element horizontally by a number of columns, in a specific nesting context. 23 | /// 24 | /// @param {List} $shift 25 | /// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). 26 | /// 27 | /// The two values can be separated with any string such as `of`, `/`, etc. 28 | /// 29 | /// @example scss - Usage 30 | /// .element { 31 | /// @include shift(-3 of 6); 32 | /// } 33 | /// 34 | /// @example css - CSS output 35 | /// .element { 36 | /// margin-left: -52.41458%; 37 | /// } 38 | 39 | @mixin shift-in-context($shift: $columns of $container-columns) { 40 | $n-columns: nth($shift, 1); 41 | $parent-columns: container-shift($shift) !global; 42 | 43 | $direction: get-direction($layout-direction, $default-layout-direction); 44 | $opposite-direction: get-opposite-direction($direction); 45 | 46 | margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); 47 | 48 | // Reset nesting context 49 | $parent-columns: $grid-columns !global; 50 | } 51 | -------------------------------------------------------------------------------- /_sass/neat/grid/_span-columns.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well. 4 | /// 5 | /// @param {List} $span 6 | /// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional). 7 | /// 8 | /// If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid. 9 | /// 10 | /// The values can be separated with any string such as `of`, `/`, etc. 11 | /// 12 | /// @param {String} $display (block) 13 | /// Sets the display property of the element. By default it sets the display propert of the element to `block`. 14 | /// 15 | /// If passed `block-collapse`, it also removes the margin gutter by adding it to the element width. 16 | /// 17 | /// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid. 18 | /// 19 | /// @example scss - Usage 20 | /// .element { 21 | /// @include span-columns(6); 22 | /// 23 | /// .nested-element { 24 | /// @include span-columns(2 of 6); 25 | /// } 26 | /// } 27 | /// 28 | /// @example css - CSS Output 29 | /// .element { 30 | /// display: block; 31 | /// float: left; 32 | /// margin-right: 2.35765%; 33 | /// width: 48.82117%; 34 | /// } 35 | /// 36 | /// .element:last-child { 37 | /// margin-right: 0; 38 | /// } 39 | /// 40 | /// .element .nested-element { 41 | /// display: block; 42 | /// float: left; 43 | /// margin-right: 4.82916%; 44 | /// width: 30.11389%; 45 | /// } 46 | /// 47 | /// .element .nested-element:last-child { 48 | /// margin-right: 0; 49 | /// } 50 | 51 | @mixin span-columns($span: $columns of $container-columns, $display: block) { 52 | $columns: nth($span, 1); 53 | $container-columns: container-span($span); 54 | 55 | $parent-columns: get-parent-columns($container-columns) !global; 56 | 57 | $direction: get-direction($layout-direction, $default-layout-direction); 58 | $opposite-direction: get-opposite-direction($direction); 59 | 60 | $display-table: is-display-table($container-display-table, $display); 61 | 62 | @if $display-table { 63 | display: table-cell; 64 | width: percentage($columns / $container-columns); 65 | } @else { 66 | float: #{$opposite-direction}; 67 | 68 | @if $display != no-display { 69 | display: block; 70 | } 71 | 72 | @if $display == collapse { 73 | @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead."); 74 | } 75 | 76 | @if $display == collapse or $display == block-collapse { 77 | width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); 78 | 79 | &:last-child { 80 | width: flex-grid($columns, $container-columns); 81 | } 82 | 83 | } @else { 84 | margin-#{$direction}: flex-gutter($container-columns); 85 | width: flex-grid($columns, $container-columns); 86 | 87 | &:last-child { 88 | margin-#{$direction}: 0; 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /_sass/neat/grid/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin grid-column-gradient($values...) { 4 | background-image: -webkit-linear-gradient(left, $values); 5 | background-image: -moz-linear-gradient(left, $values); 6 | background-image: -ms-linear-gradient(left, $values); 7 | background-image: -o-linear-gradient(left, $values); 8 | background-image: unquote("linear-gradient(to left, #{$values})"); 9 | } 10 | 11 | @if $visual-grid == true or $visual-grid == yes { 12 | body:before { 13 | @include grid-column-gradient(gradient-stops($grid-columns)); 14 | content: ""; 15 | display: inline-block; 16 | height: 100%; 17 | left: 0; 18 | margin: 0 auto; 19 | max-width: $max-width; 20 | opacity: $visual-grid-opacity; 21 | pointer-events: none; 22 | position: fixed; 23 | right: 0; 24 | width: 100%; 25 | 26 | @if $visual-grid-index == back { 27 | z-index: -1; 28 | } 29 | 30 | @else if $visual-grid-index == front { 31 | z-index: 9999; 32 | } 33 | 34 | @each $breakpoint in $visual-grid-breakpoints { 35 | @if $breakpoint { 36 | @include media($breakpoint) { 37 | @include grid-column-gradient(gradient-stops($grid-columns)); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /_sass/neat/settings/_disable-warnings.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $disable-warnings: false !default; 8 | 9 | @mixin -neat-warn($message) { 10 | @if $disable-warnings == false { 11 | @warn "#{$message}"; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /_sass/neat/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with a `!global` flag. 4 | /// 5 | /// @type Number (Unit) 6 | 7 | $column: golden-ratio(1em, 3) !default; 8 | 9 | /// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with the `!global` flag. 10 | /// 11 | /// @type Number (Unit) 12 | 13 | $gutter: golden-ratio(1em, 1) !default; 14 | 15 | /// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag. 16 | /// 17 | /// @type Number (Unitless) 18 | 19 | $grid-columns: 12 !default; 20 | 21 | /// Sets the max-width property of the element that includes `outer-container()`. To learn more about `em()` see [Bourbon docs](http://bourbon.io/docs/#px-to-em). Set with the `!global` flag. 22 | /// 23 | /// @type Number (Unit) 24 | /// 25 | $max-width: em(1088) !default; 26 | 27 | /// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag. 28 | /// 29 | /// @type Bool 30 | /// 31 | /// @example css - CSS Output 32 | /// html { 33 | /// -webkit-box-sizing: border-box; 34 | /// -moz-box-sizing: border-box; 35 | /// box-sizing: border-box; } 36 | /// 37 | /// *, *:before, *:after { 38 | /// -webkit-box-sizing: inherit; 39 | /// -moz-box-sizing: inherit; 40 | /// box-sizing: inherit; 41 | /// } 42 | 43 | $border-box-sizing: true !default; 44 | 45 | /// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag. 46 | /// 47 | /// @type String 48 | 49 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin 50 | 51 | ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag. 52 | /// 53 | ///@type String 54 | 55 | $default-layout-direction: LTR !default; 56 | -------------------------------------------------------------------------------- /_sass/neat/settings/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $visual-grid: false !default; 8 | 9 | /// Sets the visual grid color. Set with `!global` flag. 10 | /// 11 | /// @type Color 12 | 13 | $visual-grid-color: #eee !default; 14 | 15 | /// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag. 16 | /// 17 | /// @type String 18 | 19 | $visual-grid-index: back !default; 20 | 21 | /// Sets the opacity property of the visual grid. Set with `!global` flag. 22 | /// 23 | /// @type Number (unitless) 24 | 25 | $visual-grid-opacity: 0.4 !default; 26 | 27 | $visual-grid-breakpoints: () !default; 28 | -------------------------------------------------------------------------------- /_sass/persons.scss: -------------------------------------------------------------------------------- 1 | .person-name { 2 | clear: both; 3 | } 4 | 5 | .person-photo { 6 | width: 150px; 7 | float: left; 8 | margin-right: 10px; 9 | } 10 | -------------------------------------------------------------------------------- /contribute/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | section: contribute 3 | layout: docs 4 | title: Contributing to this site 5 | authors: 6 | - Sam Smith 7 | pagination: 8 | next: 9 | name: Editing a page 10 | link: /contribute/editing/ 11 | --- 12 | 13 |
14 |

Thank you for your interest in in helping to build The Open Data Handbook. We warmly welcome comments, corrections and additions, as well as suggestions for additional sections and areas to examine. For general discussion about the Handbook, please get in touch. To jump in with improvements and additions, read on.

15 | 16 |

How this site works

17 |

In order to contribute, you need a little insight of how things work under the hood. We’re not going to go into too much detail here, but the are three components you need some understanding of.

18 | 19 | 24 | 25 |

Github

26 | 27 |

What is it?

28 | 29 |

GitHub is a web-based repository hosting service, which amongst other things offers revision control and source code management via a web-based graphical interface.

30 | 31 |

Why should I care?

32 | 33 |

Any changes you wish to make, whether they be edits to an existing page, or creating a new one, will most likely be done via the Github website (it is also possible to download and edit the files on your local machine, instructions for this method will be added in the future). All the files for this site can be browsed and edited the Github website. You will need to sign up for a (free) Github account. For full instructions, see Editing a page.

34 | 35 |

Jekyll

36 | 37 |

What is it?

38 | 39 |

Jekyll is a static site generator, which allows us to host websites based on our GitHub repositories. Jekyll takes the content, renders Markdown, and produces a complete, static website ready to be viewed on the web.

40 | 41 |

Why should I care?

42 | 43 |

All you really need to know about Jekyll is the method it uses to include metadata (ie. page title). Each page needs to start with a section it calls Front Matter, containing the page title. An example is provided in the Adding a page section.

44 | 45 |

Markdown

46 | 47 |

What is it?

48 | 49 |

Markdown is a markup language with plain text formatting, designed so that it can be converted to HTML. Markdown can be used to create rich text using a plain text editor.

50 | 51 |

Why should I care?

52 | 53 |

Markdown is your key to formatting the text your provide for this site. By learning a few intuitive rules you’ll be able to ensure your text is formatted with headings, list, quotes etc, without writing any HTML. For examples, head to the Markdown section.

54 |
55 | -------------------------------------------------------------------------------- /core-datasets/core-datasets-roadmap.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/core-datasets/core-datasets-roadmap.md -------------------------------------------------------------------------------- /core-datasets/images/create-repository-init-readme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/core-datasets/images/create-repository-init-readme.jpg -------------------------------------------------------------------------------- /core-datasets/images/create-repository-name.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/core-datasets/images/create-repository-name.jpg -------------------------------------------------------------------------------- /core-datasets/images/export.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/core-datasets/images/export.jpg -------------------------------------------------------------------------------- /core-datasets/images/issues.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/core-datasets/images/issues.jpg -------------------------------------------------------------------------------- /core-datasets/images/remote-v-links.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/core-datasets/images/remote-v-links.jpg -------------------------------------------------------------------------------- /core-datasets/images/repo-create.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/core-datasets/images/repo-create.jpg -------------------------------------------------------------------------------- /core-datasets/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | Title: Intro to Core Datasets 3 | --- 4 | 5 | 6 | 7 | ## What is the Core Datasets effort? 8 | 9 | Summary: Collect and maintain important and commonly-used (“core”) datasets in high-quality, reliable and easy-to-use form (as Data Packages). 10 | 11 | Core = important and commonly-used datasets e.g. reference data (country codes) and indicators (inflation, GDP) 12 | 13 | Curate = take existing data and provide it in high-quality, reliable, and easy-to-use form (standardized, structured, open) 14 | 15 | * **Full details**: including slide-deck at . 16 | * **Live examples**: You can find already packaged core datasets at and in "raw" form on Github at 17 | 18 | 19 | 20 | ## What Roles and Skills are Needed 21 | 22 | We need a variety of roles from identifying new "core" datasets to packaging the data to performing quality control (checking metadata etc). 23 | 24 | **Core Skills** - at least one of these skills will be needed: 25 | 26 | * **Data Wrangling Experience**. Many of our source datasets are not complex (just an Excel file or similar) and can be "wrangled" in a Spreadsheet program. What we therefore recommend is at least one of: 27 | * Experience with a Spreadsheet application such as Excel or (preferably) Google Docs including use of formulas and (desirably) macros (you should at least know how you could quickly convert a cell containing '2014' to '2014-01-01' across 1000 rows) 28 | * Coding for data processing (especially scraping) in one or more of python, javascript, bash 29 | * **Data sleuthing** - the ability to dig up data on the web (specific desirable skills: you know how to search by filetype in google, you know where the developer tools are in chrome or firefox, you know how to find the URL a form posts to) 30 | 31 | **Desirable Skills** (the more the better!): 32 | 33 | * Data vs Metadata: know difference between data and metadata 34 | * Familiarity with Git (and Github) 35 | * Familiarity with a command line (preferably bash) 36 | * Know what JSON is 37 | * Mac or Unix is your default operating system (will make access to relevant tools that much easier) 38 | * Knowledge of Web APIs and/or HTML 39 | * Use of curl or similar command line tool for accessing Web APIs or web pages 40 | * Scraping using a command line tool or (even better) by coding yourself 41 | * Know what a Data Package and a Tabular Data Package are 42 | * Know what a text editor is (e.g. notepad, textmate, vim, emacs, ...) and know how to use it (useful for both working with data and for editing Data Package metadata) 43 | 44 | If you would like to how you can contribute to this project, feel free to read about it [here]({{site.baseurl}}/core-datasets/guide). 45 | -------------------------------------------------------------------------------- /core-datasets/working-with-git.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Working with Git 3 | --- 4 | 5 | GitHub is a "free" hosting service based on Git, assuming the role of a control version system. In simple terms, this allows the collaboration of multiple users without having issues with versions. 6 | 7 | Even though GitHub is easier working with the terminal, it also has graphical solutions. However, if you want to increase your productivity with GitHub, the rest of this guide will help you perform the basic commands of Git to create, publish online. 8 | 9 | In any case, GitHub has a really comprehensive documentation which can help you resolve any issues not covered here. 10 | 11 | The following guide is for Ubuntu users. We try to cover Windows commands as much as possible, even though Windows has a neat graphical interface that can surely help you get your things were you wanted. 12 | 13 | 14 | - [How to Install Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) 15 | - [How to create a repository](https://git-scm.com/book/it/v2/Git-Basics-Getting-a-Git-Repository) 16 | - [Pushing a repository](https://help.github.com/articles/pushing-to-a-remote/) 17 | - [Forking a repository](https://help.github.com/articles/fork-a-repo/) 18 | 19 | 20 | These are the major operations you will be peforming to contribute to this project. However, more advanced operations may be needed. Feel free to ask for support in the forums and/or in our [Gitter chat](https://gitter.im/okfn/chat)! 21 | -------------------------------------------------------------------------------- /css/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/css/fonts/icomoon.eot -------------------------------------------------------------------------------- /css/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/css/fonts/icomoon.ttf -------------------------------------------------------------------------------- /css/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/css/fonts/icomoon.woff -------------------------------------------------------------------------------- /css/widescreen.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | $mm_ws_menuWidth: 0.25; 7 | 8 | @import "mmenu/extensions/jquery.mmenu.widescreen"; 9 | 10 | @import "base/variables"; 11 | 12 | .mm-page { 13 | background-color:$medium-gray; 14 | } 15 | 16 | #menu { 17 | 18 | &.mm-menu { 19 | margin-top:61px; 20 | 21 | z-index:2; 22 | 23 | li.mm-selected { 24 | .subsections { 25 | max-height:none; 26 | } 27 | } 28 | } 29 | } 30 | 31 | 32 | .site-header { 33 | position:fixed; 34 | margin-left:-25%; 35 | width:25%; 36 | border-right:solid 1px $medium-gray; 37 | top:0; 38 | 39 | .show-menu { 40 | display:none; 41 | } 42 | 43 | .site-title { 44 | margin-left: 20px; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /data/archive/data-wrangling-intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: An Introduction to Data Wrangling 3 | --- 4 | 5 | A introduction to data wrangling covers obtaining, cleaning and using data. It's organized as a series of simple tasks that you work through. 6 | 7 | Task 1: Finding a Question 8 | -------------------------- 9 | 10 | Data isn't an end in itself. We usually want data to help us answer some question or help us do some activity. 11 | 12 | So your first task will be to think of some question that you'd like to answer that could be answered by getting hold of some data. 13 | 14 | Examples: 15 | 16 | * How many people are without clean drinking water in the world this year? 17 | * How much did my country spend on defence last year? 18 | * What is a normal weight for someone my age? 19 | 20 | You can find more questions, and requests for specific datasets, on [http://getthedata.org/]() 21 | 22 | For the purposes of exposition, during the rest of this course we are going to focus on a specific example question shown below. Of course, you should focus on your own question. 23 | 24 | **Our question: How much financial support did the US government give to banks and other companies during the financial crisis of 2008-2009?** 25 | 26 | Task 2: Finding Data to Answer your Question 27 | -------------------------------------------- 28 | 29 | Now's it time to go and find data to answer your question. 30 | 31 | We'll focus on our own example question but you can use the same techniques for your own question. 32 | 33 | **Our question: How much financial support did the US government give to banks and other companies during the financial crisis of 2008-2009?** 34 | 35 | In locating relevant data you have two options 36 | 37 | * Use a standard web search engine like Google, Yahoo etc 38 | * Go directly to a specific service that allows you to search data relevant to your topic. For example if you know what you are looking for is likely to be in government statistics you can go directly to your official statistics agency site. Alternatively you can go to a dedicated data hub like [http://thedatahub.org/](). We usually recommend option 1 because a search on a generic engine will usually find datasets in more specific systems. 39 | 40 | So in our case, we'll begin with a search on google: 41 | ``` 42 | "US government bailout data" 43 | ``` 44 | 45 | Using google or another search engine to find data is something of an art but the general approach is to start with a basic search and follow links using those results either directly to find data or to refine your results. 46 | 47 | So in our case it becomes apparent that the US government have released official data. One link obtained is: [http://finacialstability.org]() 48 | 49 | Which as of June 2011 redirects to: [http://www.treasury.gov/initiatives/financial-stability]() 50 | 51 | On LHS sidebar there is a Investment Programs option which gives a list of investments. We have hit the motherlode. However, there are also some summary sites that seem to have consolidated versions of the data. For example, via [http://getthedata.org/questions/218/size-and-terms-of-us-government-support-for-insurer-aig]() we have: [http://subsidyscope.org/bailout/tarp/]() 52 | 53 | -------------------------------------------------------------------------------- /data/archive/mapping.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mapping 3 | --- 4 | It's very common for data wranglers to use mapping as a tool. The majority of datasets are in some way related to people and objects in the real world, and if we can figure out their real world location, a latitude and longitude or some other geo-locating property, then we can plot points on a map. This can be a quick and easy way to transform a tabular dataset into a visually compelling display, but mapping doesn't end there. In fact mapping technology, "geo-technology", can let us filter and connect data in powerful ways without even involving a visual map. 5 | 6 | Web map mashup 7 | -------------- 8 | Although there's more to mapping than showing a map, and showing a map can mean many different things, there is one trick which is very simple, very effective, and essential part of the data wrangler's toolbox. The "web map mashup". Let's dive right in see what this looks like 9 | 10 | Create a new file called 'mymap.html', paste the following into it, save and then double-click and open it in a your web browser to see the result.:: 11 | 12 | ```XML 13 | 14 | 15 | 16 | A web map mashup with OpenLayers and OpenStreetMap 17 | 18 | 19 | 39 | 40 | 49 | 50 | 51 | 52 | 53 |

My HTML page with an embedded map

54 |
55 | 56 | 57 | ``` 58 | 59 | You should see a map with marker! 60 | 61 | **TODO**: screenshot image 62 | 63 | This example HTML and javascript makes use of the open source mapping javascript mapping library called 'OpenLayers' and the open licensed maps from [OpenStreetMap.org](). 64 | 65 | In the javascript code we see how to initialise a map object which will appear within a div on your HTML page. A LonLat object is created to represent the centre point of the map. Try playing with the latitude, longitude values. A call to `transform` sorts out the projections, and we use this same location to place a marker. 66 | 67 | 68 | 69 | Geo-locations Latitude and Longitude 70 | ------------------------------------ 71 | 72 | **TODO** 73 | -------------------------------------------------------------------------------- /data/images/gssImportFormula.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/data/images/gssImportFormula.jpg -------------------------------------------------------------------------------- /data/images/gssImportFormulaFull.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/data/images/gssImportFormulaFull.jpg -------------------------------------------------------------------------------- /data/images/gssImportedHTMLTable.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/data/images/gssImportedHTMLTable.jpg -------------------------------------------------------------------------------- /data/images/wikipediaTable.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/data/images/wikipediaTable.jpg -------------------------------------------------------------------------------- /data/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to the Data Wrangling Handbook! 3 | --- 4 | 5 | *Data wrangling for fun and profit* 6 | 7 | This handbook is not a finished document but a collection of opinions and evolving best practices. The purpose is not to present all available options and technologies but to pick one and follow it through. 8 | 9 | The Handbook is also a collaborative effort: if you have a recipe, a tool or a howto and would like to share them, please contribute a patch or make a suggestion. 10 | 11 | The Handbook consists of two main parts: 12 | 13 | * Guides and Tutorials: Guides and tutorials that walks you the main aspects of data wrangling 14 | * [Patterns](patterns/): A set of "patterns" or recipes for doing specific tasks from scraping an HTML table to geocoding in a spreadsheet 15 | 16 | ## Guides and Tutorials 17 | 18 | * [Walk-through of some Data Wrangling basic tasks]({{site.baseurl}}/data/tutorial/) 19 | * [SQL for Data Manipulation](sql-for-data-manipulation/) 20 | * [Introduction CSV - the Lingua Franca of Data](csv/) 21 | * [Glossary of Terms](glossary/) 22 | 23 | ## Contributing 24 | 25 | * Edit directly on the [Handbook Github Repository](https://github.com/okfn/handbook) 26 | * Submit an issue to our [Issue Tracker](https://github.com/okfn/handbook/issue) 27 | 28 | -------------------------------------------------------------------------------- /data/patterns/archiving-twitter.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Archiving Twitter 3 | --- 4 | 5 | Twitter data is only available via the search API for up to 7 days. Data for a given account only goes back a few thousand tweets. Thus archiving tweets can be a useful activity. This entry details a few options and in the process shows some neat tips and tricks for pulling down data. 6 | 7 | Using twarc 8 | ----------- 9 | 10 | [twarc](https://github.com/edsu/twarc) is a powerful command line tool and Python library for archiving Twitter JSON data. You will need to obtain a free API key from Twitter in order to start archiving tweets. 11 | 12 | 13 | Using Javascript and the DataHub 14 | -------------------------------- 15 | 16 | See https://github.com/OKFN-BR/BusaoSP/blob/master/getdata.js 17 | -------------------------------------------------------------------------------- /data/patterns/choropleth-maps-from-spreadsheets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Creating a Choropleth map 3 | --- 4 | 5 | **This tutorial uses Google spreadsheets to create a choropleth map. There is sample data for this tutorial [`here`](http://dump.tentacleriot.eu/wb-gdp-health-life.csv) 6 | 7 | 1. Filter for a single year (e.q. 2009) insert a new sheet and copy the filtered data into it. 8 | 2. As with all previous charts also here the columns need to be in a special position. 9 | 3. Move your data column (the one you want to use to display) right next to the country names. 10 | 11 | ![](http://farm9.staticflickr.com/8176/7982195441_15c8d45df8_o_d.png) 12 | 13 | 1. Now mark the two columns and select “Chart...” from “insert”. 14 | 2. Under “Charts” select “Map” and then “geo chart - regions”. 15 | 3. You’ll see a preview. Play with the settings in customize to change the map, the colour-scale etc. 16 | 4. A note on colours: the red-green scale that is selected by default is not the best scale. So select a different one showing contrasts nicely. 17 | 18 | -------------------------------------------------------------------------------- /data/patterns/extracting-data-from-pdf-with-tabula.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Extracting Data from PDFs using Tabula 3 | --- 4 | 5 | PDFs can be all forms and shapes - if you’re facing a nicely formatted 6 | PDF that is not scanned give Tabula a shot to extract the information. 7 | How? read the short walkthrough below: 8 | 9 | You’ll need: 10 | 11 | - [Tabula](http://jazzido.github.io/tabula/) 12 | - a PDF: e.g. [](http://www.unhabitat.org/pmss/getElectronicVersion.aspx?nr=3387&alt=1) 13 | 14 | Waltkthrough: Extracting data from PDF tables 15 | --------------------------------------------- 16 | 17 | 1. Download the PDF at: [](http://www.unhabitat.org/pmss/getElectronicVersion.aspx?nr=3387&alt=1) 18 | 2. Start Tabula (most likely by double clicking on the tabula icon) 19 | 3. point your browser tof [](http://127.0.0.1:8080) 20 | 4. Choose the file you want to upload and click Submit 21 | ![image](http://farm6.staticflickr.com/5484/9500458533_91f9a6cdb4_o_d.png) 22 | 5. Wait until the PDF is fully loaded 23 | 6. Scroll down to page 167 - we’ll extract that table. 24 | 7. Click and pull a selection box over the table 25 | ![image](http://farm4.staticflickr.com/3726/9500458669_96dbc7f6e5_o_d.png) 26 | 8. A window will pop up to show how Tabula would extract the data. 27 | ![image](http://farm4.staticflickr.com/3703/9500458729_333885f7a3_z_d.jpg) 28 | 9. Now download the Data as CSV 29 | ![image](http://farm8.staticflickr.com/7397/9500458755_4e9e802e54_o_d.png) 30 | 10. Fantastic you liberated the table from the PDF. Quick and easy wasn’t it? 31 | 32 | 33 | -------------------------------------------------------------------------------- /data/patterns/filtering-data-with-spreadsheets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Filtering Data 3 | --- 4 | 5 | **This tutorial uses Google spreadsheets to filter data. Other spreadsheet programs work in a similar way - play around and see how they differ.** 6 | 7 | There is sample data for this tutorial [here](http://dump.tentacleriot.eu/wb-gdp-health-life.csv). 8 | 9 | Filtering data in a spreadsheet allows you to shut out the values you don't want to see. For example, in the sample data, some “Country Names” are actually not countries? You'll find things like “World”, “North America” and “Arab World”. Let's filter them out. 10 | 11 | Walkthrough: Filtering Data 12 | --------------------------- 13 | 14 | 1. Select the whole table. 15 | 2. Select “Filter” from the “Data” menu. 16 | 3. You now should see triangles next to the column names in the first row. 17 | 4. Click on the triangle next to country name. 18 | 5. you should see a long list of country names in the box. 19 | ![image](http://farm9.staticflickr.com/8316/8070573150_2cf29b914f_o_d.png) 20 | 6. Find those that are not a country and click on them (the green check mark will disappear). 21 | 7. Now you have successfully filtered your dataset. 22 | 8. Go ahead and play with it - the data will not be deleted, it’s just not displayed. 23 | 24 | 25 | -------------------------------------------------------------------------------- /data/patterns/geo-googledocs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Geocoding Data in a Google Docs Spreadsheet 3 | --- 4 | 5 | A very common need is to geocode data in a Google Spreadsheet (for example, in creating TimeMaps with the [Timeliner](http://timeliner.okfnlabs.org/) project). There are several options here: 6 | 7 | By hand – use a Geocoding service (see the [course](http://schoolofdata.org/handbook/courses/geocoding/) on geocoding) and then copy and paste by hand. Use the ImportXML (or ImportCSV) formulae to grab data from a geocoding service – great but with limitations on the number of rows you can code at one time (\~50). Use a Google App Script – the most powerful but requires installation of an App Script in your spreadsheet. In this tutorial I’m going to cover the latter two automated options and specifically focus on option 2. 8 | 9 | Using Formulas All of the following is illustrated live in this [google spreadsheet](https://docs.google.com/a/okfn.org/spreadsheet/ccc?key=0AqR8dXc6Ji4JdHBhY25yQkpHWF9NcEt1d3hrU0JWcUE#gid=0). 10 | 11 | We start with a formula like the following: 12 | ```excel 13 | =ImportXML("http://open.mapquestapi.com/nominatim/v1/search?format=xml&q=London", "//place[1]/@lat") 14 | ``` 15 | This formula uses the ImportXML function to look up XML data from the [Mapquest Nominatim geocoding service](http://open.mapquestapi.com/nominatim/) (see the previous tutorial for more about geocoding services). The first argument to ImportXML is the URL to fetch (in this case the results from querying the geocoding service) and the second part is an XPath expression to select data from that returned XML. In this case, the XPath looks up the first place object in the results: place[1] and then gets the lat (latitude) attribute. To understand this more clearly, here’s the XML returned by that XML query: 16 | ![image](http://i.imgur.com/9ZCchXY.png) 17 | 18 | In reality we want both latitude and longitude, so let’s change it to: 19 | ```excel 20 | =ImportXML("http://open.mapquestapi.com/nominatim/v1/search?format=xml&q=London", "//place[1]/@lat | //place[1]/@lon") 21 | ``` 22 | 23 | This uses an “or” || expression in XPath and the result will now be an array of results that Google Docs will put in 2 cells (one below another). You can see this in Column C of the example spreadsheet. 24 | 25 | What happens if we wanted the data in just one cell, with the two values separated by commas, for example? We could use the JOIN function: 26 | ```excel 27 | =JOIN(",", ImportXML("http://open.mapquestapi.com/nominatim/vi/search?format=xml&q=London", "//place[1]/@lat | //place[1]/@lon")) 28 | ``` 29 | Lastly, we’d like to geocode based on a place name in an another cell in the spreadsheet. To do this we just need to add the place name to our API request to MapQuest’s Nominatim service using the CONCATENATE function (this example assures the value is in cell A2): 30 | ```excel 31 | =ImportXML(CONCATENATE("http://open.mapquestapi.com/nominatim/v1/search?format=xml&q=", A2), "//place[1]/@lat") 32 | =JOIN(",", ImportXML(CONCATENATE("http://open.mapquestapi.com/nominatim/v1/search?format=xml&q=",A2), "//place[1]/@lat | //place[1]/@lon")) 33 | ``` 34 | 35 | App Script 36 | ---------- 37 | 38 | If you want an even more powerful approach you can use a Google App Script. In particular, Development Seed’s [MapBox](http://developmentseed.org/) team have prepared a great ready-made Google AppScript that will do geocoding for you. 39 | 40 | Find the [script plus instructions](https://github.com/mapbox/geo-googledocs) online. 41 | 42 | 43 | -------------------------------------------------------------------------------- /data/patterns/geocoding.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Geocoding / Georeferencing Data 3 | --- 4 | 5 | Geo-Googledocs 6 | -------------- 7 | 8 | * Google docs app script allowing you to do the following with your google docs spreadsheet: 9 | 10 | * Export to :term:`GeoJSON` 11 | * `Geocode` arbitrary addresses 12 | 13 | * Code: [https://github.com/mapbox/geo-googledocs]() 14 | * Docs: [http://developmentseed.org/blog/2011/10/12/mapping-google-doc-spreadsheet/]() 15 | * Author: MapBox (DevelopmentSeed) 16 | 17 | -------------------------------------------------------------------------------- /data/patterns/how-to-find-data.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to find data 3 | --- 4 | 5 | If you are looking for further inspiration on how to find data beyond the ways highlighted in the [course](http://schoolofdata.org/handbook/courses/finding-data/) on finding data, read on! 6 | 7 | Edited directories 8 | ------------------ 9 | 10 | One of the [largest directories of open data repositories](http://oad.simmons.edu/oadwiki/Data_repositories) is provided by the [Open Access Directory](http://oad.simmons.edu/oadwiki/About_OAD). Its collection is mostly focused on scientific or research data and is curated by topic area. Topics covered in the directory include archaeology, astronomy, biology, chemistry, computer science, energy, environmental sciences, earth sciences, linguistics, marine sciences, medicine, physics and social sciences. 11 | 12 | [CKAN](http://ckan.net) is a directory that largely works through wiki-like edits. Some of the benefits of CKAN are that it has well developed client libraries that enable you to programmatically access information about each of the datasets within its directory. For example, it is easy to ask it to tell you which datasets have been released into the public domain. 13 | 14 | [Quora](http://www.quora.com) has actually become a great source of information about where to find data on specific topic areas. It has several questions related to this topic which are being continually updated. Some examples include: 15 | 16 | - [What are some free, public data sets?](http://www.quora.com/Data/What-are-some-free-public-data-sets) 17 | - [Where can I get large datasets open to the public?](http://www.quora.com/Data/Where-can-I-get-large-datasets-open-to-the-public) 18 | 19 | 20 | -------------------------------------------------------------------------------- /data/patterns/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Patterns 3 | --- 4 | 5 | This section contains small snippets that will help you in the process of data wrangling. They might be small useful tips of full blown tutorials on tools or topics. 6 | 7 | **Note on the term 'pattern'** 8 | 9 | The term pattern has developed a very specific meaning in software engineering. While we use the term in this sense, the tricks presented are not defined as a pattern using any of the formal templates that have developed for software design patterns. 10 | 11 |
    12 | {% assign sorted_pages = (site.pages | sort: 'title') %} 13 | {% for page in sorted_pages %} 14 | {% if page.section == 'patterns' and page.name != 'index.md' %} 15 |
  • {{page.title}}
    • 16 | {% endif %} 17 | {% endfor %} 18 |
19 | 20 | -------------------------------------------------------------------------------- /data/patterns/interactive_bubble_charts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Creating an Interactive Bubble Chart 3 | --- 4 | 5 | **This tutorial uses Google spreadsheets to create an Interactive Bubble Chart. There is sample data for this tutorial [here](http://dump.tentacleriot.eu/wb-gdp-health-life.csv) .** 6 | 7 | 1. Start with the World Bank dataset. 8 | 2. Select all years and all countries (except the names that are definitely not countries: such as world, North America and son on). 9 | 3. Copy the data to a new sheet. 10 | 4. In order to do animated bubble plots you'll need to order your columns so that is country names, B is year and the rest are values you're interested in. The column order will affect the way the gadget is set up per default. 11 | ![image](http://farm9.staticflickr.com/8453/7982243972_2913843fa7_o.png) 12 | 5. Now mark the whole sheet and click "insert" "gadget" 13 | 6. Select "charts" and "motion chart". 14 | ![image](http://farm9.staticflickr.com/8463/8112394477_f78ca0eecf_o.png) 15 | 7. You'll see the chart loading. 16 | 8. You can adjust the values for each of the axis and the size. And you can slide through the years. 17 | 9. Click on play and see how the world changes in 10 years. 18 | 19 | 20 | -------------------------------------------------------------------------------- /data/patterns/intro-to-apis.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: What is an API and how to use one 3 | --- 4 | 5 | In some cases, open data is provided through an application programming interface (API), often a web-based method for retrieving, searching or even updating the available information dynamically. APIs provide up-to-date data in a granular and filtered form, removing the need to repeatedly process and update source files. 6 | 7 | A common use case for APIs is relatively time-sensitive information, such as procurement calls and contracts which are released every day. In the UK, BusinessLink ([http://www.contractsfinder.businesslink.gov.uk/data-feed.aspx](http://www.contractsfinder.businesslink.gov.uk/data-feed.aspx)) provides a number of data feeds which contain information about procurement notices. Similarly, the USASpending portal provides a set of APIs that can be used to retrieve up-to-date grants information for the US federal government ([http://usaspending.gov/data](http://usaspending.gov/data)). 8 | 9 | [TODO - how to use one] 10 | 11 | 12 | -------------------------------------------------------------------------------- /data/patterns/liberating-access-databases.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Liberating Data from Microsoft Access Databases 3 | --- 4 | 5 | Use the [`mdbtools library`](http://mdbtools.sourceforge.net/). On 6 | Ubuntu / Debian you can install this via: 7 | 8 | ```bash 9 | $ apt-get install mdbtools 10 | ``` 11 | 12 | It is also available via [Homebrew](http://brew.sh/) on the Mac: 13 | 14 | ```bash 15 | $ brew install mdbtools 16 | ``` 17 | 18 | Key functions: 19 | 20 | + Get an SQL schema 21 | 22 | ```bash 23 | $ mdb-schema {database-name} 24 | ``` 25 | 26 | + Get a list of the table names 27 | 28 | ```bash 29 | $ mdb-tables {database-name} 30 | ``` 31 | 32 | + Export a table as a CSV file 33 | 34 | ```bash 35 | $ mdb-export {databbase-name} {table-name} 36 | ``` 37 | 38 | Here's an example script to extract all of the data from the Access 39 | database into CSV files: 40 | 41 | ```python 42 | #!/usr/bin/env python 43 | import os, sys, subprocess 44 | 45 | # Get database name from arguments passed to the script 46 | # Alternative you could set explicitly e.g. `DATABASE = 'my-access-db.mdb'` 47 | 48 | DATABASE = sys.argv[1] 49 | 50 | # Get table names using mdb-tables 51 | table_names = subprocess.Popen(['mdb-tables', '-1', DATABASE], stdout=subprocess.PIPE).communicate()[0] 52 | tables = table_names.split('\n') 53 | 54 | # Walk through each table and dump as CSV file using 'mdb-export' 55 | # Replace ' ' in table names with '_' when generating CSV filename 56 | for table in tables: 57 | if table != '': 58 | filename = table.replace(' ','_') + '.csv' 59 | print('Exporting ' + table) 60 | with open(filename, 'wb') as f: 61 | subprocess.check_call(['mdb-export', DATABASE, table], stdout=f) 62 | ``` 63 | 64 | If you save this script as `script.py`, you can use it as follows:: 65 | 66 | ```bash 67 | $ python script.py {path-to-access-database} 68 | ``` 69 | 70 | CSV files will be written to the current directory. 71 | -------------------------------------------------------------------------------- /data/patterns/liberating-html-tables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Liberating HTML Data Tables 3 | --- 4 | 5 | It's not uncommon to see small data sets published on the web using an HTML table element. If you have a quick click around Wikipedia, you're likely to find a wide variety of examples. Some sites will use Javascript libraries to enhance the presentation or usability of a table, for example, by making columns sortable; but most of the time, we are faced with a flat HTML table, and the data locked in it. 6 | 7 | In this section, we look at some quick tricks for liberating data from HTML tables on public webpages and turning them into something more useful. 8 | 9 | Screenscraping HTML Tables Using Google Spreadsheets 10 | ---------------------------------------------------- 11 | 12 | The Google spreadsheet formula: 13 | 14 | ``` 15 | =importHTML("","table",N) 16 | ``` 17 | will scrape a table from an HTML web page into a Google spreadsheet. The URL of the target web page, and the target table element both need to be in double quotes. The number N identifies the N'th table in the page (counting starts at 1) as the target table for data scraping. 18 | 19 | So for example, have a look at the following Wikipedia page – [List of largest United Kingdom settlements by population](http://en.wikipedia.org/wiki/List_of_largest_United_Kingdom_settlements_by_population) (found using a search on Wikipedia for UK city population): 20 | ![image](http://farm9.staticflickr.com/8303/7850933084_b188c02992_o_d.jpg) 21 | 22 | Grab the URL, fire up a new Google spreadsheet, and start to enter the formula `=importHTML` into one of the cells: 23 | ![image](http://farm9.staticflickr.com/8284/7850932578_b5db80ed9d_o_d.jpg) 24 | 25 | Autocompletion works a treat, so finish off the expression and add in the URL and table number: 26 | ```excel 27 | =importHTML("http://en.wikipedia.org/wiki/List_of_largest_United_Kingdom_settlements_by_population","table",2) 28 | ``` 29 | 30 | The table numbers are not always obvious - start with 1 and increment the table number until you get the correct one. 31 | ![image](http://farm9.staticflickr.com/8438/7850932674_ef1514b761_o_d.jpg) 32 | 33 | As if by magic, a data table appears in the spreadsheet, pulled in directly from the Wikipedia page: 34 | ![image](http://farm9.staticflickr.com/8425/7850932816_b5598830e0_o_d.jpg) 35 | 36 | If the data in the HTML table is updated, the data in the spreadsheet will also be updated when you refresh or call the spreadsheet page. 37 | 38 | 39 | -------------------------------------------------------------------------------- /data/patterns/line-charts-from-spreadsheets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Creating Line Charts 3 | --- 4 | 5 | **This tutorial uses Google spreadsheets to create a line chart.** 6 | 7 | There is sample data for this tutorial [here](http://dump.tentacleriot.eu/wb-gdp-health-life.csv) . 8 | 9 | So let’s create a line chart. Let’s say we want to see how healthcare expenditure evolved in Luxembourg, our top spending country. 10 | 11 | 1. Go back to your World Bank data sheet. 12 | 2. Remove the filter for years and filter for a single country: Luxembourg (you can do so by clicking the “clear” label in the filtering menu - then type Luxem and you’ll see Luxembourg appear - select it). 13 | 3. Now the only thing that’s left is sorting by years - so you have them in right order. 14 | 4. Select all of it and copy it to a new sheet. 15 | 5. Now move the columns year and “healthcare expenditure total per person” next to each other. 16 | ![image](http://farm9.staticflickr.com/8305/7982104847_5a4be76fc7_o_d.png) 17 | 6. Select both columns and select “Chart...” from the “insert” menu. 18 | 7. Click on the “charts” tab and select the line chart you want to plot. 19 | ![image](http://farm9.staticflickr.com/8330/8079886985_49583d3d90_o_d.png) 20 | 8. You already know how to manipulate the look of a chart, so go and play around until it looks similar to the chart above! 21 | 22 | 23 | -------------------------------------------------------------------------------- /data/patterns/mirroring.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Keeping the data around 3 | --- 4 | 5 | As you retrieve data from the government (or other sources), it's easy to just consider the websites it has been released on as a permanent resource. Still, experience has shown that data does go away: whether it is through government re-designing its web sites, new policies that retract transparency rules or simple system failures. 6 | 7 | At the same time, downloading complete copies of web sites - a process called mirroring - is a fairly well-established technique that can easily be deployed by civil society organisations. Mirroring involves an automated computer program (for a list see: [http://en.wikipedia.org/wiki/Web_crawler](http://en.wikipedia.org/wiki/Web_crawler)) harvesting all the web pages from a specified web page, e.g. a ministry home page. In most cases, it is also possible to find old versions of web sites via the Internet Archive's Wayback machine ([http://archive.org/web/web.php](http://archive.org/web/web.php)), a project that aims to create up-to-date copies of all public web sites and archive them forever 8 | 9 | 10 | -------------------------------------------------------------------------------- /data/patterns/publishing-work-online.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Publishing our results 3 | --- 4 | 5 | Now let's go ahead and publish our results on a webpage. This will get a bit techy but don't worry we'll guide you through. We will create a small web page containing some of the visualizations we created using a simple online tool called pastehtml. Pastehtml allows you to create html websites easily by simply editing the text online and then saving it for sharing. 6 | 7 | Walkthrough: Presenting our information as a webpage 8 | ---------------------------------------------------- 9 | 10 | 1. To start a webpage simply visit pastehtml.com 11 | 2. See the input box with all the brackets? This is html code and we'll be editing it to present your results. (If you want to learn more about html code head to the [school of webcraft](https://p2pu.org/en/schools/school-of-webcraft/) 12 | ![image](http://farm9.staticflickr.com/8470/8112394583_9c6c439893_o.png) 13 | 3. First let's change the title of the webpage: This is the bit between `` and ``. Edit it so it is appropriate. 14 | 4. Then let's go and edit the content for a webpage (this is the part between `` and ``). See the text between `

` this defines a paragraph. Go ahead and edit it! 15 | 5. You can click on `Publish page` to see how your page will look like (approximately). 16 | 6. On the top you'll always have the possibility to go back and edit. 17 | 7. Now let's add some charts we made. 18 | 8. Go back to one of the charts in the spreadsheet. 19 | 9. Click on the chart. See the small triangle top right of the chart: this is the options menu. 20 | 10. Go and select `Publish chart'85`. There will be a popup with a lot of code in a grey box: 21 | ![image](http://farm9.staticflickr.com/8195/8112418106_fac64f623f_o.png) 22 | 11. Copy this code and paste it into the pastehtml (somewhere between `` and ``). Now if you go and look at your page, the chart should be there. 23 | ![image](http://farm9.staticflickr.com/8050/8112418146_72872fde90_o.png) 24 | 12. Once you are finished, click on publish and you'll get a url to your webpage. use this to share your results with your friends. 25 | 26 | Of course if you already have a blog or something similar you can share the results there 27 | 28 | 29 | -------------------------------------------------------------------------------- /data/patterns/scatterplots-from-spreadsheets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Walkthrough: Scatterplot" 3 | --- 4 | 5 | **This tutorial uses Google spreadsheets to create a scatterplot. There is sample data for this tutorial 6 | [here](http://dump.tentacleriot.eu/wb-gdp-health-life.csv) .** 7 | 8 | So let’s create a scatterplot. 9 | 10 | 1. Start with World Bank Data. 11 | 2. Copy it to a new sheet and put the columns “healthcare expenditure total per person” and “life expectancy” next to each other. 12 | ![image](http://farm9.staticflickr.com/8032/7982225274_2374aee969_o_d.png) 13 | 3. Click `insert` `charts...` and select “scatter plot” from charts. 14 | 4. Select the first one, since this is what we want to do. 15 | 5. And there you go: simply adapt the scatterplot so it looks nice. 16 | Don’t forget to label axes. Try to make the dots smaller if there is significant overlap. 17 | 18 | -------------------------------------------------------------------------------- /data/patterns/sorting-data-with-spreadsheets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sorting Data with Spreadsheets 3 | --- 4 | 5 | **This tutorial uses Google spreadsheets to sort data. Other spreadsheet programs work in a similar way - play around and see how they differ.** 6 | 7 | There is sample data for this tutorial [here](http://dump.tentacleriot.eu/wb-gdp-health-life.csv). 8 | 9 | Walkthrough: Sorting a dataset. 10 | ------------------------------- 11 | 12 | 1. Select the whole sheet you want to sort. Do this by clicking on the right upper grey field, between the row and column names. 13 | ![image](http://farm9.staticflickr.com/8322/8070104022_e233a65687_o_d.png) 14 | 2. Select “Sort Range...” from the “Data” menu – this will open an additional Selection 15 | 3. Check the “Data has header row” checkbox 16 | ![image](http://farm9.staticflickr.com/8437/7872826062_017d1bfe19_o_d.jpg) 17 | 4. Select the column you want to sort by in the dropdown menu 18 | 5. Try to sort by GDP – Which country has the lowest? 19 | 6. Try again with different values, can you sort ascending and descending? 20 | 21 | **Tip:** Be careful! A common mistake is to forget to select *all* the data. If you sort without selecting all the data, the rows will no longer match up. 22 | 23 | 24 | -------------------------------------------------------------------------------- /data/patterns/sql-output-csv-from-postgresql.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Outputting CSV from Postgres 3 | --- 4 | 5 | ``` 6 | \f ',' 7 | \a 8 | \t 9 | \o /path/to/my.csv 10 | SELECT field1,field2 FROM some_table; 11 | \o 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/favicon.ico -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:10 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /glossary/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Glossary 3 | --- 4 | 5 | ## Open Data 6 | Open data is data that can be used, reused and redistributed freely by anyone for any purpose. More details can be found at at [`opendefinition.org`](http://www.opendefinition.org/). 7 | 8 | ## Machine-readable 9 | Formats that are machine readable are ones which are able to have their data extracted by computer programs easily. PDF documents are not machine readable. Computers can display the text nicely, but have great difficulty understanding the context that surrounds the text. 10 | 11 | ## BitTorrent 12 | BitTorrent is a protocol for distributing the bandwith for transferring very large files between the computers which are participating in the transfer. Rather than downloading a file 13 | from a specific source, BitTorrent allows peers to download from each other. 14 | 15 | ## CSV 16 | Comma Separated Variables. A very simple, open format for tabular data which can be exported and imported by all spreadsheet applications and is easily manipulable with command line tools. 17 | 18 | ## curl 19 | [curl](http://curl.haxx.se/) - a command line tool for transferring data to and from online systems over standard internet protocols including FTP and HTTP. Very powerful and great for working with `Web API` s from the command line. 20 | 21 | ## DAP 22 | See `Data Access Protocol`. 23 | 24 | ## Data Access Protocol 25 | A system that allows outsiders to be granted access to databases without overloading either system. 26 | 27 | ## Etherpad 28 | A piece of software for collaborative real-time editing of text. See [http://etherpad.org/](). 29 | 30 | ## Attribution Licence 31 | A licence that requires attributing the original source of the licensed material. 32 | 33 | ## Attribution License 34 | See `Attribution Licence`. 35 | 36 | ## API 37 | See `Application Programming Interface`. 38 | 39 | ## Application Programming Interface 40 | A way computer programmes talk to one another. Can be understood in terms of how a programmer sends instructions between programmes. 41 | 42 | ## Web API 43 | An `API` that is designed to work over the Internet. 44 | 45 | ## Share-alike License 46 | See `Share-alike Licence`. 47 | 48 | ## Share-alike Licence 49 | A licence that requires users of a work to provide the content under the same or similar conditions as the original. 50 | 51 | ## Public domain 52 | No copyright exists over the work. Does not exist in all jurisdictions. 53 | 54 | ## Open standards 55 | Generally understood as technical standards which are free from licencing restrictions. Can also be interpreted to mean standards which are developed in a vendor-neutral manner. 56 | 57 | ## Anonymization 58 | See `Anonymisation`. 59 | 60 | ## Anonymisation 61 | The process of treating data such that it cannot be used for the identification of individuals. 62 | 63 | ## IP rights 64 | See `Intellectual property rights`. 65 | 66 | ## Intellectual property rights 67 | Monopolies granted to individuals for intellectual creations. 68 | 69 | ## Tab-seperated values 70 | Tab-seperated values (TSV) are a very common form of text file format for sharing tabular data. The format is extremely simple and highly `machine-readable`. 71 | -------------------------------------------------------------------------------- /img/data-wrench.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/data-wrench.png -------------------------------------------------------------------------------- /img/home-banner-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/home-banner-bg.jpg -------------------------------------------------------------------------------- /img/home-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/home-banner.jpg -------------------------------------------------------------------------------- /img/home-banner_2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/home-banner_2x.jpg -------------------------------------------------------------------------------- /img/open-content.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /img/open-knowledge-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/open-knowledge-large.png -------------------------------------------------------------------------------- /img/open-knowledge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/open-knowledge.png -------------------------------------------------------------------------------- /img/supporters/4ip-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/supporters/4ip-footer.png -------------------------------------------------------------------------------- /img/supporters/hewlett-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/supporters/hewlett-footer.png -------------------------------------------------------------------------------- /img/supporters/kf-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/supporters/kf-footer.png -------------------------------------------------------------------------------- /img/supporters/on-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/supporters/on-footer.png -------------------------------------------------------------------------------- /img/supporters/osf-footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/img/supporters/osf-footer.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | js: 4 | - vendor/jquery.adaptive-backgrounds.min 5 | - home 6 | --- 7 | 8 |

9 | 15 | 16 |
17 |
18 |

Get Started

19 |

Get a quick intro to Labs and its projects and find out how you can get involved and gain skills.

20 | Read more 21 |
22 | 23 |
24 |
25 |

Data Handbook

26 |

Find out how to find, clean and analyse data with the handbook.

27 | Read more 28 |
29 |
30 | 31 |
32 |
33 |

Core Datasets

34 |

Find out about the core datasets projects and how to start contributing Data Packages.

35 | Read more 36 |
37 |
38 |
39 |
40 | -------------------------------------------------------------------------------- /js/apps.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $( function() { 3 | // quick search regex 4 | var qsRegex; 5 | var buttonFilter; 6 | 7 | // init Isotope 8 | var $container = $('section.apps > ul').isotope({ 9 | itemSelector: 'section.apps > ul > li', 10 | layoutMode: 'fitRows', 11 | filter: function() { 12 | var $this = $(this); 13 | var searchResult = qsRegex ? $this.text().match( qsRegex ) : true; 14 | var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true; 15 | return searchResult && buttonResult; 16 | } 17 | }); 18 | 19 | $('.filter').on( 'click', 'a', function() { 20 | buttonFilter = $( this ).attr('data-filter'); 21 | $container.isotope(); 22 | }); 23 | 24 | // use value of search field to filter 25 | var $quicksearch = $('.quicksearch').keyup( debounce( function() { 26 | qsRegex = new RegExp( $quicksearch.val(), 'gi' ); 27 | $container.isotope(); 28 | }) ); 29 | 30 | 31 | // change is-checked class on buttons 32 | $('.filter').each( function( i, buttonGroup ) { 33 | var $buttonGroup = $( buttonGroup ); 34 | $buttonGroup.on( 'click', 'a', function() { 35 | $('.app-sub-menu').find('.filter-items .active').removeClass('active'); 36 | $( this ).addClass('active'); 37 | }); 38 | }); 39 | 40 | 41 | }); 42 | 43 | // debounce so filtering doesn't happen every millisecond 44 | function debounce( fn, threshold ) { 45 | var timeout; 46 | return function debounced() { 47 | if ( timeout ) { 48 | clearTimeout( timeout ); 49 | } 50 | function delayed() { 51 | fn(); 52 | timeout = null; 53 | } 54 | setTimeout( delayed, threshold || 100 ); 55 | }; 56 | } 57 | }); -------------------------------------------------------------------------------- /js/home.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | $.adaptiveBackground.run({ 3 | yiqThreshold: 200 4 | }); 5 | }); 6 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Menu 3 | $("#menu").mmenu({ 4 | classes: "mm-light" 5 | }); 6 | 7 | // Detect if scrolled to footer 8 | var inview = new Waypoint.Inview({ 9 | element: $('.site-footer')[0], 10 | enter: function() { 11 | $( "body" ).addClass( "footer-in-view" ); 12 | }, 13 | exited: function() { 14 | $( "body" ).removeClass( "footer-in-view" ); 15 | }, 16 | }) 17 | 18 | // external links in new window 19 | var extAnchors = $('a[rel~=external]'); 20 | $.each( 21 | extAnchors, 22 | function (index, item) { 23 | $(item).attr('target', '_blank'); 24 | } 25 | ); 26 | 27 | //home 28 | if ($(window).width() > 640) { 29 | $('.home > .wrapper').equalize({children: 'div p'}); 30 | } 31 | 32 | //dropdown 33 | $(".dropdown-button").click(function() { 34 | $(".dropdown-menu").toggleClass("show-menu"); 35 | $(".dropdown-menu > li").click(function(){ 36 | $(".dropdown-menu").removeClass("show-menu"); 37 | }); 38 | }); 39 | 40 | //filters 41 | $("#menu .filter > a").click(function() { 42 | $(this).parent('.filter').toggleClass("active"); 43 | }); 44 | 45 | //github activity 46 | if ($('#github-activity').length) { 47 | $('#github-activity').githubActivity({ 48 | events: 5, 49 | repos: ["openspending/dotorg"] 50 | }); 51 | } 52 | }); 53 | -------------------------------------------------------------------------------- /js/resources.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $("#menu .filter .filter-items > a").click(function() { 3 | $("#menu .filter .filter-items > a").removeClass("active"); 4 | $(this).toggleClass("active"); 5 | filter_type = $(this).attr("data-filter"); 6 | filter_value = $(this).attr("data-value"); 7 | test = 0; 8 | $("ul.results > li").each(function(index, value) { 9 | type = $(this).find("dd." + filter_type).first() 10 | if(type.length && type.text() == filter_value){ 11 | $(this).show("slow"); 12 | } else { 13 | $(this).hide("slow"); 14 | } 15 | }); 16 | $("div.resources > section.topics").hide("slow"); 17 | $("div.resources > section.media-types").hide("slow"); 18 | }); 19 | 20 | // toggle info 21 | $(".resources .results .icon-info").click(function() { 22 | $(this).parent('aside').toggleClass("active"); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /js/vendor/jquery.adaptive-backgrounds.min.js: -------------------------------------------------------------------------------- 1 | !function(a){var t="data-ab-color",n="data-ab-parent",e="data-ab-css-background",r="ab-color-found",o={selector:'[data-adaptive-background="1"]',parent:null,exclude:["rgb(0,0,0)","rgba(255,255,255)"],normalizeTextColor:!1,normalizedTextColors:{light:"#fff",dark:"#000"},lumaClasses:{light:"ab-light",dark:"ab-dark"},yiqThreshold:"128"};!function(a){"use strict";var t=function(){return document.createElement("canvas").getContext("2d")},n=function(a,n){var e=new Image,r=a.src||a;"data:"!==r.substring(0,5)&&(e.crossOrigin="Anonymous"),e.onload=function(){var a=t("2d");a.drawImage(e,0,0);var r=a.getImageData(0,0,e.width,e.height);n&&n(r.data)},e.src=r},e=function(a){return["rgb(",a,")"].join("")},r=function(a){return a.map(function(a){return e(a.name)})},o=5,c=10,l={};l.colors=function(a,t){t=t||{};var l=t.exclude||[],i=t.paletteSize||c;n(a,function(n){for(var c=a.width*a.height||n.length,u={},s="",d=[],m={dominant:{name:"",count:0},palette:Array.apply(null,new Array(i)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},p=0;c>p;){if(d[0]=n[p],d[1]=n[p+1],d[2]=n[p+2],s=d.join(","),u[s]=s in u?u[s]+1:1,-1===l.indexOf(e(s))){var f=u[s];f>m.dominant.count?(m.dominant.name=s,m.dominant.count=f):m.palette.some(function(a){return f>a.count?(a.name=s,a.count=f,!0):void 0})}p+=4*o}if(t.success){var g=r(m.palette);t.success({dominant:e(m.dominant.name),secondary:g[0],palette:g})}})},a.RGBaster=a.RGBaster||l}(window),a.adaptiveBackground={run:function(c){var l=a.extend({},o,c);a(l.selector).each(function(){var o=a(this),c=function(){var a=i()?u():o[0];RGBaster.colors(a,{paletteSize:20,exclude:l.exclude,success:function(a){o.attr(t,a.dominant),o.trigger(r,{color:a.dominant,palette:a.palette})}})},i=function(){return o.attr(e)},u=function(){return o.css("background-image").replace("url(","").replace(")","").replace(" ","").replace(/\"/g,"")};o.on(r,function(a,t){var e;e=l.parent&&o.parents(l.parent).length?o.parents(l.parent):o.attr(n)&&o.parents(o.attr(n)).length?o.parents(o.attr(n)):i()?o:l.parent?o.parents(l.parent):o.parent(),e.css({backgroundColor:t.color});var r=function(){var a=t.color.match(/\d+/g);return(299*a[0]+587*a[1]+114*a[2])/1e3},c=function(a){return r(a)>=l.yiqThreshold?l.normalizedTextColors.dark:l.normalizedTextColors.light},u=function(a){return r(a)<=l.yiqThreshold?l.lumaClasses.dark:l.lumaClasses.light};l.normalizeTextColor&&e.css({color:c(t.color)}),e.addClass(u(t.color)).attr("data-ab-yaq",r(t.color)),l.success&&l.success(o,t)}),c()})}}}(jQuery); -------------------------------------------------------------------------------- /start/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Get Started" 3 | --- 4 | 5 | We are a community of civic hackers, data wranglers and ordinary citizens intrigued and excited by the possibilities of combining technology and information for good – making government more accountable, culture more accessible and science more efficient. 6 | 7 | We focus on making things - whether that’s apps, insights or tools. We have a strong preference for [open data](http://opendefinition.org/) and [free/open source software](https://opensource.org/). 8 | 9 | We are part of [Open Knowledge International](https://okfn.org/) and operate as a collaborative community which anyone can join. Labs is organized through a public [GitHub Repository](https://github.com/okfn/okfn.github.com). 10 | 11 | ## Data Wrangling 12 | 13 | Data wrangling can be described as the process of getting, cleaning and using data. The following list covers almost all activities we do. 14 | 15 | Click [here]({{site.baseurl}}/data/) to find more about data wrangling, getting, cleaning and publishing data online. 16 | 17 | ### Skills required 18 | 19 | This site is for anyone interested in working with data. It assumes you have a basic working knowledge of UNIX shell commands, the Python programming language, networking, SQL and common file formats like HTML, CSV or XML. If you are not familiar with these technologies, start by working through a tutorial on Python, such as Zed Shaw's [`Learn Python the Hard Way`](http://learnpythonthehardway.org/) and then pick up the others as you need them. 20 | 21 | We hope that some of the content will be especially useful to the many emerging types of data users, such as data journalists, civic hackers, coding wonks etc. 22 | 23 | While most techniques apply to any kind of machine-readable information, some of the material may refer to a specific class of data that we care a lot about: open government data. Government information is a good example of data both for the interesting things that we can learn from it, but also because virtually any imaginable data problem applies to it: incompleteness, corruption, strange formats or sheer size. 24 | 25 | ### What can I start doing now? 26 | 27 | The [Core Datasets project]({{site.baseurl}}/core-datasets) is a project in which we do a lot of data wrangling skills and we could use your help! 28 | -------------------------------------------------------------------------------- /tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/tile-wide.png -------------------------------------------------------------------------------- /tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/okfn/handbook/37d6a29e05261e222d88bb2eb98f8fc8d304106d/tile.png --------------------------------------------------------------------------------