commit b7977e1c283e5d3658cef726121d64d5be401a77 Author: Fredrik Jonsson Date: Thu Mar 9 14:26:46 2017 +0100 First commit. diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..afad7ef --- /dev/null +++ b/.eslintrc @@ -0,0 +1,87 @@ +{ + "extends": "eslint:recommended", + "env": { + "browser": true + }, + "globals": { + "Drupal": true, + "jQuery": true + }, + "rules": { + // Errors. + "array-bracket-spacing": [2, "never"], + "block-scoped-var": 2, + "brace-style": [2, "stroustrup", {"allowSingleLine": true}], + "comma-dangle": [2, "never"], + "comma-spacing": 2, + "comma-style": [2, "last"], + "computed-property-spacing": [2, "never"], + "curly": [2, "all"], + "eol-last": 2, + "eqeqeq": [2, "smart"], + "guard-for-in": 2, + "indent": [2, 2, {"SwitchCase": 1}], + "key-spacing": [2, {"beforeColon": false, "afterColon": true}], + "keyword-spacing": [2, {"before": true, "after": true}], + "linebreak-style": [2, "unix"], + "lines-around-comment": [2, {"beforeBlockComment": true, "afterBlockComment": false}], + "new-parens": 2, + "no-array-constructor": 2, + "no-caller": 2, + "no-catch-shadow": 2, + "no-eval": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-extra-parens": [2, "functions"], + "no-implied-eval": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-labels": 2, + "no-lone-blocks": 2, + "no-loop-func": 2, + "no-multi-spaces": 2, + "no-multi-str": 2, + "no-native-reassign": 2, + "no-nested-ternary": 2, + "no-new-func": 2, + "no-new-object": 2, + "no-new-wrappers": 2, + "no-octal-escape": 2, + "no-process-exit": 2, + "no-proto": 2, + "no-return-assign": 2, + "no-script-url": 2, + "no-sequences": 2, + "no-shadow-restricted-names": 2, + "no-spaced-func": 2, + "no-trailing-spaces": 2, + "no-undef-init": 2, + "no-undefined": 2, + "no-unused-expressions": 2, + "no-unused-vars": [2, {"vars": "all", "args": "none"}], + "no-with": 2, + "object-curly-spacing": [2, "never"], + "one-var": [2, "never"], + "quote-props": [2, "consistent-as-needed"], + "quotes": [2, "single", "avoid-escape"], + "semi": [2, "always"], + "semi-spacing": [2, {"before": false, "after": true}], + "space-before-blocks": [2, "always"], + "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], + "space-in-parens": [2, "never"], + "space-infix-ops": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "spaced-comment": [2, "always"], + "strict": 2, + "yoda": [2, "never"], + // Warnings. + "max-nested-callbacks": [1, 3], + "valid-jsdoc": [1, { + "prefer": { + "returns": "return", + "property": "prop" + }, + "requireReturn": false + }] + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/.sass-lint.yml b/.sass-lint.yml new file mode 100644 index 0000000..a462800 --- /dev/null +++ b/.sass-lint.yml @@ -0,0 +1,127 @@ +# Documentation for the sass-lint Linters is available at: +# https://github.com/sasstools/sass-lint/tree/master/docs/rules + +options: + formatter: stylish + merge-default-rules: true +rules: + # Extends + extends-before-mixins: 2 + extends-before-declarations: 2 + placeholder-in-extend: 2 + + # Mixins + mixins-before-declarations: + - 2 + - exclude: + - 'breakpoint' + - 'mq' + - 'respond-to' + - 'rtl' + - 'zen-breakpoint' + - 'zen-layout' + - 'zen-mq' + - 'zen-respond-to' + + # Line Spacing + one-declaration-per-line: 2 + empty-line-between-blocks: + - 2 + - ignore-single-line-rulesets: false + single-line-per-selector: 2 + + # Disallows + # no-color-keywords: 2 + # no-color-literals: 2 + # no-css-comments: 2 + no-debug: 2 + # no-duplicate-properties: 2 + no-empty-rulesets: 2 + no-extends: 0 + # no-ids: 2 + # no-important: 2 + no-invalid-hex: 2 + no-mergeable-selectors: 2 + no-misspelled-properties: + - 2 + - extra-properties: + - '*font-family' + - '*height' + - 'interpolation-mode' + - '*margin-left' + - '*vertical-align' + - '*width' + no-qualifying-elements: 0 + no-trailing-zero: 2 + no-transition-all: 2 + no-url-protocols: 2 + # no-vendor-prefixes: 2 + no-warn: 2 + property-units: 0 + + # Nesting + force-attribute-nesting: 0 + force-element-nesting: 0 + force-pseudo-nesting: 0 + + # Name Formats + class-name-format: + - 2 + - convention: hyphenatedbem + function-name-format: 2 + id-name-format: 2 + mixin-name-format: + - 2 + - convention: hyphenatedbem + placeholder-name-format: + - 2 + - convention: hyphenatedbem + variable-name-format: 2 + + # Style Guide + bem-depth: 0 + border-zero: 2 + brace-style: + - 2 + - style: stroustrup + - allow-single-line: false + clean-import-paths: 2 + empty-args: 0 + hex-length: 2 + hex-notation: 2 + # indentation: 2 + leading-zero: 2 + nesting-depth: + - 2 + - max-depth: 4 + property-sort-order: 0 + quotes: 2 + shorthand-values: 2 + url-quotes: 2 + variable-for-property: 2 + zero-unit: 2 + + # Inner Spacing + space-after-comma: 2 + space-before-colon: 2 + space-after-colon: 2 + space-before-brace: 2 + space-before-bang: 2 + space-after-bang: 2 + space-between-parens: 0 + space-around-operator: 0 + + # Final Items + trailing-semicolon: 2 + final-newline: 2 + + # Work-around for sass-lint not having per-file/block/line rule config. + # @TODO: Re-enable these disabled rules. See https://www.drupal.org/node/2717117 + indentation: 0 + no-color-keywords: 0 + no-color-literals: 0 + no-css-comments: 0 + no-duplicate-properties: 0 + no-ids: 0 + no-important: 0 + no-vendor-prefixes: 0 diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..d159169 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,339 @@ + GNU GENERAL PUBLIC LICENSE + Version 2, June 1991 + + Copyright (C) 1989, 1991 Free Software Foundation, Inc., + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + Everyone is permitted to copy and distribute verbatim copies + of this license document, but changing it is not allowed. + + Preamble + + The licenses for most software are designed to take away your +freedom to share and change it. By contrast, the GNU General Public +License is intended to guarantee your freedom to share and change free +software--to make sure the software is free for all its users. This +General Public License applies to most of the Free Software +Foundation's software and to any other program whose authors commit to +using it. (Some other Free Software Foundation software is covered by +the GNU Lesser General Public License instead.) You can apply it to +your programs, too. + + When we speak of free software, we are referring to freedom, not +price. Our General Public Licenses are designed to make sure that you +have the freedom to distribute copies of free software (and charge for +this service if you wish), that you receive source code or can get it +if you want it, that you can change the software or use pieces of it +in new free programs; and that you know you can do these things. + + To protect your rights, we need to make restrictions that forbid +anyone to deny you these rights or to ask you to surrender the rights. +These restrictions translate to certain responsibilities for you if you +distribute copies of the software, or if you modify it. + + For example, if you distribute copies of such a program, whether +gratis or for a fee, you must give the recipients all the rights that +you have. You must make sure that they, too, receive or can get the +source code. And you must show them these terms so they know their +rights. + + We protect your rights with two steps: (1) copyright the software, and +(2) offer you this license which gives you legal permission to copy, +distribute and/or modify the software. + + Also, for each author's protection and ours, we want to make certain +that everyone understands that there is no warranty for this free +software. If the software is modified by someone else and passed on, we +want its recipients to know that what they have is not the original, so +that any problems introduced by others will not reflect on the original +authors' reputations. + + Finally, any free program is threatened constantly by software +patents. We wish to avoid the danger that redistributors of a free +program will individually obtain patent licenses, in effect making the +program proprietary. To prevent this, we have made it clear that any +patent must be licensed for everyone's free use or not licensed at all. + + The precise terms and conditions for copying, distribution and +modification follow. + + GNU GENERAL PUBLIC LICENSE + TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. This License applies to any program or other work which contains +a notice placed by the copyright holder saying it may be distributed +under the terms of this General Public License. The "Program", below, +refers to any such program or work, and a "work based on the Program" +means either the Program or any derivative work under copyright law: +that is to say, a work containing the Program or a portion of it, +either verbatim or with modifications and/or translated into another +language. (Hereinafter, translation is included without limitation in +the term "modification".) Each licensee is addressed as "you". + +Activities other than copying, distribution and modification are not +covered by this License; they are outside its scope. The act of +running the Program is not restricted, and the output from the Program +is covered only if its contents constitute a work based on the +Program (independent of having been made by running the Program). +Whether that is true depends on what the Program does. + + 1. You may copy and distribute verbatim copies of the Program's +source code as you receive it, in any medium, provided that you +conspicuously and appropriately publish on each copy an appropriate +copyright notice and disclaimer of warranty; keep intact all the +notices that refer to this License and to the absence of any warranty; +and give any other recipients of the Program a copy of this License +along with the Program. + +You may charge a fee for the physical act of transferring a copy, and +you may at your option offer warranty protection in exchange for a fee. + + 2. You may modify your copy or copies of the Program or any portion +of it, thus forming a work based on the Program, and copy and +distribute such modifications or work under the terms of Section 1 +above, provided that you also meet all of these conditions: + + a) You must cause the modified files to carry prominent notices + stating that you changed the files and the date of any change. + + b) You must cause any work that you distribute or publish, that in + whole or in part contains or is derived from the Program or any + part thereof, to be licensed as a whole at no charge to all third + parties under the terms of this License. + + c) If the modified program normally reads commands interactively + when run, you must cause it, when started running for such + interactive use in the most ordinary way, to print or display an + announcement including an appropriate copyright notice and a + notice that there is no warranty (or else, saying that you provide + a warranty) and that users may redistribute the program under + these conditions, and telling the user how to view a copy of this + License. (Exception: if the Program itself is interactive but + does not normally print such an announcement, your work based on + the Program is not required to print an announcement.) + +These requirements apply to the modified work as a whole. If +identifiable sections of that work are not derived from the Program, +and can be reasonably considered independent and separate works in +themselves, then this License, and its terms, do not apply to those +sections when you distribute them as separate works. But when you +distribute the same sections as part of a whole which is a work based +on the Program, the distribution of the whole must be on the terms of +this License, whose permissions for other licensees extend to the +entire whole, and thus to each and every part regardless of who wrote it. + +Thus, it is not the intent of this section to claim rights or contest +your rights to work written entirely by you; rather, the intent is to +exercise the right to control the distribution of derivative or +collective works based on the Program. + +In addition, mere aggregation of another work not based on the Program +with the Program (or with a work based on the Program) on a volume of +a storage or distribution medium does not bring the other work under +the scope of this License. + + 3. You may copy and distribute the Program (or a work based on it, +under Section 2) in object code or executable form under the terms of +Sections 1 and 2 above provided that you also do one of the following: + + a) Accompany it with the complete corresponding machine-readable + source code, which must be distributed under the terms of Sections + 1 and 2 above on a medium customarily used for software interchange; or, + + b) Accompany it with a written offer, valid for at least three + years, to give any third party, for a charge no more than your + cost of physically performing source distribution, a complete + machine-readable copy of the corresponding source code, to be + distributed under the terms of Sections 1 and 2 above on a medium + customarily used for software interchange; or, + + c) Accompany it with the information you received as to the offer + to distribute corresponding source code. (This alternative is + allowed only for noncommercial distribution and only if you + received the program in object code or executable form with such + an offer, in accord with Subsection b above.) + +The source code for a work means the preferred form of the work for +making modifications to it. For an executable work, complete source +code means all the source code for all modules it contains, plus any +associated interface definition files, plus the scripts used to +control compilation and installation of the executable. However, as a +special exception, the source code distributed need not include +anything that is normally distributed (in either source or binary +form) with the major components (compiler, kernel, and so on) of the +operating system on which the executable runs, unless that component +itself accompanies the executable. + +If distribution of executable or object code is made by offering +access to copy from a designated place, then offering equivalent +access to copy the source code from the same place counts as +distribution of the source code, even though third parties are not +compelled to copy the source along with the object code. + + 4. You may not copy, modify, sublicense, or distribute the Program +except as expressly provided under this License. Any attempt +otherwise to copy, modify, sublicense or distribute the Program is +void, and will automatically terminate your rights under this License. +However, parties who have received copies, or rights, from you under +this License will not have their licenses terminated so long as such +parties remain in full compliance. + + 5. You are not required to accept this License, since you have not +signed it. However, nothing else grants you permission to modify or +distribute the Program or its derivative works. These actions are +prohibited by law if you do not accept this License. Therefore, by +modifying or distributing the Program (or any work based on the +Program), you indicate your acceptance of this License to do so, and +all its terms and conditions for copying, distributing or modifying +the Program or works based on it. + + 6. Each time you redistribute the Program (or any work based on the +Program), the recipient automatically receives a license from the +original licensor to copy, distribute or modify the Program subject to +these terms and conditions. You may not impose any further +restrictions on the recipients' exercise of the rights granted herein. +You are not responsible for enforcing compliance by third parties to +this License. + + 7. If, as a consequence of a court judgment or allegation of patent +infringement or for any other reason (not limited to patent issues), +conditions are imposed on you (whether by court order, agreement or +otherwise) that contradict the conditions of this License, they do not +excuse you from the conditions of this License. If you cannot +distribute so as to satisfy simultaneously your obligations under this +License and any other pertinent obligations, then as a consequence you +may not distribute the Program at all. For example, if a patent +license would not permit royalty-free redistribution of the Program by +all those who receive copies directly or indirectly through you, then +the only way you could satisfy both it and this License would be to +refrain entirely from distribution of the Program. + +If any portion of this section is held invalid or unenforceable under +any particular circumstance, the balance of the section is intended to +apply and the section as a whole is intended to apply in other +circumstances. + +It is not the purpose of this section to induce you to infringe any +patents or other property right claims or to contest validity of any +such claims; this section has the sole purpose of protecting the +integrity of the free software distribution system, which is +implemented by public license practices. Many people have made +generous contributions to the wide range of software distributed +through that system in reliance on consistent application of that +system; it is up to the author/donor to decide if he or she is willing +to distribute software through any other system and a licensee cannot +impose that choice. + +This section is intended to make thoroughly clear what is believed to +be a consequence of the rest of this License. + + 8. If the distribution and/or use of the Program is restricted in +certain countries either by patents or by copyrighted interfaces, the +original copyright holder who places the Program under this License +may add an explicit geographical distribution limitation excluding +those countries, so that distribution is permitted only in or among +countries not thus excluded. In such case, this License incorporates +the limitation as if written in the body of this License. + + 9. The Free Software Foundation may publish revised and/or new versions +of the General Public License from time to time. Such new versions will +be similar in spirit to the present version, but may differ in detail to +address new problems or concerns. + +Each version is given a distinguishing version number. If the Program +specifies a version number of this License which applies to it and "any +later version", you have the option of following the terms and conditions +either of that version or of any later version published by the Free +Software Foundation. If the Program does not specify a version number of +this License, you may choose any version ever published by the Free Software +Foundation. + + 10. If you wish to incorporate parts of the Program into other free +programs whose distribution conditions are different, write to the author +to ask for permission. For software which is copyrighted by the Free +Software Foundation, write to the Free Software Foundation; we sometimes +make exceptions for this. Our decision will be guided by the two goals +of preserving the free status of all derivatives of our free software and +of promoting the sharing and reuse of software generally. + + NO WARRANTY + + 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY +FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN +OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES +PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED +OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS +TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE +PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, +REPAIR OR CORRECTION. + + 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING +WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR +REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, +INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING +OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED +TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY +YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER +PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE +POSSIBILITY OF SUCH DAMAGES. + + END OF TERMS AND CONDITIONS + + How to Apply These Terms to Your New Programs + + If you develop a new program, and you want it to be of the greatest +possible use to the public, the best way to achieve this is to make it +free software which everyone can redistribute and change under these terms. + + To do so, attach the following notices to the program. It is safest +to attach them to the start of each source file to most effectively +convey the exclusion of warranty; and each file should have at least +the "copyright" line and a pointer to where the full notice is found. + + + Copyright (C) + + This program is free software; you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation; either version 2 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along + with this program; if not, write to the Free Software Foundation, Inc., + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. + +Also add information on how to contact you by electronic and paper mail. + +If the program is interactive, make it output a short notice like this +when it starts in an interactive mode: + + Gnomovision version 69, Copyright (C) year name of author + Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. + This is free software, and you are welcome to redistribute it + under certain conditions; type `show c' for details. + +The hypothetical commands `show w' and `show c' should show the appropriate +parts of the General Public License. Of course, the commands you use may +be called something other than `show w' and `show c'; they could even be +mouse-clicks or menu items--whatever suits your program. + +You should also get your employer (if you work as a programmer) or your +school, if any, to sign a "copyright disclaimer" for the program, if +necessary. Here is a sample; alter the names: + + Yoyodyne, Inc., hereby disclaims all copyright interest in the program + `Gnomovision' (which makes passes at compilers) written by James Hacker. + + , 1 April 1989 + Ty Coon, President of Vice + +This General Public License does not permit incorporating your program into +proprietary programs. If your program is a subroutine library, you may +consider it more useful to permit linking proprietary applications with the +library. If this is what you want to do, use the GNU Lesser General +Public License instead of this License. diff --git a/README.md b/README.md new file mode 100644 index 0000000..c25e979 --- /dev/null +++ b/README.md @@ -0,0 +1,113 @@ +# A Hugo theme based on the Drupal zen base theme + +A very popular base theme for Drupal is [Zen](https://www.drupal.org/project/zen) by [JohnAlbin](https://www.drupal.org/u/johnalbin). + +This is a port of that theme for [Hugo :: A fast and modern static website engine](https://gohugo.io/). + + +## Features + +* HTML5 +* Responsive design +* Zen grids +* Normalize CSS +* libSass +* Gulp.js +* Minify css +* jQuery 2 +* Slicknav mobile menu + + +## Installation + +``` +$ cd themes +$ git clone https://github.com/frjo/hugo-theme-zen.git zen +``` + +[Hugo - Installing Hugo](http://gohugo.io/overview/installing/) + + +## config.yaml example + +``` +baseurl: "https://example.org/" +title: "SiteTitle" + +params: + copyright: "This site is licensed under a + [Creative Commons Attribution-ShareAlike 4.0 International License] + (https://creativecommons.org/licenses/by-sa/4.0/)." # Optional + contact: "info@example.org" # Optional + footer: "A [example.org](https://example.org/) production." # Optional + poweredby: true # Optional, show powered by hugo in footer + jquery: true # Optional + slicknav: true # Optional, activates a nice mobile menu. +``` + + +## Shortcodes + +### Clear + +Break float. + +``` +{{% figure src="/images/image.jpg" class="right" %}} + +blablabla # Displayed left of the image. + +{{% clear %}} + +blablabla # Displayed below of the image. +``` + +## Use Gulp to generate css from sass + +Your new Zen theme uses Gulp.js as a task runner, so that it can do many +different tasks automatically: + +* Build your CSS from your Sass using libSass and node-sass. +* Add vendor prefixes for the browsers you want to support using Autoprefixer. +* Build a style guide of your components based on the KSS comments in your Sass +source files. +* Lint your Sass using sass-lint. +* Lint your JavaScript using eslint. +* Minify the css. +* Watch all of your files as you develop and re-build everything on the fly. + +Set up your front-end development build tools: + +1. Install Node.js and npm, the Node.js package manager. + + Detailed instructions are available on the "npm quick start guide": + https://github.com/kss-node/kss-node/wiki/npm-quick-start-guide + +2. The package.json file in your new sub-theme contains the versions of all the +Node.js software you need. To install them run: + + npm install + +3. Install the gulp-cli tool globally. Normally, installing a Node.js globally +is not recommended, which is why both Gulp and Grunt have created wrapper +commands that will allow you to run "gulp" or "grunt" from anywhere, while +using the local version of gulp or grunt that is installed in your project. +To install gulp's global wrapper, run: + + npm install -g gulp-cli + +5. The default gulp task will build your production minified CSS, +build your style guide, and lint your Sass and JavaScript. +To run the default gulp task, type: + + gulp + + To watch all your files as you develop, type: + + gulp watch + + or just type: + + gulp watch:css + + to only watch the css files. diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..8b55354 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,8 @@ +--- +date: "now()" +slug: "" +tags: ["", ""] +title: "" +author: "" + +--- \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..c35e4a3 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,242 @@ +'use strict'; + +var importOnce = require('node-sass-import-once'), + path = require('path'); + +var options = {}; + +// ############################# +// Edit these paths and options. +// ############################# + +// The root paths are used to construct all the other paths in this +// configuration. The "project" root path is where this gulpfile.js is located. +// While Zen distributes this in the theme root folder, you can also put this +// (and the package.json) in your project's root folder and edit the paths +// accordingly. +options.rootPath = { + project : __dirname + '/', + styleGuide : __dirname + '/styleguide/', + theme : __dirname + '/' +}; + +options.theme = { + root : options.rootPath.theme, + css : options.rootPath.theme + 'static/css/', + sass : options.rootPath.theme + 'sass/', + js : options.rootPath.theme + 'static/js/' +}; + +// Define the node-sass configuration. The includePaths is critical! +options.sass = { + importer: importOnce, + includePaths: [ + options.theme.sass, + options.rootPath.project + 'node_modules/breakpoint-sass/stylesheets', + options.rootPath.project + 'node_modules/chroma-sass/sass', + options.rootPath.project + 'node_modules/support-for/sass', + options.rootPath.project + 'node_modules/typey/stylesheets', + options.rootPath.project + 'node_modules/zen-grids/sass' + ], + outputStyle: 'expanded' +}; + +// Define which browsers to add vendor prefixes for. +options.autoprefixer = { + browsers: [ + '> 1%', + 'ie 10' + ] +}; + +// Define the style guide paths and options. +options.styleGuide = { + source: [ + options.theme.sass, + options.theme.css + 'style-guide/' + ], + destination: options.rootPath.styleGuide, + + builder: 'builder/twig', + + // The css and js paths are URLs, like '/misc/jquery.js'. + // The following paths are relative to the generated style guide. + css: [ + path.relative(options.rootPath.styleGuide, options.theme.css + 'styles.css'), + path.relative(options.rootPath.styleGuide, options.theme.css + 'style-guide/chroma-kss-styles.css'), + path.relative(options.rootPath.styleGuide, options.theme.css + 'style-guide/kss-only.css') + ], + js: [ + ], + + homepage: 'homepage.md', + title: 'Hugo Zen Style Guide' +}; + +// Define the paths to the JS files to lint. +options.eslint = { + files : [ + options.theme.js + '**/*.js', + '!' + options.theme.js + '**/*.min.js' + ] +}; + +// If your files are on a network share, you may want to turn on polling for +// Gulp watch. Since polling is less efficient, we disable polling by default. +options.gulpWatchOptions = {interval: 600}; +// options.gulpWatchOptions = {interval: 1000, mode: 'poll'}; + + +// ################################ +// Load Gulp and tools we will use. +// ################################ +var gulp = require('gulp'), + $ = require('gulp-load-plugins')(), + del = require('del'), + // gulp-load-plugins will report "undefined" error unless you load gulp-sass manually. + sass = require('gulp-sass'), + kss = require('kss'), + cleanCSS = require('gulp-clean-css'); + +// The default task. +gulp.task('default', ['build']); + +// ################# +// Build everything. +// ################# +gulp.task('build', ['styles:production', 'styleguide', 'lint']); + +// ########## +// Build CSS. +// ########## +var sassFiles = [ + options.theme.sass + '**/*.scss', + // Do not open Sass partials as they will be included as needed. + '!' + options.theme.sass + '**/_*.scss', + // Chroma markup has its own gulp task. + '!' + options.theme.sass + 'style-guide/kss-example-chroma.scss' +]; + +gulp.task('styles', ['clean:css'], function() { + return gulp.src(sassFiles) + .pipe($.sourcemaps.init()) + .pipe(sass(options.sass).on('error', sass.logError)) + .pipe($.autoprefixer(options.autoprefixer)) + .pipe($.size({showFiles: true})) + .pipe($.sourcemaps.write('./')) + .pipe(gulp.dest(options.theme.css)) +}); + +gulp.task('styles:production', ['clean:css'], function() { + return gulp.src(sassFiles) + .pipe(sass(options.sass).on('error', sass.logError)) + .pipe($.autoprefixer(options.autoprefixer)) + .pipe($.size({showFiles: true})) + .pipe(cleanCSS({compatibility: 'ie10'})) + .pipe(gulp.dest(options.theme.css)); +}); + +// ################## +// Build style guide. +// ################## +gulp.task('styleguide', ['clean:styleguide', 'styleguide:kss-example-chroma'], function() { + return kss(options.styleGuide); +}); + +gulp.task('styleguide:kss-example-chroma', function() { + return gulp.src(options.theme.sass + 'style-guide/kss-example-chroma.scss') + .pipe(sass(options.sass).on('error', sass.logError)) + .pipe($.replace(/(\/\*|\*\/)\n/g, '')) + .pipe($.rename('kss-example-chroma.twig')) + .pipe($.size({showFiles: true})) + .pipe(gulp.dest(options.theme.css + 'style-guide')); +}); + +// Debug the generation of the style guide with the --verbose flag. +gulp.task('styleguide:debug', ['clean:styleguide', 'styleguide:kss-example-chroma'], function() { + options.styleGuide.verbose = true; + return kss(options.styleGuide); +}); + +// ######################### +// Lint Sass and JavaScript. +// ######################### +gulp.task('lint', ['lint:sass', 'lint:js']); + +// Lint JavaScript. +gulp.task('lint:js', function() { + return gulp.src(options.eslint.files) + .pipe($.eslint()) + .pipe($.eslint.format()); +}); + +// Lint JavaScript and throw an error for a CI to catch. +gulp.task('lint:js-with-fail', function() { + return gulp.src(options.eslint.files) + .pipe($.eslint()) + .pipe($.eslint.format()) + .pipe($.eslint.failOnError()); +}); + +// Lint Sass. +gulp.task('lint:sass', function() { + return gulp.src(options.theme.sass + '**/*.scss') + .pipe($.sassLint()) + .pipe($.sassLint.format()); +}); + +// Lint Sass and throw an error for a CI to catch. +gulp.task('lint:sass-with-fail', function() { + return gulp.src(options.theme.sass + '**/*.scss') + .pipe($.sassLint()) + .pipe($.sassLint.format()) + .pipe($.sassLint.failOnError()); +}); + +// ############################## +// Watch for changes and rebuild. +// ############################## +gulp.task('watch', ['watch:lint-and-styleguide', 'watch:js']); + +gulp.task('watch:css', ['styles'], function() { + return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, ['styles']); +}); + +gulp.task('watch:lint-and-styleguide', ['styleguide', 'lint:sass'], function() { + return gulp.watch([ + options.theme.sass + '**/*.scss', + options.theme.sass + '**/*.twig' + ], options.gulpWatchOptions, ['styleguide', 'lint:sass']); +}); + +gulp.task('watch:js', ['lint:js'], function() { + return gulp.watch(options.eslint.files, options.gulpWatchOptions, ['lint:js']); +}); + +// ###################### +// Clean all directories. +// ###################### +gulp.task('clean', ['clean:css', 'clean:styleguide']); + +// Clean style guide files. +gulp.task('clean:styleguide', function() { + // You can use multiple globbing patterns as you would with `gulp.src` + return del([ + options.styleGuide.destination + '*.html', + options.styleGuide.destination + 'public', + options.theme.css + '**/*.twig' + ], {force: true}); +}); + +// Clean CSS files. +gulp.task('clean:css', function() { + return del([ + options.theme.css + '**/*.css', + options.theme.css + '**/*.map' + ], {force: true}); +}); + + +// Resources used to create this gulpfile.js: +// - https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js +// - https://github.com/dlmanning/gulp-sass/blob/master/README.md diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..09e2501 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,33 @@ + + + +{{ block "title" . }}{{ .Site.Title }}{{ end }} + +{{ partial "meta.html" . }} +{{ block "meta" . }}{{ end }} + + + +
+ + +
+{{ block "main" . }}{{ end }} +
+ +
+

{{ with .Site.Params.copyright }}{{ . | markdownify }}{{ else }}© {{ .Site.Title }}{{ end }}

+{{ with .Site.Params.footer }}

{{ . | markdownify }}

{{ end }} +{{ if .Site.Params.poweredby }}

Powered by Hugo

{{ end }} +
+
+{{ if .Site.Params.jquery }}{{ end }} +{{ if and .Site.Params.jquery .Site.Params.slicknav }}{{ end }} +{{ if .Site.Params.jquery }}{{ end }} + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..167d87b --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,20 @@ +{{ define "title" }}{{ if not .IsHome }}{{ .Title }} - {{ .Site.Title }}{{ end }}{{ end }} + +{{ define "main" }} +
+{{ range .Data.Pages }} + +{{ end }} +
+ +{{ partial "menu.html" . }} +{{ partial "sidebar.html" . }} + +{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..5165d9c --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,22 @@ +{{ define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end }} + +{{ define "meta" }} +{{ partial "single_meta.html" . }} +{{ partial "single_json_ld.html" . }} +{{ end }} + +{{ define "main" }} +
+

{{ .Title }}

+
+
+
+
+{{ .Content }} +
+
+
+ +{{ partial "menu.html" . }} +{{ partial "sidebar.html" . }} +{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..a667626 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,14 @@ +{{ define "meta" }} +{{ partial "single_meta.html" . }} +{{ partial "single_json_ld.html" . }} +{{ end }} + +{{ define "main" }} +
+
+{{ .Content }} +
+
+{{ partial "menu.html" . }} +{{ partial "sidebar.html" . }} +{{ end }} diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html new file mode 100644 index 0000000..60b600e --- /dev/null +++ b/layouts/partials/menu.html @@ -0,0 +1,19 @@ +{{ $currentSection := .Section }} +{{ $currentID := .UniqueID }} +
+ +
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html new file mode 100644 index 0000000..6daecde --- /dev/null +++ b/layouts/partials/meta.html @@ -0,0 +1,9 @@ + + + + +{{ .Hugo.Generator }} + + +{{ with .RSSLink }}{{ end }} +{{ with .Site.Params.contact }}{{ end }} diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html new file mode 100644 index 0000000..be5f868 --- /dev/null +++ b/layouts/partials/pagination.html @@ -0,0 +1,11 @@ +{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }} + +{{ end }} diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html new file mode 100644 index 0000000..55cf4c4 --- /dev/null +++ b/layouts/partials/sidebar.html @@ -0,0 +1,14 @@ +{{ $currentSection := .Section }} +{{ $currentID := .UniqueID }} + diff --git a/layouts/partials/single_json_ld.html b/layouts/partials/single_json_ld.html new file mode 100644 index 0000000..aa0c5c1 --- /dev/null +++ b/layouts/partials/single_json_ld.html @@ -0,0 +1,34 @@ + diff --git a/layouts/partials/single_meta.html b/layouts/partials/single_meta.html new file mode 100644 index 0000000..489e281 --- /dev/null +++ b/layouts/partials/single_meta.html @@ -0,0 +1,8 @@ + + + + + + + +{{ with .Params.thumbnail }}{{ end }} diff --git a/layouts/shortcodes/clear.html b/layouts/shortcodes/clear.html new file mode 100644 index 0000000..a9d2c1a --- /dev/null +++ b/layouts/shortcodes/clear.html @@ -0,0 +1 @@ +
diff --git a/package.json b/package.json new file mode 100644 index 0000000..e686a07 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "zen", + "version": "1.0.0", + "description": "The node.js requirements to build this project.", + "main": "gulpfile.js", + "scripts": { + "test": "gulp" + }, + "author": "Fredrik Jonsson", + "license": "GPL-2.0", + "devDependencies": { + "breakpoint-sass": "^2.7.1", + "chroma-sass": "^1.2.6", + "del": "^2.2.2", + "eslint": "^3.17.1", + "gulp": "^3.9.1", + "gulp-autoprefixer": "^3.1.1", + "gulp-clean-css": "^3.0.3", + "gulp-eslint": "^3.0.1", + "gulp-if": "^2.0.2", + "gulp-load-plugins": "^1.5.0", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.5.4", + "gulp-sass": "^3.1.0", + "gulp-sass-lint": "^1.3.2", + "gulp-size": "^2.1.0", + "gulp-sourcemaps": "^2.4.1", + "kss": "^3.0.0-beta.18", + "node-sass-import-once": "^1.2.0", + "sass-lint": "^1.10.2", + "support-for": "^1.0.7", + "typey": "^1.1.1", + "zen-grids": "^2.0.3" + }, + "engines": { + "node": ">=7.0.0" + }, + "private": true +} diff --git a/sass/README.txt b/sass/README.txt new file mode 100644 index 0000000..e1e736e --- /dev/null +++ b/sass/README.txt @@ -0,0 +1,88 @@ +ZEN'S STYLESHEETS +----------------- + +Don't panic! + +There are a lot of files in this Sass folder. A lot. 56, actually. + +I swear to you I'm going to give you a good reason not to panic. Just give me +a minute. (ヘ･_･)ヘ┳━┳ + +Okay, how about just panicking slightly while I collect my thoughts. +(╯°□°）╯︵ ┻━┻ + +Okay. Okay. There _are_ 56 Sass files in this sub-theme, but it's not as bad as +it first seems. + +Why not just one stylesheet? + +- For performance reasons you should always have all of your CSS in a single + file to minimize the number of HTTP requests the user's browser needs to do. + Fortunately, Drupal has a "Aggregate and compress CSS" feature that will + automatically combine all the CSS files from its modules and themes into one + file. You can turn on that feature under "Bandwidth Optimization" on the page: + Administration > Configuration > Development > Performance + So Drupal allows us (if we want) to use more than one stylesheet file, but + still serves all the styles in one file to our users. + +- When developing a site using a single stylesheet, it can become unwieldy to + scroll and find the place you need to edit. As a deadline becomes imminent, + developers often start stuffing new styles at the bottom of the stylesheet, + completely destroying any stylesheet organization. + +- Instead of one monolithic stylesheet, Zen sub-themes' CSS files are organized + into many small stylesheets. Once you learn the organization (described + below) it becomes easier to find the right place to add new styles. + +- All the Sass files are imported into the styles.scss so all the CSS is output + to the styles.css file. + +ORGANIZATION OF STYLESHEETS +--------------------------- + +All of the styles in this sub-theme are built using component-based designs. To +learn more about component-based design, watch the Drupalcon presentation, +"Style Guide Driven Development: All hail the robot overlords!" +https://events.drupal.org/losangeles2015/sessions/style-guide-driven-development-all-hail-robot-overlords + +The Sass files are organized in a simple file hierarchy, and, best of all are +documented in a style guide which is super easy to keep up-to-date. Open the +style guide to learn more about the styles and Sass used in this sub-theme. + +Open the styleguide/index.html file in a web browser. + + +ABOUT SASS +---------- + +This directory includes Sass versions of Zen's CSS files. + +Sass is a language that is just normal CSS plus some extra features, like +variables, nested rules, math, mixins, etc. If your stylesheets are written in +Sass, helper applications can convert them to standard CSS so that you can +include the CSS in the normal ways with your theme. + +To learn more about Sass, visit: http://sass-lang.com + +Since Sass is just a language, we also need an executable that can easily +convert Sass files into CSS. We use node-sass to convert our files to CSS. And +we use Gulp.js to run node-sass and many other useful front-end tasks. + + +DEVELOPING WITH SASS +-------------------- + +To automatically generate the CSS versions of the scss while you are doing theme +development, you'll need to tell Gulp to "watch" the sass directory so that +any time a .scss file is changed it will automatically generate a CSS file in +your sub-theme's css directory: + + gulp watch + + +MOVING YOUR CSS TO PRODUCTION +----------------------------- + +Simple! Generate your CSS with: gulp + +And don't forget to turn on Drupal's CSS aggregation. :-) diff --git a/sass/_init.scss b/sass/_init.scss new file mode 100644 index 0000000..2c8edbd --- /dev/null +++ b/sass/_init.scss @@ -0,0 +1,69 @@ +// Initialization partial +// +// To make it easier to use all variables and mixins in any Sass file in this +// project, each .scss file has a `@import 'init';` declaration. The _init.scss +// file is in charge of importing all the other partials needed for the +// project. +// +// The initialization partial is organized in this way: +// - First we set any shared Sass variables. +// - Next we import Sass modules. +// - Last we define our custom mixins for this project. +// +// Weight: -1 +// +// Style guide: sass.init + + +// The following Sass functions/mixins are required to generate some variables' +// values, so we load them first. +@import 'breakpoint'; +@import 'chroma/functions'; + +@import 'init/colors'; +@import 'init/variables'; + + +// 3rd party libraries +// +// The following sass modules are shared with all .scss files: +// - [Breakpoint](http://breakpoint-sass.com/) +// - [Chroma](https://github.com/JohnAlbin/chroma) +// - [Support-for](https://github.com/JohnAlbin/support-for) +// - [Typey](https://github.com/jptaranto/typey) +// - [Zen Grids](http://zengrids.com/help/) +// +// Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/). +// +// Style guide: sass.modules + +// Add Chroma to manage colors. +@import 'chroma'; +@import 'chroma/kss'; +// Add support-for to manage normalize-scss' browser support. +@import 'support-for'; +// Add typey to manage font sizes and margins. +@import 'typey'; +// Add the Zen Grids responsive layout mixins. +@import 'zen-grids'; + + +// Mixins +// +// Custom mixins used on this site. +// +// Weight: 1 +// +// Style guide: sass.mixins +@import 'init/clearfix/clearfix'; +@import 'init/rtl/rtl'; +@import 'init/visually-hidden/visually-hidden'; + +// Functions +// +// Custom functions used on this site. +// +// Weight: 1 +// +// Style guide: sass.functions +@import 'init/image-url/image-url'; diff --git a/sass/_slicknav.scss b/sass/_slicknav.scss new file mode 100755 index 0000000..c4c86a6 --- /dev/null +++ b/sass/_slicknav.scss @@ -0,0 +1,154 @@ +// sass-lint:disable all + +.slicknav_btn { + position: relative; + display: block; + vertical-align: middle; + float: right; + padding: .438em .625em; + line-height: 1.125em; + cursor: pointer; + margin: 5px; + text-decoration: none; + text-shadow: 0 1px 1px rgba(255, 255, 255, .75); + border-radius: 4px; + background-color: color(nearblack); +} + +.slicknav_menu { + box-sizing: border-box; + background-color: color(header-bg); + padding: 2px; + + &::before, + &::after { + content: ' '; + display: table; + } + + &::after { + clear: both; + } +} + +.slicknav_menutxt { + display: block; + line-height: 1.188em; + float: left; + color: color(text-bg); + font-weight: bold; + text-shadow: 0 1px 3px color(text); +} + +.slicknav_icon { + float: left; + width: 1.125em; + height: .875em; + margin: .188em 0 0 .438em; + + &::before { // Firefox Mobile v42 bugfix + background-color: transparent; + width: 1.125em; + height: .875em; + display: block; + content: ''; + position: absolute; + } +} + +.slicknav_no-text { + margin: 0; +} + +.slicknav_icon-bar { + display: block; + width: 1.125em; + height: .125em; + border-radius: 1px; + box-shadow: 0 1px 0 rgba(0, 0, 0, .25); + background-color: color(text-bg); + + & + .slicknav_icon-bar { + margin-top: .188em; + } +} + +.slicknav_nav { + background-color: color(body-bg); + color: color(link); + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + clear: both; + + ul { + display: block; + list-style: none; + overflow: hidden; + padding: 0; + margin: 0 0 0 20px; + } + + li { + display: block; + } + + a { + display: block; + padding: 5px 10px; + margin: 2px 5px; + text-decoration: none; + color: color(link); + + &:hover { + border-radius: 6px; + background-color: color(nearblack); + color: color(text-bg); + } + } +} + +.slicknav_row { + display: block; + padding: 5px 10px; + margin: 2px 5px; + + &:hover { + border-radius: 6px; + background-color: color(nearblack); + color: color(text-bg); + } +} + +.slicknav_arrow { + margin: 0 0 0 .4em; +} + +.slicknav_txtnode { + margin-left: 15px; +} + +.slicknav_item { + cursor: pointer; + + a { + display: inline; + padding: 0; + margin: 0; + } +} + +.slicknav_parent-link a { + display: inline; + padding: 0; + margin: 0; +} + +.slicknav_brand { + float: left; + color: color(text-bg); + line-height: 30px; + padding: 7px 12px; + height: 44px; +} diff --git a/sass/_zen.scss b/sass/_zen.scss new file mode 100644 index 0000000..6cad56c --- /dev/null +++ b/sass/_zen.scss @@ -0,0 +1,208 @@ +/** + * @file + * Zen custom styles + */ + +/* Zen overrides */ + +p, +pre { + // Set 1 unit of vertical rhythm on the top and bottom margin. + @include margin(.75 0); +} + +/* Apply smaller text to blocks, footer etc. */ + +th, +label, +legend, +figcaption { + @include type-layout(s, 1); + + @include respond-to(xxl) { + @include type-layout(s-2, 1); + } +} + +.footer { + @include type-layout(xs, 1); + + @include respond-to(xxl) { + @include type-layout(xs-2, 1); + } +} + +/* Apply heading font stack to heading, labels etc. */ + +h1, +h2, +h3, +th, +nav, +label, +legend, +article > header, +.header, +.footer { + @include typeface(headings); + color: color(headings); + font-weight: normal; +} + +article, +aside { + ul { + @extend %ul-straight-left; + } + + ol { + @extend %ol-straight-left; + } +} + +figure { + @include respond-to(s) { + display: table; + + &.left { + @include padding(.5 .5 0 0); + margin: 0; + float: left; + clear: both; + + figcaption { + @include padding(0 .5 .5 0); + } + } + + &.right { + @include padding(.5 0 0 .5); + margin: 0; + float: right; + clear: both; + + figcaption { + @include padding(0 0 .5 .5); + } + } + } +} + +figcaption { + @include respond-to(s) { + display: table-caption; + caption-side: bottom; + } + + p { + margin: 0; + } +} + +/* Page */ + +body { + background-color: color(backdrop); +} + +.layout-center { + background-color: color(body-bg); +} + +.header { + padding-top: $zen-gutters / 2; + + @include respond-to(m) { + padding-top: $zen-gutters; + } + + &__logo { + width: 100px; + } +} + +/* Navigation */ + +.main-menu { + @include margin-top(.5); + @include margin-bottom(.5); + outline: 0; + + li { + @include margin-right(.5); + @include margin-bottom(.5); + padding: 0; + } + + a { + display: block; + background-color: color(brand); + color: color(text-bg); + padding: 2px 8px; + text-decoration: none; + + &:hover, + &:focus { + background-color: color(brand-dark); + } + + &:active, + &.active { + background-color: color(brand); + text-decoration: underline; + } + } +} + +.menu a.active { + text-decoration: none; +} + +.footer { + @include margin-top(1.5); + @include padding(.5 0); + text-align: center; + border-top: 2px solid color(brand); + + p { + margin: 0; + } +} + +/* Print. */ + +aside, +nav, +footer { + @extend %print-none; +} + +@media print { + body, + .layout-center { + background-color: color(white); + } + + .layout-swap { + padding-top: 0; + } + + [role='main'] { + width: 100%; + } + + .layout-swap__top { + border-bottom: 0; + } + + /* Zen overrides */ + :link, + :visited { + text-decoration: underline; + } + + a[href]::after { + content: ''; + } + +} diff --git a/sass/base/_fonts.scss b/sass/base/_fonts.scss new file mode 100644 index 0000000..ad03ce7 --- /dev/null +++ b/sass/base/_fonts.scss @@ -0,0 +1,33 @@ +// Font faces +// +// Instead of relying on the fonts that are available on a user's computer, you +// can use web fonts which, like images, are resources downloaded to the user's +// browser. Because of the bandwidth and rendering resources required, web fonts +// should be used with care. +// +// Numerous resources for web fonts can be found on Google. Here are a few +// websites where you can find Open Source fonts to download: +// - http://www.fontsquirrel.com/fontface +// - http://www.theleagueofmoveabletype.com +// +// In order to use these fonts, you will need to convert them into formats +// suitable for web fonts. We recommend the free-to-use Font Squirrel's +// Font-Face Generator: +// http://www.fontsquirrel.com/fontface/generator +// +// The following is an example @font-face declaration. This font can then be +// used in any ruleset using a property like this: font-family: Example, serif; +// +// Since we're using Sass, you'll need to declare your font faces here, then you +// can add them to the font variables in the _init.scss partial. + +// @font-face { +// font-family: 'Example'; +// src: url('../fonts/example.eot'); +// src: url('../fonts/example.eot?iefix') format('eot'), +// url('../fonts/example.woff') format('woff'), +// url('../fonts/example.ttf') format('truetype'), +// url('../fonts/example.svg#webfontOkOndcij') format('svg'); +// font-weight: normal; +// font-style: normal; +// } diff --git a/sass/base/_html5.scss b/sass/base/_html5.scss new file mode 100644 index 0000000..2a1a594 --- /dev/null +++ b/sass/base/_html5.scss @@ -0,0 +1,45 @@ +// HTML5 display definitions +// ========================================================================== + +// Add the correct display in IE <10. +// Add the correct display in Edge, IE, and Firefox for `details` or `summary`. +// Add the correct display in IE for `main`. +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} + +// Add the correct display in IE <10. +audio, +canvas, +progress, +video { + display: inline-block; +} + +// Add the correct display and remove excess height in iOS 4-7. +audio:not([controls]) { + display: none; + height: 0; +} + +// Add the correct vertical alignment in Chrome, Firefox, and Opera. +progress { + vertical-align: baseline; +} + +// Add the correct display in IE <11, Safari <8, and Firefox <22. +template, +[hidden] { + display: none; +} diff --git a/sass/base/_normalize.scss b/sass/base/_normalize.scss new file mode 100644 index 0000000..f078705 --- /dev/null +++ b/sass/base/_normalize.scss @@ -0,0 +1,23 @@ +// Normalize.css is intended to be used as an alternative to CSS resets. +// +// @see http://nicolasgallagher.com/about-normalize-css/ +// +// Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ +// @see http://snook.ca/archives/html_and_css/no_css_reset/ +// +// This directory is a slight fork of this original source: +// - normalize-scss 5.0.3 | MIT/GPLv2 License | bit.ly/normalize-scss + + +// Normalize-scss is broken into modular pieces to make it easier to edit. +@import 'root'; +@import 'html5'; +@import 'links/links'; +@import 'headings/headings'; +@import 'text/text'; +@import 'grouping/grouping'; +@import 'embedded/embedded'; +@import 'tables/tables'; + +// Note: we allow the .button component (loaded by forms) to override :link, by +// loading links first. diff --git a/sass/base/_root.scss b/sass/base/_root.scss new file mode 100644 index 0000000..67f9de2 --- /dev/null +++ b/sass/base/_root.scss @@ -0,0 +1,37 @@ +// sass-lint:disable no-vendor-prefixes + +// Use the saner border-box model for all elements. +* { + box-sizing: border-box; +} + +html { + @include define-type-sizing(); + // Change the default font family in all browsers (opinionated). + @include typeface(body); + // Prevent adjustments of font size after orientation changes in IE and iOS. + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + // On short pages, we want any background gradients to fill the entire height + // of the browser. + min-height: 100%; +} + +body { + // Output a horizontal grid to help with debugging typography. The + // $typey-debug variable will toggle its output. + @include typey-debug-grid(); + // Remove default margin and padding. + margin: 0; + padding: 0; + color: color(text); + background-color: color(text-bg); +} + +@include respond-to(xxl) { + + html { + @include define-type-sizing($base-font-size-2, $base-line-height-2); + } + +} diff --git a/sass/base/embedded/_embedded.scss b/sass/base/embedded/_embedded.scss new file mode 100644 index 0000000..1770466 --- /dev/null +++ b/sass/base/embedded/_embedded.scss @@ -0,0 +1,46 @@ +// Embedded content +// +// Weight: 2 +// +// Style guide: base.embedded + +// Image +// +// An `` element represents an image. +// +// Markup: embedded-img.twig +// +// Style guide: base.embedded.img + +img { + // Remove the border on images inside links in IE <11. + border-style: none; + @if support-for(ie, 7) { + // Improve image quality when scaled in IE 7. + // sass-lint:disable no-vendor-prefixes + -ms-interpolation-mode: bicubic; + } +} + +img, +svg { + // Suppress the space beneath the baseline + // vertical-align: bottom; + + // Responsive images + max-width: 100%; + height: auto; +} + +// Scalable vector +// +// A `` element represents an image encoded as a Scalable Vector Graphic. +// +// Markup: embedded-svg.twig +// +// Style guide: base.embedded.svg + +svg:not(:root) { + // Hide the overflow in IE. + overflow: hidden; +} diff --git a/sass/base/embedded/embedded-img.twig b/sass/base/embedded/embedded-img.twig new file mode 100644 index 0000000..061b49a --- /dev/null +++ b/sass/base/embedded/embedded-img.twig @@ -0,0 +1,6 @@ +

An image that is inline with other text.

+ +
+
An image inside a figure.
+ +
diff --git a/sass/base/embedded/embedded-svg.twig b/sass/base/embedded/embedded-svg.twig new file mode 100644 index 0000000..44b5862 --- /dev/null +++ b/sass/base/embedded/embedded-svg.twig @@ -0,0 +1,8 @@ +

A svg image that is inline with other text.

+ +
+
A svg inside a figure.
+ + + +
diff --git a/sass/base/grouping/_grouping.scss b/sass/base/grouping/_grouping.scss new file mode 100644 index 0000000..1a9628b --- /dev/null +++ b/sass/base/grouping/_grouping.scss @@ -0,0 +1,184 @@ +// Dependencies. +@import 'base/text/text'; +@import 'components/divider/divider'; + +// Grouping content +// +// Weight: 1 +// +// Style guide: base.grouping + + +// Block quotes +// +// The `
` element is for quoting blocks of content from another +// source within your document. Wrap the `
` around any HTML as the quote. For straight +// quotes, we recommend a `

`. +// +// Optionally, add a `