diff --git a/.bowerrc b/.bowerrc new file mode 100755 index 00000000..1b71bee1 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "src/vendor" +} diff --git a/.gitignore b/.gitignore index fdefcb6a..e85a25b3 100644 --- a/.gitignore +++ b/.gitignore @@ -4,30 +4,42 @@ .DS_Store? .Spotlight-V100 .Trashes -ethumbs.db +ehthumbs.db Thumbs.db -/.project -jshint.out.xml -csslint.out.xml -*.orig -*.tmp -*.log -# Node modules for local development -#################################### -front/node_modules +# Vim swap files # +################## +*.swp -# Bower downloaded packages # -############################# -# uncomment once cf-framework is in the public github: -front/vendor +# Python # +################# +*.pyc +*.egg-info/ +__pycache__/ +*.py[cod] + +# Django # +################# +*.egg-info +.installed.cfg + +# Unit test / coverage reports +################# +htmlcov/ +.tox/ +.coverage +.cache +nosetests.xml +coverage.xml + +# Front-End # +############# +node_modules/ +bower_components/ +.grunt/ +src/vendor/ -# Test reports # -################### -front/test/coverage -front/test/junit # Jekyll # ########## -# When running Jekyll locally, it outputs the files into the _site directory -_site \ No newline at end of file +_site/ diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..da5a1781 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,17 @@ +All notable changes to this project will be documented in this file. +We follow the [Semantic Versioning 2.0.0](http://semver.org/) format. + + +## x.y.z - YYYY-MM-DD + +### Added +- Lorem ipsum dolor sit amet + +### Deprecated +- Nothing. + +### Removed +- Nothing. + +### Fixed +- Nothing. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3210766d..61226f18 100755 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,11 +1,32 @@ -## Public domain +# Guidance on how to contribute -The project is in the public domain within the United States, and -copyright and related rights in the work worldwide are waived through -the [CC0 1.0 Universal public domain dedication][CC0]. +> All contributions to this project will be released under the CC0 public domain +> dedication. By submitting a pull request or filing a bug, issue, or +> feature request, you are agreeing to comply with this waiver of copyright interest. +> Details can be found in our [TERMS](TERMS.md) and [LICENCE](LICENSE). -All contributions to this project will be released under the CC0 -dedication. By submitting a pull request, you are agreeing to comply -with this waiver of copyright interest. -[CC0]: http://creativecommons.org/publicdomain/zero/1.0/ \ No newline at end of file +There are two primary ways to help: + - Using the issue tracker, and + - Changing the code-base. + + +## Using the issue tracker + +Use the issue tracker to suggest feature requests, report bugs, and ask questions. +This is also a great way to connect with the developers of the project as well +as others who are interested in this solution. + +Use the issue tracker to find ways to contribute. Find a bug or a feature, mention in +the issue that you will take on that effort, then follow the _Changing the code-base_ +guidance below. + + +## Changing the code-base + +Generally speaking, you should fork this repository, make changes in your +own fork, and then submit a pull-request. All new code should have associated unit +tests that validate implemented features and the presence or lack of defects. +Additionally, the code should follow any stylistic and architectural guidelines +prescribed by the project. In the absence of such guidelines, mimic the styles +and patterns in the existing code-base. diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100755 index 00000000..9dfcc0b2 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,319 @@ +module.exports = function(grunt) { + + 'use strict'; + + require('load-grunt-tasks')(grunt); + require('time-grunt')(grunt); + + var path = require('path'); + var config = { + + /** + * Pull in the package.json file so we can read its metadata. + */ + pkg: grunt.file.readJSON('bower.json'), + + /** + * Set some src and dist location variables. + */ + loc: { + src: 'src', + dist: 'dist' + }, + + /** + * Bower: https://github.com/yatskevich/grunt-bower-task + * + * Set up Bower packages and migrate static assets. + */ + bower: { + cf: { + options: { + targetDir: '<%= loc.src %>/vendor/', + install: false, + verbose: true, + cleanTargetDir: false, + layout: function(type, component) { + if (type === 'img') { + return path.join('../static/img'); + } else if (type === 'fonts') { + return path.join('../static/fonts'); + } else { + return path.join(component); + } + } + } + } + }, + + /** + * Concat: https://github.com/gruntjs/grunt-contrib-concat + * + * Concatenate cf-* Less files prior to compiling them. + */ + concat: { + 'cf-less': { + src: [ + '<%= loc.src %>/vendor/cf-*/*.less', + '!<%= loc.src %>/vendor/cf-core/*.less', + '<%= loc.src %>/vendor/cf-core/cf-core.less' + ], + dest: '<%= loc.src %>/static/css/capital-framework.less', + }, + js: { + src: [ + '<%= loc.src %>/vendor/jquery/jquery.js', + '<%= loc.src %>/vendor/jquery.easing/jquery.easing.js', + '<%= loc.src %>/vendor/cf-*/*.js', + '!<%= loc.src %>/vendor/cf-*/Gruntfile.js', + '<%= loc.src %>/static/js/app.js' + ], + dest: '<%= loc.dist %>/static/js/main.js' + } + }, + + /** + * Less: https://github.com/gruntjs/grunt-contrib-less + * + * Compile Less files to CSS. + */ + less: { + main: { + options: { + // The src/vendor paths are needed to find the CF components' files. + // Feel free to add additional paths to the array passed to `concat`. + paths: grunt.file.expand('src/vendor/*').concat([]) + }, + files: { + '<%= loc.dist %>/static/css/main.css': ['<%= loc.src %>/static/css/main.less'] + } + } + }, + + /** + * Autoprefixer: https://github.com/nDmitry/grunt-autoprefixer + * + * Parse CSS and add vendor-prefixed CSS properties using the Can I Use database. + */ + autoprefixer: { + options: { + // Options we might want to enable in the future. + diff: false, + map: false + }, + main: { + // Prefix `static/css/main.css` and overwrite. + expand: true, + src: ['<%= loc.dist %>/static/css/main.css'] + }, + }, + + /** + * Uglify: https://github.com/gruntjs/grunt-contrib-uglify + * + * Minify JS files. + * Make sure to add any other JS libraries/files you'll be using. + * You can exclude files with the ! pattern. + */ + uglify: { + options: { + preserveComments: 'some', + sourceMap: true + }, + // headScripts: { + // src: 'vendor/html5shiv/html5shiv-printshiv.js', + // dest: 'static/js/html5shiv-printshiv.js' + // }, + js: { + src: ['<%= loc.dist %>/static/js/main.js'], + dest: '<%= loc.dist %>/static/js/main.min.js' + } + }, + + /** + * Banner: https://github.com/mattstyles/grunt-banner + * + * Here's a banner with some template variables. + * We'll be inserting it at the top of minified assets. + */ + banner: + '/*!\n' + + ' * <%= pkg.name %> - v<%= pkg.version %>\n' + + ' * <%= pkg.homepage %>\n' + + ' * Licensed <%= pkg.license %> by <%= pkg.author.name %> <<%= pkg.author.email %>>\n' + + ' */', + + usebanner: { + css: { + options: { + position: 'top', + banner: '<%= banner %>', + linebreak: true + }, + files: { + src: ['<%= loc.dist %>/static/css/*.min.css'] + } + }, + js: { + options: { + position: 'top', + banner: '<%= banner %>', + linebreak: true + }, + files: { + src: ['<%= loc.dist %>/static/js/*.min.js'] + } + } + }, + + /** + * CSS Min: https://github.com/gruntjs/grunt-contrib-cssmin + * + * Compress CSS files. + */ + cssmin: { + main: { + options: { + processImport: false + }, + files: { + '<%= loc.dist %>/static/css/main.min.css': ['<%= loc.dist %>/static/css/main.css'], + } + }, + 'ie-alternate': { + options: { + processImport: false + }, + files: { + '<%= loc.dist %>/static/css/main.ie.min.css': ['<%= loc.dist %>/static/css/main.ie.css'], + } + } + }, + + /** + * Legacssy: https://github.com/robinpokorny/grunt-legacssy + * + * Fix your CSS for legacy browsers. + */ + legacssy: { + 'ie-alternate': { + options: { + // Flatten all media queries with a min-width over 960 or lower. + // All media queries over 960 will be excluded fromt he stylesheet. + // EM calculation: 960 / 16 = 60 + legacyWidth: 60 + }, + files: { + '<%= loc.dist %>/static/css/main.ie.css': '<%= loc.dist %>/static/css/main.css' + } + } + }, + + /** + * Copy: https://github.com/gruntjs/grunt-contrib-copy + * + * Copy files and folders. + */ + copy: { + main: { + files: [ + { + expand: true, + cwd: '<%= loc.src %>', + src: [ + // HTML files + '*.html', + ], + dest: '<%= loc.dist %>' + }, + { + expand: true, + cwd: '<%= loc.src %>/static', + src: [ + // Fonts + 'fonts/*' + ], + dest: '<%= loc.dist %>/static' + }, + { + expand: true, + cwd: '<%= loc.src %>', + src: [ + // Vendor files + 'vendor/html5shiv/html5shiv-printshiv.min.js', + 'vendor/box-sizing-polyfill/boxsizing.htc' + ], + dest: '<%= loc.dist %>/static' + } + ] + } + }, + + /** + * JSHint: https://github.com/gruntjs/grunt-contrib-jshint + * + * Validate files with JSHint. + * Below are options that conform to idiomatic.js standards. + * Feel free to add/remove your favorites: http://www.jshint.com/docs/#options + */ + jshint: { + options: { + camelcase: false, + curly: true, + forin: true, + immed: true, + latedef: true, + newcap: true, + noarg: true, + quotmark: true, + sub: true, + boss: true, + strict: true, + evil: true, + eqnull: true, + browser: true, + plusplus: false, + globals: { + jQuery: true, + $: true, + module: true, + require: true, + define: true, + console: true, + EventEmitter: true + } + }, + all: ['<%= loc.src %>/static/js/app.js'] + }, + + /** + * Watch: https://github.com/gruntjs/grunt-contrib-watch + * + * Run predefined tasks whenever watched file patterns are added, changed or deleted. + * Add files to monitor below. + */ + watch: { + default: { + files: ['Gruntfile.js', '<%= loc.src %>/static/css/**/*.less', '<%= loc.src %>/static/js/**/*.js'], + tasks: ['default'] + } + } + + }; + + /** + * Initialize a configuration object for the current project. + */ + grunt.initConfig(config); + + /** + * Create custom task aliases and combinations. + */ + grunt.registerTask('compile-cf', ['bower:cf', 'concat:cf-less']); + grunt.registerTask('css', ['less', 'autoprefixer', 'legacssy', 'cssmin', 'usebanner:css']); + grunt.registerTask('js', ['concat:js', 'uglify', 'usebanner:js']); + grunt.registerTask('test', ['jshint']); + grunt.registerTask('build', ['test', 'css', 'js', 'copy']); + grunt.registerTask('default', ['build']); + +}; \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..0e259d42 --- /dev/null +++ b/LICENSE @@ -0,0 +1,121 @@ +Creative Commons Legal Code + +CC0 1.0 Universal + + CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE + LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN + ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS + INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES + REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS + PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM + THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED + HEREUNDER. + +Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator +and subsequent owner(s) (each and all, an "owner") of an original work of +authorship and/or a database (each, a "Work"). + +Certain owners wish to permanently relinquish those rights to a Work for +the purpose of contributing to a commons of creative, cultural and +scientific works ("Commons") that the public can reliably and without fear +of later claims of infringement build upon, modify, incorporate in other +works, reuse and redistribute as freely as possible in any form whatsoever +and for any purposes, including without limitation commercial purposes. +These owners may contribute to the Commons to promote the ideal of a free +culture and the further production of creative, cultural and scientific +works, or to gain reputation or greater distribution for their Work in +part through the use and efforts of others. + +For these and/or other purposes and motivations, and without any +expectation of additional consideration or compensation, the person +associating CC0 with a Work (the "Affirmer"), to the extent that he or she +is an owner of Copyright and Related Rights in the Work, voluntarily +elects to apply CC0 to the Work and publicly distribute the Work under its +terms, with knowledge of his or her Copyright and Related Rights in the +Work and the meaning and intended legal effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be +protected by copyright and related or neighboring rights ("Copyright and +Related Rights"). Copyright and Related Rights include, but are not +limited to, the following: + + i. the right to reproduce, adapt, distribute, perform, display, + communicate, and translate a Work; + ii. moral rights retained by the original author(s) and/or performer(s); +iii. publicity and privacy rights pertaining to a person's image or + likeness depicted in a Work; + iv. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(a), below; + v. rights protecting the extraction, dissemination, use and reuse of data + in a Work; + vi. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation + thereof, including any amended or successor version of such + directive); and +vii. other similar, equivalent or corresponding rights throughout the + world based on applicable law or treaty, and any national + implementations thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention +of, applicable law, Affirmer hereby overtly, fully, permanently, +irrevocably and unconditionally waives, abandons, and surrenders all of +Affirmer's Copyright and Related Rights and associated claims and causes +of action, whether now known or unknown (including existing as well as +future claims and causes of action), in the Work (i) in all territories +worldwide, (ii) for the maximum duration provided by applicable law or +treaty (including future time extensions), (iii) in any current or future +medium and for any number of copies, and (iv) for any purpose whatsoever, +including without limitation commercial, advertising or promotional +purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each +member of the public at large and to the detriment of Affirmer's heirs and +successors, fully intending that such Waiver shall not be subject to +revocation, rescission, cancellation, termination, or any other legal or +equitable action to disrupt the quiet enjoyment of the Work by the public +as contemplated by Affirmer's express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason +be judged legally invalid or ineffective under applicable law, then the +Waiver shall be preserved to the maximum extent permitted taking into +account Affirmer's express Statement of Purpose. In addition, to the +extent the Waiver is so judged Affirmer hereby grants to each affected +person a royalty-free, non transferable, non sublicensable, non exclusive, +irrevocable and unconditional license to exercise Affirmer's Copyright and +Related Rights in the Work (i) in all territories worldwide, (ii) for the +maximum duration provided by applicable law or treaty (including future +time extensions), (iii) in any current or future medium and for any number +of copies, and (iv) for any purpose whatsoever, including without +limitation commercial, advertising or promotional purposes (the +"License"). The License shall be deemed effective as of the date CC0 was +applied by Affirmer to the Work. Should any part of the License for any +reason be judged legally invalid or ineffective under applicable law, such +partial invalidity or ineffectiveness shall not invalidate the remainder +of the License, and in such case Affirmer hereby affirms that he or she +will not (i) exercise any of his or her remaining Copyright and Related +Rights in the Work or (ii) assert any associated claims and causes of +action with respect to the Work, in either case contrary to Affirmer's +express Statement of Purpose. + +4. Limitations and Disclaimers. + + a. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + b. Affirmer offers the Work as-is and makes no representations or + warranties of any kind concerning the Work, express, implied, + statutory or otherwise, including without limitation warranties of + title, merchantability, fitness for a particular purpose, non + infringement, or the absence of latent or other defects, accuracy, or + the present or absence of errors, whether or not discoverable, all to + the greatest extent permissible under applicable law. + c. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person's Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the + Work. + d. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to + this CC0 or use of the Work. diff --git a/TERMS.md b/TERMS.md index 89f36323..aa5b2fb4 100755 --- a/TERMS.md +++ b/TERMS.md @@ -1,12 +1,23 @@ -As a work of the United States Government, this package is in the -public domain within the United States. Additionally, we waive -copyright and related rights in the work worldwide through the CC0 1.0 -Universal public domain dedication. +As a work of the United States Government, this package (excluding any +exceptions listed below) is in the public domain within the United States. +Additionally, we waive copyright and related rights in the work worldwide +through the [CC0 1.0 Universal public domain dedication][CC0]. + +Software source code previously released under an open source license and then +modified by CFPB staff or its contractors is considered a "joint work" +(see 17 USC ยง 101); it is partially copyrighted, partially public domain, +and as a whole is protected by the copyrights of the non-government authors and +must be released according to the terms of the original open-source license. +Segments written by CFPB staff, and by contractors who are developing software +on behalf of CFPB are also in the public domain, and copyright and related +rights for that work are waived through the CC0 1.0 Universal dedication. + +For further details, please see the CFPB [Source Code Policy][policy]. + ## CC0 1.0 Universal Summary -This is a human-readable summary of the -[Legal Code (read the full text)](http://creativecommons.org/publicdomain/zero/1.0/legalcode). +This is a human-readable summary of the [Legal Code (read the full text)][CC0]. ### No Copyright @@ -28,4 +39,20 @@ Unless expressly stated otherwise, the person who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. When using or citing the work, you should not imply endorsement by the -author or the affirmer. \ No newline at end of file +author or the affirmer. + +[policy]: https://github.com/cfpb/source-code-policy/ +[CC0]: http://creativecommons.org/publicdomain/zero/1.0/legalcode + + +## Exceptions + +_Source code or other assets that are excluded from the TERMS should be listed +here. These may include dependencies that may be licensed differently or are +not in the public domain._ + + + + + + diff --git a/bower.json b/bower.json new file mode 100755 index 00000000..53297cb0 --- /dev/null +++ b/bower.json @@ -0,0 +1,35 @@ +{ + "name": "design-manual", + "version": "0.1.0", + "description": "A set of design principles and standards for the Consumer Financial Protection Bureau.", + "homepage": "http://cfpb.github.io/design-manual/", + "author": { + "name": "Consumer Financial Protection Bureau", + "email": "tech@cfpb.gov" , + "url": "http://consumerfinance.gov" + }, + "repository": { + "type": "git", + "url": "https://github.com/cfpb/capital-framework.git" + }, + "license": "CC0", + "dependencies": { + }, + "exportsOverride": { + "cf-*": { + "css": "src/**/*.css", + "less": "src/**/*.less", + "fonts": "src/fonts/*.*", + "js": "src/**/*.js" + }, + "box-sizing-polyfill": { + "js": "boxsizing.htc" + }, + "html5shiv": { + "js": "dist/html5shiv-printshiv.min.js" + }, + "jquery.easing": { + "js": "js/jquery.easing.js" + } + } +} diff --git a/package.json b/package.json new file mode 100755 index 00000000..4332daae --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "design-manual", + "version": "0.1.0", + "description": "A set of design principles and standards for the Consumer Financial Protection Bureau.", + "homepage": "http://cfpb.github.io/design-manual/", + "author": { + "name": "Consumer Financial Protection Bureau", + "email": "tech@cfpb.gov" , + "url": "http://consumerfinance.gov" + }, + "license": "CC0", + "keywords": [ + "design-manual" + ], + "devDependencies": { + "grunt": "~0.4.5", + "grunt-autoprefixer": "~2.0.0", + "grunt-banner": "~0.2.3", + "grunt-bower-task": "~0.4.0", + "grunt-concurrent": "~1.0.0", + "grunt-contrib-concat": "~0.5.0", + "grunt-contrib-copy": "~0.7.0", + "grunt-contrib-cssmin": "~0.10.0", + "grunt-contrib-jshint": "~0.10.0", + "grunt-contrib-less": "~0.12.0", + "grunt-contrib-uglify": "^0.6.0", + "grunt-contrib-watch": "~0.6.1", + "grunt-legacssy": "~0.4.0", + "grunt-string-replace": "~1.0.0", + "grunt-topdoc": "~0.3.0", + "load-grunt-tasks": "~1.0.0", + "time-grunt": "~1.0.0" + }, + "scripts": { + "postinstall": "bower install && grunt compile-cf" + } +} diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 00000000..8a1ed9fa Binary files /dev/null and b/screenshot.png differ diff --git a/src/index.html b/src/index.html new file mode 100755 index 00000000..2acd4da7 --- /dev/null +++ b/src/index.html @@ -0,0 +1,486 @@ + + + + + + + + + + + + + + + + + Capital Framework demo page + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ +

+ This demo page contains a small sample from each component. + Refer to the docs for the full set of patterns. +

+ +
+ +
+

CF-Core

+ + + Docs + +
+ +
+

Colors

+

+ + + +

+
+ +
+

Typography base styles

+
+
+
+

Superheader

+
+ Avenir Next Demi
+ 48px / 66px +
+
+

Getting out of debt

+
+
+
+

H1

+
+ Avenir Next Regular
+ 34px / 44px +
+
+

Getting out of debt

+
+
+
+

H2

+
+ Avenir Next Regular
+ 26px / 33px +
+
+

Getting out of debt

+
+
+
+

H3

+
+ Avenir Next Regular
+ 22px / 28px +
+
+

Getting out of debt

+
+
+
+

H4

+
+ Avenir Next Medium
+ 18px / 22px +
+
+

Getting out of debt

+
+
+
+

H5

+
+ Avenir Next Demi
+ 14px / 22px
+ uppercase
+ letter-spacing: 1px +
+
+
Getting out of debt
+
+
+
+

H6

+
+ Avenir Next Demi
+ 12px / 22px
+ uppercase
+ letter-spacing: 1px +
+
+
Getting out of debt
+
+
+
+

Body

+
+ Georgia
+ 16px / 22px
+
+
+

+ Use this tool to compare school data and relevant financial factors to + make a more informed decision for your future. +

+
+
+
+ +
+

Input base styles

+
+

+

+
+
+ +
+ +
+
+

CF-Buttons

+ + + Docs + +
+

Link Button

+
+ +
+
+

CF-Expandables

+ + + Docs + +
+ +
+ +
+
+

CF-Forms

+ + + Docs + +
+
+
+ +
+
+ +
+
+
+ +
+
+

CF-Grid

+ + + Docs + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

CF-Icons

+ + + Docs + +
+
+ + + + + + + + + + + + + + +
+
+ +
+
+

CF-Layout

+ + + Docs + +
+
+
+
+
+

Main content area

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Cum corrupti tempora nam nihil qui mollitia consectetur + corporis nemo culpa dolorum! Laborum at eos deleniti + consequatur itaque officiis debitis quisquam! Provident! +

+
+ +
+
+
+ +
+
+

CF-Pagination

+ + + Docs + +
+ +
+
+ +
+
+

CF-Typography

+ + + Docs + +
+ +
+

+ + Blog summary + +

+

+ + + Watchroom + + +

+
+ + Nov 4, 2013 + + + + Consumer finance + +
+
    +
  • First item
    • +
  • Second item
    • +
  • Third item
    • +
+
+ +
+
+
+
+ + + + + + + + diff --git a/src/static/css/brand-palette.less b/src/static/css/brand-palette.less new file mode 100644 index 00000000..85fa5ffb --- /dev/null +++ b/src/static/css/brand-palette.less @@ -0,0 +1,30 @@ +/* ========================================================================== + Capital Framework + Color variables + ========================================================================== */ + +// Official Palette as of October 29, 2013 (Brand 2.0) + +@green: #2CB34A; +@green-midtone: #ADDC91; +@green-tint: #DBEDD4; + +@white: #FFFFFF; +@black: #101820; +@darkgray: #43484E; + +// Base // 80% Tint // 50% Tint // 20% Tint +@redorange: #D12124; @redorange-80: #DA6750; @redorange-50: #E8A091; @redorange-20: #F6D9D3; +@gold: #FF9E1B; @gold-80: #FFB149; @gold-50: #FFCE8D; @gold-20: #FFECD1; +@neutral: #796E65; @neutral-80: #948B84; @neutral-50: #BCB6B2; @neutral-20: #E4E2E0; +@navy: #002D72; @navy-80: #33578E; @navy-50: #7F96B8; @navy-20: #CCD5E3; +@pacific: #0072CE; @pacific-80: #328ED8; @pacific-50: #7FB8E6; @pacific-20: #CCE3F5; +@teal: #005E5D; @teal-80: #337E7D; @teal-50: #7FAEAE; @teal-20: #CCDFDF; + +@gray: #75787B; @gray-80: #919395; @gray-50: #BABBBD; @gray-20: #E3E4E5; + @gray-10: #F1F2F2; + @gray-5: #F8F8F8; + +// Unofficial or proposed colors + +@dark-redorange: #9C301B; // Needed for active state of destructive action buttons diff --git a/src/static/css/capital-framework.less b/src/static/css/capital-framework.less new file mode 100644 index 00000000..e69de29b diff --git a/src/static/css/cf-theme-overrides.less b/src/static/css/cf-theme-overrides.less new file mode 100755 index 00000000..0b560ce9 --- /dev/null +++ b/src/static/css/cf-theme-overrides.less @@ -0,0 +1,236 @@ +/* ========================================================================== + Capital Framework theme overrides + ========================================================================== */ + + +/* cf-core + ========================================================================== */ + +// Sizing variables + +@base-font-size-px: 16px; +@base-line-height-px: 22px; +@base-line-height: unit(@base-line-height-px / @base-font-size-px); +@mobile-max: 599px; +@tablet-min: 600px; + +// Color variables + +// body +@text: @black; + +// a +@link-text: @pacific; +@link-underline: @pacific; +@link-text-visited: @teal; +@link-underline-visited: @teal; +@link-text-hover: @pacific-50; +@link-underline-hover: @pacific-50; +@link-text-active: @navy; +@link-underline-active: @navy; + +// thead +@thead-text: @white; +@thead-bg: @darkgray; +@td-bg: @gray-5; +@td-bg-alt: @gray-10; + +// input +@input-bg: @white; +@input-border: @gray; +@input-border-focus: @pacific; +@input-placeholder: @gray; + +// .figure__bordered +@figure__bordered: @gray-50; + + +/* cf-buttons + ========================================================================== */ + +// Color variables + +// .btn +@btn-text: @white; +@btn-bg: @pacific; +@btn-bg-hover: @pacific-80; +@btn-bg-active: @navy-80; + +// .btn__secondary +@btn__secondary-text: @white; +@btn__secondary-bg: @gray; +@btn__secondary-bg-hover: @gray-80; +@btn__secondary-bg-active: @darkgray; + +// .btn__warning +@btn__warning-text: @white; +@btn__warning-bg: @redorange; +@btn__warning-bg-hover: @redorange-80; +@btn__warning-bg-active: @dark-redorange; + +// .btn__disabled +@btn__disabled-text: @gray; +@btn__disabled-bg: @gray-20; +@btn__disabled-outline: @gray-20; + +// Sizing variables + +// .btn +@btn-font-size: 14px; +@btn-v-padding: 8px; +@btn-v-padding-modifier-ie: .8; + + +/* cf-expandables + ========================================================================== */ + +// Color variables + +// .expandable +@expandable-focus: @black; + +// .expandable_label +@expandable_label-text: @black; + +// .expandable_link +@expandable_link-text: @pacific; + +// .expandable__padded +@expandable__padded-bg: @gray-10; +@expandable__padded-bg-hover: @gray-20; +@expandable__padded-divider: @gray-50; + +// .expandable-group +@expandable-group_header-text: @gray; +@expandable-group_header-bg: @gray-10; +@expandable-group-bg: @white; +@expandable-group-divider: @gray-80; + +// Sizing variables + +// .expandable_link +@expandable_link-font-size: @btn-font-size; + + +/* cf-forms + ========================================================================== */ + +// Color variables + +// .error +@input-error: @redorange; + +// .success +@input-success: @green; + +// Sizing variables + +// .input__super +@input__super-font-size: @super-btn-font-size; + + +/* cf-grid + ========================================================================== */ + +@grid_box-sizing-polyfill-path: '/static/vendor/box-sizing-polyfill'; +@grid_wrapper-width: 1200px; +@grid_gutter-width: 30px; +@grid_total-columns: 12; +@grid_debug: false; + + +/* cf-icons + ========================================================================== */ + +@cf-icon-prefix: cf-icon; +@cf-icon-path: '../fonts'; +@cf-icon-ie7-support: true; + + +/* cf-layout + ========================================================================== */ + +// Color variables + +// .block +@block__border-top: @gray-50; +@block__border-bottom: @gray-50; +@block__bg: @gray-10; + +// .content_main +@content_main-border: @gray-50; + +// .content_sidebar +@content_sidebar-bg: @gray-10; +@content_sidebar-border: @gray-50; + +// .content_bar +@content_bar: @green; + +// .content_line +@content_line: @gray-50; + +// .grid_column__top-divider +@grid_column__top-divider: @gray-50; + +// .grid_column__top-divider +@grid_column__left-divider: @gray-50; + + +/* cf-pagination + ========================================================================== */ + +// Color variables + +@pagination-text: @gray; +@pagination-bg: @gray-20; + +// Sizing variables + +@pagination-font-size: 16px; +@pagination-bp: 640px; + + +/* cf-typography + ========================================================================== */ + +// Color variables + +// .pull-quote +@pull-quote_body: @black; +@pull-quote_citation: @gray; + +// .micro-copy +@micro-copy-text: @gray; + +// .date +@date-text: @gray; + +// .category-slug +@category-slug-text: @black; +@category-slug-hover: @link-text-hover; + +// .header-slug +@header-slug-thin-border: @gray-20; +@header-slug-thick-border: @green; + +// .padded-header +@padded-header-text: @darkgray; +@padded-header-bg: @gray-10; +@padded-header-border: @gray-50; + +// .fancy-slug +@fancy-slug-text: @black; +@fancy-slug-bg: @white; +@fancy-slug-border: @gray-50; + +// .meta-header +@meta-header-border: @gray-50; + +// .jump-link +@jump-link__bg: @gray-10; +@jump-link__bg-border: @gray-20; + +// .list__branded +@list__branded-bullet: @green; + diff --git a/src/static/css/main.less b/src/static/css/main.less new file mode 100755 index 00000000..4ee8fdd4 --- /dev/null +++ b/src/static/css/main.less @@ -0,0 +1,112 @@ +/* ========================================================================== + design-manual + ========================================================================== */ + +// This is your project's main Less file. +// Project-specific Less rules go after the imports. + +// Import Normalize, a Capital Framework dependency and an all-around best practice. +@import (less) "../../vendor/normalize-css/normalize.css"; +@import (less) "../../vendor/normalize-legacy-addon/normalize-legacy-addon.css"; + +// Import the combined Capital Framework component file that was created by `grunt compile-cf`. +@import (less) "capital-framework.less"; + +// Import the brand color palette. +@import (less) "brand-palette.less"; + +// Override the Capital Framework theme variables with colors from the brand color palette. +@import (less) "cf-theme-overrides.less"; + +// We've generated some sample rules for you. They're used with the index.html file. +// Please delete them before starting your project. + +.intro-message { + padding: 1em; + background: @expandable__padded-bg; + .webfont-medium(); +} + +.feature-header { + display: inline-block; + padding-bottom: unit(10px / @base-font-size-px, em); + margin-bottom: unit(30px / @base-font-size-px, em); + border-bottom: 4px solid @content_bar; + + &_name { + display: inline-block; + margin: 0; + line-height: 1; + } + &_docs { + display: inline-block; + vertical-align: top; + .webfont-regular(); + } + &_name + &_docs { + margin-left: 1em; + } +} + +.color-demo { + .grid_column( 4 ); + height: 30px; +} + +.color-demo__btn-bg { + background-color: @btn-bg; +} + +.color-demo__btn-secondary-bg { + background-color: @btn__secondary-bg; +} + +.color-demo__btn-disabled-bg { + background-color: @btn__disabled-bg; +} + +.sample-grid { + .grid_nested-col-group(); +} + +.sample-grid_col:before { + content: ""; + display: block; + width: 100%; + height: 1em; + background: @btn-bg; +} + +.sample-grid_col-1 { + .grid_column( 1 ); +} + +.sample-grid_col-3 { + .grid_column( 3 ); +} + +.sample-grid_col-4 { + .grid_column( 4 ); +} + +.sample-grid_col-6 { + .grid_column( 6 ); +} + +.typography-demo { + &_item { + .u-clearfix(); + } + &_item-header { + float: left; + width: unit(200px / @base-font-size-px, em); + margin-right: @grid_gutter-width; + text-align: right; + } + .spec { + .webfont-regular(); + color: #75787B; + font-size: 0.875em; + } +} + diff --git a/src/static/js/app.js b/src/static/js/app.js new file mode 100755 index 00000000..2f647cce --- /dev/null +++ b/src/static/js/app.js @@ -0,0 +1,9 @@ +// Count all features included in the test page. +$('.feature-list').append( + '
' + + '

jQuery

' + + '

jQuery is working and counts a total of ' + + '' + $('.feature-list_item').size() + ' ' + + 'cf-components.

' + + '
' +);