├── .github └── workflows │ ├── deploy.yml │ └── version_health.yml ├── .gitignore ├── .npmignore ├── .rubocop.yml ├── .ruby-version ├── CHANGELOG.md ├── CONTRIBUTING.md ├── Gemfile ├── Gemfile.lock ├── LICENSE.md ├── README.md ├── Rakefile ├── bower.json ├── dist └── css │ ├── vital.css │ ├── vital.css.map │ ├── vital.min.css │ └── vital.min.css.map ├── docs ├── .gitignore ├── CNAME ├── Gemfile ├── Gemfile.lock ├── Makefile ├── Rakefile ├── components.html.slim ├── config.rb ├── config.ru ├── data │ └── site.yml ├── get-started.html.slim ├── images │ ├── apple-touch-icon-120x120.png │ ├── apple-touch-icon-152x152.png │ ├── apple-touch-icon-180x180.png │ ├── apple-touch-icon-60x60.png │ ├── apple-touch-icon-76x76.png │ ├── avatar.png │ ├── demo │ │ ├── chart.svg │ │ ├── code.svg │ │ ├── devices.svg │ │ ├── expand.svg │ │ ├── feather.svg │ │ ├── hammer.svg │ │ ├── open-source.svg │ │ └── spring.svg │ ├── favicon.ico │ ├── icons │ │ ├── icon-arrow-updown.svg │ │ ├── icon-check.svg │ │ ├── icon-clock.svg │ │ ├── icon-close-empty.svg │ │ ├── icon-close-outline.svg │ │ ├── icon-close.svg │ │ ├── icon-menu.svg │ │ └── icon-vital.svg │ ├── logo.svg │ └── opengraph.jpg ├── index.html.slim ├── layouts.html.slim ├── layouts │ ├── _lazyload.html.slim │ ├── footer.html.slim │ ├── header.html.slim │ └── layout.html.slim └── stylesheets │ ├── demo.css.sass │ └── vital.css.sass ├── icons ├── icon-arrow-updown.svg ├── icon-check.svg ├── icon-clock.svg ├── icon-close-empty.svg ├── icon-close-outline.svg ├── icon-close.svg ├── icon-menu.svg └── icon-vital.svg ├── index.js ├── lib ├── vital.rb └── vital │ ├── engine.rb │ └── version.rb ├── package.json ├── releases ├── v1.0.0 │ ├── fonts │ │ ├── icons.eot │ │ ├── icons.svg │ │ ├── icons.ttf │ │ └── icons.woff │ └── stylesheets │ │ └── vital.min.css ├── v1.0.1 │ ├── fonts │ │ ├── icons.eot │ │ ├── icons.svg │ │ ├── icons.ttf │ │ └── icons.woff │ └── stylesheets │ │ └── vital.min.css └── v1.1.0 │ ├── fonts │ ├── icons.eot │ ├── icons.svg │ ├── icons.ttf │ └── icons.woff │ └── stylesheets │ └── vital.min.css ├── sass ├── vital.css.sass ├── vital.sass └── vital │ ├── _all.sass │ ├── _base.sass │ ├── _buttons.sass │ ├── _custom.sass │ ├── _footer.sass │ ├── _forms.sass │ ├── _grid.sass │ ├── _header.sass │ ├── _helpers.sass │ ├── _heroes.sass │ ├── _icons.sass │ ├── _loaders.sass │ ├── _mixins.sass │ ├── _normalize.sass │ ├── _notice.sass │ ├── _pagination.sass │ ├── _syntax.sass │ ├── _tables.sass │ ├── _tabs.sass │ ├── _variables.sass │ └── layouts │ ├── _background_cards.sass │ ├── _bordered_lists.sass │ ├── _feed_cards.sass │ └── _photo_collages.sass └── vital.gemspec /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy VitalCSS docs website to S3 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | paths: 8 | - "docs/**" 9 | 10 | jobs: 11 | docs_deploy_s3: 12 | runs-on: prod-k8s-runners 13 | permissions: 14 | id-token: write 15 | contents: read 16 | defaults: 17 | run: 18 | working-directory: docs 19 | 20 | steps: 21 | - uses: actions/checkout@v3 22 | 23 | - uses: ruby/setup-ruby@v1 24 | with: 25 | ruby-version: 2.4.2 26 | working-directory: docs 27 | bundler-cache: true 28 | 29 | - name: Middleman build 30 | run: make build 31 | 32 | - name: Setup AWS credentials 33 | uses: aws-actions/configure-aws-credentials@v2 34 | with: 35 | aws-region: us-east-1 36 | role-to-assume: ${{ secrets.VITALCSS_AWS_DEPLOY_ROLE }} 37 | 38 | - name: Publish docs website to S3 39 | env: 40 | VITALCSS_DIST_ID: ${{ secrets.VITALCSS_DIST_ID }} 41 | run: make publish 42 | -------------------------------------------------------------------------------- /.github/workflows/version_health.yml: -------------------------------------------------------------------------------- 1 | name: "Version Health Report" 2 | 3 | on: 4 | pull_request: 5 | types: [opened, synchronize] 6 | schedule: 7 | - cron: '37 13 * * 1-5' 8 | 9 | permissions: 10 | contents: read 11 | pull-requests: write 12 | issues: write 13 | checks: write 14 | 15 | jobs: 16 | version_health: 17 | uses: doximity/dox-gh-shared-workflows/.github/workflows/version_health.yml@master 18 | with: 19 | primary_branch: ${{github.event.repository.default_branch}} 20 | secrets: inherit 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | /dist/**/*.md 11 | /dist/**/*.sass 12 | /dist/**/*.scss 13 | /pkg 14 | vital-*.tar.gz 15 | 16 | # Ignore the build directory 17 | /build 18 | 19 | # Ignore cache 20 | .sass-cache/ 21 | .cache/ 22 | 23 | # Ignore .DS_store file 24 | .DS_Store 25 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | **/.* 2 | *.gemspec 3 | Gemfile* 4 | Rakefile 5 | node_modules 6 | bower_components 7 | test 8 | tests 9 | build 10 | pkg 11 | previews 12 | docs 13 | icons 14 | lib 15 | releases 16 | -------------------------------------------------------------------------------- /.rubocop.yml: -------------------------------------------------------------------------------- 1 | inherit_gem: 2 | dox-style: 3 | - .rubocop.yml 4 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.4.2 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | _Post v1.1.0 releases changelog can be found on https://github.com/doximity/vital/releases_ 2 | 3 | v2.2.1 4 | - Fix an issue that caused the `range` input to be misaligned. 5 | 6 | v2.2.0 7 | - Add webpack convenience property to allow: `require('vital-css').includePaths` 8 | 9 | v2.1.1 10 | - Fix an issue that caused the mobile menu close icon not to show up. 11 | - Update the README.md. 12 | 13 | v2.1.0 14 | - Remove `i.` font icon targeting from `_notice.sass` and refactor for use with an image tag 15 | - Updated documentation with markup for notice bar 16 | - Normalized, minified and resized all SVGs 17 | - Updated documentation to reflect smaller size of Vital: 23KB 18 | 19 | v2.0.0 20 | - Remove fontcustom and font icon dependencies in favor of SVG 21 | - Remove support for IE8/IE9 22 | - Remove default font weight for some tags 23 | - Multiplier classes`.i2x`, `.i3x`, `.i4x`, `.i5x` renamed to: `.x2`, `.x3`, `.x4`, `.x5` 24 | - Added default opacity classes 25 | - Added background variables 26 | - Added `_mixins` 27 | - Added text anti-aliasing is enabled by default 28 | - Added `/layouts` to documentation website 29 | - Revamped documentation 30 | 31 | v1.1.0 32 | - Add command: `rake vital:compile_fonts` 33 | - `icons` partial is now a `.sass` file 34 | - The need to manually rename `url` to `font-url` in `icons` partial is no longer required 35 | - Remove the need to install the fontcustom gem manually 36 | - Updated the font input and output paths 37 | - Fix a typo 38 | - Add `!default` to variables 39 | 40 | v1.0.1 41 | - Scope the nav to `.header` class 42 | - Fix incorrect naming of a breakpoint 43 | - Whitespace consistency changes in `_variables` 44 | 45 | v1.0.0 46 | - Initial release 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Doximity 2 | 3 | We welcome contributions to this repository. Feel free to submit issues for bugs you encounter and pull requests for code and documentation contributions. 4 | In order to prevent licensing issues, Doximity Inc. (“Doximity”, “we”, “us”) requires all contributors to agree to an Individual Contributor License Agreement (“CLA”), which is reproduced below. By submitting your contributions to us, you agree that you have read and are bound by the CLA. If you do not agree with the CLA, you may not submit contributions. 5 | 6 | ## Doximity Individual Contributor License Agreement 7 | 8 | This license is for your protection as a Contributor as well as the protection of Doximity; it does not change your rights to use your own Contributions for any other purpose. 9 | 10 | You accept and agree to the following terms and conditions for Your present and future Contributions submitted to Doximity. Except for the license granted herein to Doximity and recipients of software distributed by Doximity, You reserve all right, titles, and interests in and to Your Contributions. 11 | 12 | ### Definitions 13 | 14 | "You" (or "Your" or the “Contributor”) shall mean the copyright owner or legal entity authorized by the copyright owner that is making this Agreement with Doximity. For legal entities, the entity making a Contribution and all other entities that control, are controlled by, or are under common control with that entity are considered to be a single Contributor. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. 15 | 16 | 1. "Contribution" shall mean the code, documentation, or any original work of authorship, including any modifications or additions to an existing work, that is intentionally submitted by You to Doximity for inclusion in, or documentation of, any of the products owned or managed by Doximity (the "Work"). For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to Doximity or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, Doximity for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by You as "Not a Contribution." 17 | 18 | 2. Grant of Copyright License. Subject to the terms and conditions of this Agreement, You hereby grant to Doximity and to recipients of software distributed by Doximity a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, sublicense, and distribute Your Contributions and such derivative works. 19 | 20 | 3. Grant of Patent License. Subject to the terms and conditions of this Agreement, You hereby grant to Doximity and to recipients of software distributed by Doximity a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by You that are necessarily infringed by Your Contribution(s) alone or by a combination of Your Contribution(s) with the Work to which such Contribution(s) was submitted. If any entity institutes patent litigation against You or any other entity (including a cross-claim or counterclaim in a lawsuit) alleging that your Contribution, or the Work to which you have contributed, constitutes a direct or contributory patent infringement, then any patent licenses granted to that entity under this Agreement for that Contribution or Work shall terminate as of the date such litigation is filed. 21 | 22 | 4. You represent that You are legally entitled to grant the above license. If your employer(s) has rights to intellectual property that you create that includes your Contributions, you represent that you have received permission to make Contributions on behalf of that employer, that your employer has waived such rights for your Contributions to Doximity, or that your employer has executed a separate Corporate CLA with Doximity. 23 | 24 | 5. You represent that each of Your Contributions is Your original creation (see section 7 for submissions on behalf of others). You represent that Your Contribution submissions include complete details of any third-party license or other restriction (including, but not limited to, related patents and trademarks) of which you are personally aware and which are associated with any part of Your Contributions. 25 | 26 | 6. You are not expected to provide support for Your Contributions, except to the extent You desire to provide support. You may provide support for free, for a fee, or not at all. Unless required by applicable law or agreed to in writing, You provide Your Contributions on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. 27 | 28 | 7. Should You wish to submit work that is not Your original creation, You may submit it to Doximity separately from any Contribution, identifying the complete details of its source and of any license or other restriction (including, but not limited to, related patents, trademarks, and license agreements) of which you are personally aware, and conspicuously marking the work as "Submitted on behalf of a third-party: [named here]". 29 | 30 | 8. You agree to notify Doximity of any facts or circumstances of which you become aware that would make these representations inaccurate in any respect. 31 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # Specify your gem's dependencies in vital.gemspec 2 | gemspec 3 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | PATH 2 | remote: . 3 | specs: 4 | vital (2.2.1) 5 | sass (>= 3.4) 6 | 7 | GEM 8 | specs: 9 | ast (2.4.0) 10 | dox-style (1.0.23) 11 | rubocop (~> 0.56) 12 | ffi (1.9.25) 13 | jaro_winkler (1.5.1-x86_64-darwin-17) 14 | parallel (1.12.1) 15 | parser (2.5.1.2) 16 | ast (~> 2.4.0) 17 | powerpack (0.1.2) 18 | rainbow (3.0.0) 19 | rake (10.5.0) 20 | rb-fsevent (0.10.3) 21 | rb-inotify (0.9.10) 22 | ffi (>= 0.5.0, < 2) 23 | rubocop (0.58.1) 24 | jaro_winkler (~> 1.5.1) 25 | parallel (~> 1.10) 26 | parser (>= 2.5, != 2.5.1.1) 27 | powerpack (~> 0.1) 28 | rainbow (>= 2.2.2, < 4.0) 29 | ruby-progressbar (~> 1.7) 30 | unicode-display_width (~> 1.0, >= 1.0.1) 31 | ruby-progressbar (1.9.0) 32 | sass (3.5.7) 33 | sass-listen (~> 4.0.0) 34 | sass-listen (4.0.0) 35 | rb-fsevent (~> 0.9, >= 0.9.4) 36 | rb-inotify (~> 0.9, >= 0.9.7) 37 | unicode-display_width (1.4.0) 38 | 39 | PLATFORMS 40 | ruby 41 | 42 | DEPENDENCIES 43 | bundler (~> 1.11) 44 | dox-style (~> 1.0.16) 45 | rake (~> 10.0) 46 | vital! 47 | 48 | BUNDLED WITH 49 | 1.16.2 50 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Copyright 2015 Doximity, Inc. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **Note:** Vital v2.x is not backwards compatible with v1.x. Some things may break. You may need to do some refactoring. 2 | # Vital 3 | 4 | A minimally invasive CSS framework for modern web applications. 5 | 6 | - Vital is a reverse approach to "everything and the kitchen sink" CSS frameworks. 7 | - Built with Sass and Slim for readability and maintainability. 8 | - No ridiculous amounts of classes or nesting. No excessively buried code. 9 | - Written almost entirely in em values, allowing for easy and consistent scaling. 10 | - Small: 11 | 12 | | | Size | Gzipped | 13 | |:---------------|:------|:--------| 14 | | Javascripts | 0 | | 15 | | Vital CSS | 23 KB | 6 KB | 16 | 17 | ## Usage 18 | 19 | A couple installation options are available: 20 | 21 | - Download the latest release tarball from https://github.com/doximity/vital/releases. 22 | - Install the `vital` RubyGem, NPM or Bower package on your project. 23 | - Use a precompiled release from RawGit. 24 | 25 | Check out [our docs](http://vitalcss.com/get-started/) for information on installation methods, framework contents, templates, examples and more. 26 | 27 | ## Development 28 | 29 | **NOTE**: The project requires Ruby 2.0+ for building its assets and documentation. 30 | 31 | Initial setup: 32 | 33 | ```sh 34 | git clone https://github.com/doximity/vital.git 35 | cd vital 36 | bundle 37 | 38 | # If you want to build / work on documentation 39 | cd docs 40 | bundle 41 | ``` 42 | 43 | ### Compiling assets locally 44 | 45 | ```sh 46 | cd vital 47 | bundle exec rake vital:build 48 | ``` 49 | 50 | ### Build the documentation 51 | 52 | Vital is built using a simple static generator: https://middlemanapp.com/ 53 | 54 | ```sh 55 | cd vital/docs 56 | bundle 57 | bundle exec middleman 58 | ``` 59 | 60 | ## Publishing 61 | 62 | Publishing and deployment should be performed by a Doximity member. 63 | 64 | ## Contributing 65 | 66 | See [CONTRIBUTING.md](./CONTRIBUTING.md) 67 | 68 | ## Releasing a new version 69 | 70 | - Ensure docs, `README.md`, `CHANGELOG.md` are up to date 71 | - Bump version on `lib/vital/version.rb` 72 | - Bump version on `package.json#L3` 73 | - `bundle exec rake vital:build` 74 | - `bundle`, commit and push the `Gemfile.lock` file 75 | - `git add ...` all of the updated files 76 | - `git commit -m 'vX.Y.Z'` 77 | - Create a branch, get it approved, merge the branch and checkout `master` 78 | - `bundle exec rake release` to push to RubyGems 79 | - `npm publish` to push to NPM 80 | - Go to https://github.com/doximity/vital/releases and create a new release with the tarball attached 81 | - In Slack, run `doxbot ship vital` to deploy documentation site 82 | - Visit http://vitalcss.s3-website-us-east-1.amazonaws.com and http://vitalcss.com and ensure it has been updated 83 | 84 | ## Reporting Issues and Suggestions 85 | 86 | Please submit GitHub issues for problems with the library. Also, feel free to submit a pull-request with suggested changes. 87 | 88 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require 'bundler/gem_tasks' 2 | 3 | namespace :vital do 4 | desc 'Build stylesheets and prepare for a release' 5 | task :build do 6 | puts '-----> Preparing assets for release' 7 | release_dir = "dist" 8 | [ 9 | "rm -rf #{release_dir}", 10 | "mkdir -p #{release_dir}/{css,scss}", 11 | "cp {CHANGELOG,LICENSE,README}.md #{release_dir}/", 12 | "cp -R sass #{release_dir}/", 13 | "rm -f #{release_dir}/{,**/}.DS_Store" 14 | ].each { |cmd| sh cmd } 15 | 16 | sh "bundle exec sass -r vital -C #{release_dir}/sass/vital.css.sass #{release_dir}/css/vital.css" 17 | sh "bundle exec sass -r vital -C -t compressed #{release_dir}/sass/vital.css.sass #{release_dir}/css/vital.min.css" 18 | sh "sass-convert -R -F sass -T scss -C #{release_dir}/sass #{release_dir}/scss" 19 | 20 | require_relative 'lib/vital/version' 21 | puts '-----> Compressing' 22 | sh "tar cvzfs vital-v#{Vital::VERSION}.tar.gz '/dist/vital-v#{Vital::VERSION}/' dist/" 23 | end 24 | 25 | end 26 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vital", 3 | "homepage": "http://vitalcss.com", 4 | "authors": [ 5 | "Body Taing ", 6 | "Fabio Rehm " 7 | ], 8 | "description": "A minimally invasive CSS framework for modern web applications.", 9 | "main": [ 10 | "sass/vital.sass" 11 | ], 12 | "license": "Apache-2.0", 13 | "ignore": [ 14 | "**/.*", 15 | "*.gemspec", 16 | "Gemfile*", 17 | "Rakefile", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests", 22 | "build", 23 | "pkg", 24 | "previews", 25 | "docs", 26 | "icons", 27 | "lib", 28 | "releases" 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile ~/.gitignore_global 6 | 7 | # Ignore bundler config 8 | /.bundle 9 | 10 | # Ignore the build directory 11 | /build 12 | 13 | # Ignore cache 14 | .sass-cache/ 15 | .cache/ 16 | 17 | # Ignore .DS_store file 18 | .DS_Store 19 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | vitalcss.com 2 | -------------------------------------------------------------------------------- /docs/Gemfile: -------------------------------------------------------------------------------- 1 | # If you do not have OpenSSL installed, change 2 | # the following line to use 'http://' 3 | source 'https://rubygems.org' 4 | 5 | # For faster file watcher updates on Windows: 6 | gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw] 7 | 8 | # Windows does not come with time zone data 9 | gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby] 10 | 11 | # Middleman Gems 12 | gem 'middleman', '4.2.1' 13 | gem 'middleman-livereload' 14 | gem 'middleman-minify-html' 15 | gem 'middleman-syntax' 16 | gem 'middleman-meta-tags' 17 | gem 'middleman-robots' 18 | gem 'middleman-search_engine_sitemap' 19 | gem 'middleman-gh-pages' 20 | gem 'slim' 21 | gem 'sass' 22 | gem 'coffee-script' 23 | gem 'vital', path: '../' 24 | -------------------------------------------------------------------------------- /docs/Gemfile.lock: -------------------------------------------------------------------------------- 1 | PATH 2 | remote: .. 3 | specs: 4 | vital (2.2.1) 5 | sass (>= 3.4) 6 | 7 | GEM 8 | remote: https://rubygems.org/ 9 | specs: 10 | activesupport (5.0.7) 11 | concurrent-ruby (~> 1.0, >= 1.0.2) 12 | i18n (>= 0.7, < 2) 13 | minitest (~> 5.1) 14 | tzinfo (~> 1.1) 15 | addressable (2.5.2) 16 | public_suffix (>= 2.0.2, < 4.0) 17 | backports (3.11.4) 18 | builder (3.2.2) 19 | coffee-script (2.4.1) 20 | coffee-script-source 21 | execjs 22 | coffee-script-source (1.12.2) 23 | compass-import-once (1.0.5) 24 | sass (>= 3.2, < 3.5) 25 | concurrent-ruby (1.1.3) 26 | contracts (0.13.0) 27 | dotenv (2.5.0) 28 | em-websocket (0.5.1) 29 | eventmachine (>= 0.12.9) 30 | http_parser.rb (~> 0.6.0) 31 | erubis (2.7.0) 32 | eventmachine (1.2.0.1) 33 | execjs (2.7.0) 34 | fast_blank (1.0.0) 35 | fastimage (2.1.4) 36 | ffi (1.9.25) 37 | haml (4.0.7) 38 | tilt 39 | hamster (3.0.0) 40 | concurrent-ruby (~> 1.0) 41 | hashie (3.6.0) 42 | htmlcompressor (0.2.0) 43 | http_parser.rb (0.6.0) 44 | i18n (0.7.0) 45 | kramdown (1.17.0) 46 | listen (3.0.8) 47 | rb-fsevent (~> 0.9, >= 0.9.4) 48 | rb-inotify (~> 0.9, >= 0.9.7) 49 | memoist (0.16.0) 50 | middleman (4.2.1) 51 | coffee-script (~> 2.2) 52 | compass-import-once (= 1.0.5) 53 | haml (>= 4.0.5) 54 | kramdown (~> 1.2) 55 | middleman-cli (= 4.2.1) 56 | middleman-core (= 4.2.1) 57 | sass (>= 3.4.0, < 4.0) 58 | middleman-cli (4.2.1) 59 | thor (>= 0.17.0, < 2.0) 60 | middleman-core (4.2.1) 61 | activesupport (>= 4.2, < 5.1) 62 | addressable (~> 2.3) 63 | backports (~> 3.6) 64 | bundler (~> 1.1) 65 | contracts (~> 0.13.0) 66 | dotenv 67 | erubis 68 | execjs (~> 2.0) 69 | fast_blank 70 | fastimage (~> 2.0) 71 | hamster (~> 3.0) 72 | hashie (~> 3.4) 73 | i18n (~> 0.7.0) 74 | listen (~> 3.0.0) 75 | memoist (~> 0.14) 76 | padrino-helpers (~> 0.13.0) 77 | parallel 78 | rack (>= 1.4.5, < 3) 79 | sass (>= 3.4) 80 | servolux 81 | tilt (~> 2.0) 82 | uglifier (~> 3.0) 83 | middleman-gh-pages (0.3.1) 84 | rake (> 0.9.3) 85 | middleman-livereload (3.4.6) 86 | em-websocket (~> 0.5.1) 87 | middleman-core (>= 3.3) 88 | rack-livereload (~> 0.3.15) 89 | middleman-meta-tags (0.2.0) 90 | middleman-core (>= 3.0.0) 91 | middleman-minify-html (3.4.1) 92 | htmlcompressor (~> 0.2.0) 93 | middleman-core (>= 3.2) 94 | middleman-robots (1.2.1) 95 | middleman (>= 4.0) 96 | middleman-search_engine_sitemap (1.4.0) 97 | builder 98 | middleman-core (~> 4.0) 99 | middleman-syntax (2.1.0) 100 | middleman-core (>= 3.2) 101 | rouge (~> 1.0) 102 | minitest (5.11.3) 103 | padrino-helpers (0.13.3.4) 104 | i18n (~> 0.6, >= 0.6.7) 105 | padrino-support (= 0.13.3.4) 106 | tilt (>= 1.4.1, < 3) 107 | padrino-support (0.13.3.4) 108 | activesupport (>= 3.1) 109 | parallel (1.12.1) 110 | public_suffix (3.0.3) 111 | rack (2.0.6) 112 | rack-livereload (0.3.16) 113 | rack 114 | rake (11.1.2) 115 | rb-fsevent (0.10.3) 116 | rb-inotify (0.9.10) 117 | ffi (>= 0.5.0, < 2) 118 | rouge (1.10.1) 119 | sass (3.4.25) 120 | servolux (0.13.0) 121 | slim (3.0.7) 122 | temple (~> 0.7.6) 123 | tilt (>= 1.3.3, < 2.1) 124 | temple (0.7.7) 125 | thor (0.20.3) 126 | thread_safe (0.3.6) 127 | tilt (2.0.8) 128 | tzinfo (1.2.5) 129 | thread_safe (~> 0.1) 130 | uglifier (3.2.0) 131 | execjs (>= 0.3.0, < 3) 132 | 133 | PLATFORMS 134 | ruby 135 | 136 | DEPENDENCIES 137 | coffee-script 138 | middleman (= 4.2.1) 139 | middleman-gh-pages 140 | middleman-livereload 141 | middleman-meta-tags 142 | middleman-minify-html 143 | middleman-robots 144 | middleman-search_engine_sitemap 145 | middleman-syntax 146 | sass 147 | slim 148 | tzinfo-data 149 | vital! 150 | wdm (~> 0.1.0) 151 | 152 | BUNDLED WITH 153 | 1.16.2 154 | -------------------------------------------------------------------------------- /docs/Makefile: -------------------------------------------------------------------------------- 1 | # Makefile for doximity/vitalcss 2 | # Commands: 3 | # set_index: Set index of static site to index.html 4 | # publish: Deploy vitalcss static site 5 | 6 | set_index: 7 | aws s3 website s3://dox-vitalcss --index-document index.html 8 | 9 | build: 10 | bundle exec middleman build 11 | 12 | publish: 13 | aws configure set preview.cloudfront true 14 | aws configure set preview.create-invalidation true 15 | aws s3 sync --acl public-read --delete build/ s3://vitalcss 16 | aws cloudfront create-invalidation --distribution-id ${VITALCSS_DIST_ID} --paths "/*" 17 | -------------------------------------------------------------------------------- /docs/Rakefile: -------------------------------------------------------------------------------- 1 | ENV['PROJECT_ROOT'] = Rake.application.original_dir 2 | require 'middleman-gh-pages' 3 | -------------------------------------------------------------------------------- /docs/config.rb: -------------------------------------------------------------------------------- 1 | set :source, '.' 2 | 3 | ### 4 | # Page options, layouts, aliases and proxies 5 | ### 6 | 7 | # Per-page layout changes: 8 | # 9 | # With no layout 10 | page '/*.xml', layout: false 11 | page '/*.json', layout: false 12 | page '/*.txt', layout: false 13 | page '/sitemap.xml', layout: false 14 | 15 | import_path "#{Vital.gem_path}/fonts" 16 | 17 | # With alternative layout 18 | # page "/path/to/file.html", layout: :otherlayout 19 | 20 | # Proxy pages (http://middlemanapp.com/basics/dynamic-pages/) 21 | # proxy "/this-page-has-no-template.html", "/template-file.html", locals: { 22 | # which_fake_page: "Rendering a fake page with a local variable" } 23 | 24 | # General configuration 25 | 26 | # Ignore files on build 27 | ignore "/.gitignore" 28 | ignore "/config.rb" 29 | ignore "/config.ru" 30 | ignore "/Gemfile*" 31 | ignore "/Makefile" 32 | ignore "/Rakefile" 33 | 34 | # Syntax highlighting 35 | activate :syntax 36 | # Pretty URLs 37 | activate :directory_indexes 38 | # Set relative paths needed for github pages 39 | activate :relative_assets 40 | # SEO Optimizations 41 | activate :meta_tags 42 | # Sitemap generator 43 | activate :search_engine_sitemap, default_priority: 1, default_change_frequency: 'weekly' 44 | # Bust caches 45 | activate :asset_hash, ignore: ['images/opengraph.jpg', 'images/logo.png'] 46 | 47 | # Reload the browser automatically whenever files change 48 | configure :development do 49 | activate :livereload 50 | end 51 | 52 | ### 53 | # Helpers 54 | ### 55 | 56 | # Methods defined in the helpers block are available in templates 57 | # helpers do 58 | # def some_helper 59 | # "Helping" 60 | # end 61 | # end 62 | 63 | # Build-specific configuration 64 | configure :build do 65 | activate :robots, :rules => [ 66 | {:user_agent => '*', :allow => %w(/)} 67 | ], 68 | sitemap: "#{@app.data.site.url}/sitemap.xml" 69 | 70 | # Minify on build 71 | activate :minify_html 72 | activate :minify_css 73 | activate :minify_javascript 74 | activate :gzip 75 | 76 | set :relative_links, true 77 | set :site_url, "/vital" 78 | set :url_root, 'http://vitalcss.com' 79 | end 80 | -------------------------------------------------------------------------------- /docs/config.ru: -------------------------------------------------------------------------------- 1 | require 'middleman-core/load_paths' 2 | ::Middleman.setup_load_paths 3 | 4 | require 'middleman-core' 5 | require 'middleman-core/rack' 6 | 7 | require 'fileutils' 8 | FileUtils.mkdir('log') unless File.exist?('log') 9 | ::Middleman::Logger.singleton("log/#{ENV['RACK_ENV']}.log") 10 | 11 | app = ::Middleman::Application.new 12 | 13 | run ::Middleman::Rack.new(app).to_app 14 | -------------------------------------------------------------------------------- /docs/data/site.yml: -------------------------------------------------------------------------------- 1 | # Required 2 | 3 | language: 'en-us' 4 | url: 'http://vitalcss.com' 5 | preferred_url: 'http://vitalcss.com' 6 | human_url: 'vitalcss.com' 7 | name: 'Vital CSS Framework' 8 | title: 'Vital CSS Framework' 9 | description: "A minimally invasive CSS framework for modern web applications. Only 8 KB." 10 | 11 | logo_image_name: 'logo.png' 12 | logo_image_path: 'http://vitalcss.com/images/logo.png' 13 | 14 | email: '' 15 | subject: '' 16 | body: '' 17 | address: '' 18 | phone: '' 19 | 20 | # gh-pages directory 21 | # if you're using github pages 22 | directory: '/vital' 23 | 24 | # social 25 | twitter_handle: '@doximity_tech' 26 | 27 | # opengraph 28 | pull_image: 'http://vitalcss.com/images/opengraph.jpg' 29 | 30 | # gray image 31 | lazyload_placeholder: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' 32 | -------------------------------------------------------------------------------- /docs/get-started.html.slim: -------------------------------------------------------------------------------- 1 | - set_meta_tags title: 'Vital | Get Started' 2 | 3 | .row.bg-red.light-text 4 | .section.center 5 | h1 Get Started 6 | 7 | .row 8 | .section 9 | h1 Setup / Installation 10 | hr 11 | h2 Quickest (Compiled) 12 | p Import into stylesheet or as a stylesheet link tag: 13 | p 14 | code https://cdn.rawgit.com/doximity/vital/v#{Vital::VERSION}/dist/css/vital.min.css 15 | p 16 | strong 17 | ' Note: 18 | ' Vital v2.x is not backwards compatible with v1.x. Some things may break. You may need to do some refactoring. 19 | hr 20 | h2 Recommended (Source) 21 | p 22 | ' Vital works best when manipulated directly so download the latest package release from 23 | => link_to 'GitHub', 'https://github.com/doximity/vital/releases' 24 | | and extract its contents into your one of your project's sources directory. This installation method is preferred if you want to develop your own unique branding while keeping code output to a minimum. One possible caveat to this method is you sacrifice future upgradability as you may encounter breaking changes. 25 | p 26 | | The released tarballs include different flavors of the framework that you can use depending on your needs. Its structure looks as the following: 27 | 28 | = code do 29 | | 30 | dist/ 31 | ├── css 32 | │   └── ... precompiled CSS files ... 33 | ├── sass 34 | │   └── ... framework sources as SASS files ... 35 | └── scss 36 |     └── ... framework sources as SCSS files ... 37 | 38 | p 39 | | Depending on your project needs, copy the appropriate version of the stylesheets ( 40 | code CSS 41 | ' , 42 | code SASS 43 | ' or 44 | code SCSS 45 | | ) directory over to a directory within your project's sources that can be accessed from a browser. 46 | p 47 | ' Read the 48 | => link_to 'documentation', '/components.html' 49 | | for information on the basics of setting up a common application layout. 50 | 51 | hr 52 | h2 Rails 53 | p 54 | ' Add the gem to your project's 55 | code Gemfile 56 | | : 57 | = code('ruby') do 58 | | 59 | gem 'vital' 60 | p 61 | ' And add the following at the top of your project's 62 | code app/assets/stylesheets/application.sass.css 63 | | : 64 | = code('sass') do 65 | | 66 | @import vital/all 67 | p 68 | code> vital/all 69 | ' includes everything. You can also import individual partials depending on your needs: 70 | 71 | = code('sass') do 72 | | 73 | // Vendor 74 | @import vital/normalize 75 | 76 | // Components 77 | @import vital/variables 78 | @import vital/mixins 79 | @import vital/icons 80 | @import vital/grid 81 | @import vital/base 82 | @import vital/buttons 83 | @import vital/footer 84 | @import vital/forms 85 | @import vital/header 86 | @import vital/heroes 87 | @import vital/loaders 88 | @import vital/notice 89 | @import vital/pagination 90 | @import vital/tables 91 | @import vital/tabs 92 | @import vital/syntax 93 | @import vital/helpers 94 | 95 | // Layouts 96 | @import vital/layouts/background_cards 97 | @import vital/layouts/bordered_lists 98 | @import vital/layouts/photo_collages 99 | @import vital/layouts/feed_cards 100 | 101 | // Your customizations 102 | @import custom 103 | 104 | p 105 | ' Most partials are optional. 106 | p 107 | ' Small reusable classes should be placed in 108 | code> _helpers.sass 109 | ' and larger, more unique code should live in 110 | code _custom.sass 111 | | . 112 | 113 | h2 Application layout 114 | p Your typical application layout HTML would look something like this: 115 | 116 | = code('slim') do 117 | | 118 | doctype html 119 | html 120 | head 121 | meta content='IE=edge' http-equiv='X-UA-Compatible' 122 | meta charset='UTF-8' 123 | meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport' 124 | title Vital 125 | = favicon_tag 'images/favicon.ico' 126 | = stylesheet_link_tag :vital 127 | body 128 | = partial 'layouts/header' 129 | .contents 130 | = yield 131 | = partial 'layouts/footer' 132 | 133 | hr 134 | h2 Bower / NPM 135 | = code('sh') do 136 | | 137 | bower install --save vital 138 | npm install --save vital-css 139 | p 140 | ' And reference the assets from within your project's 141 | code bower_components/vital 142 | ' or 143 | code node_modules/vital-css 144 | | directory 145 | 146 | h2 Webpack 147 | p 148 | ' Install vital-css and dependencies: 149 | = code('sh') do 150 | | 151 | npm install --save css-loader sass-loader node-sass extract-text-webpack-plugin vital-css 152 | 153 | p 154 | ' Add the 155 | code vital-css 156 | ' module in your 157 | code webpack.config.js 158 | ' in order to easily import it in any Sass file: 159 | 160 | = code('js') do 161 | | 162 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 163 | 164 | module.exports = { 165 | entry: './src', 166 | output: { 167 | path: __dirname + '/build', 168 | filename: 'bundle.js' 169 | }, 170 | module: { 171 | rules: [ 172 | { 173 | test: /\.sass/, 174 | use: ExtractTextPlugin.extract({ 175 | fallback: 'style-loader', 176 | 177 | use: [ 178 | { loader: 'css-loader' }, 179 | { 180 | loader: 'sass-loader', 181 | options: { 182 | includePaths: [require('vital-css').includePaths] 183 | } 184 | } 185 | ] 186 | }) 187 | } 188 | ] 189 | }, 190 | plugins: [ 191 | new ExtractTextPlugin("styles.css") 192 | ] 193 | }; 194 | 195 | p 196 | ' And then you can just reference all of Vital with a single import within your 197 | code .sass 198 | ' files: 199 | = code("css") do 200 | | 201 | @import "vital" 202 | ' Or include only the components you need: 203 | = code("sass") do 204 | | 205 | @import "vital/base" 206 | @import "vital/variables" 207 | @import "vital/forms" 208 | -------------------------------------------------------------------------------- /docs/images/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /docs/images/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /docs/images/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /docs/images/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /docs/images/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /docs/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/avatar.png -------------------------------------------------------------------------------- /docs/images/demo/chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/images/demo/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/images/demo/devices.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 20 | 21 | 33 | 38 | 43 | 52 | 55 | 67 | 70 | 75 | 77 | 82 | 84 | 89 | 91 | 101 | 111 | 117 | 120 | 122 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /docs/images/demo/expand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/images/demo/hammer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | 14 | 17 | 18 | -------------------------------------------------------------------------------- /docs/images/demo/open-source.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /docs/images/demo/spring.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/favicon.ico -------------------------------------------------------------------------------- /docs/images/icons/icon-arrow-updown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/icons/icon-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/icons/icon-clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/icons/icon-close-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/images/icons/icon-close-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/images/icons/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/images/icons/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/icons/icon-vital.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /docs/images/opengraph.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/docs/images/opengraph.jpg -------------------------------------------------------------------------------- /docs/index.html.slim: -------------------------------------------------------------------------------- 1 | - set_meta_tags title: 'Vital | CSS Framework' 2 | 3 | .row.hero.bg-red 4 | .section.narrow.center 5 | i.i5x.icon-vital 6 | h1 Vital 7 | hr.small.opacity-4 8 | h2 A minimally invasive CSS framework for modern web applications 9 | 10 | .page 11 | .row 12 | .section.narrow.center 13 | h1 Minimal 14 | hr.red.small 15 | h3.centered-text Vital is a reverse approach to "everything and the kitchen sink" CSS frameworks. 16 | 17 | .row.bg#simple 18 | .section.center 19 | h1 Simple 20 | hr.red.small 21 | .autogrid.padded 22 | .col 23 | = image_tag data.site.lazyload_placeholder, class: 'b-lazy full', data: {src: 'images/demo/spring.svg'} 24 | h2 Flexible 25 | p 26 | ' Vital is built with 27 | = link_to 'Sass', 'http://sass-lang.com/', target: '_blank' 28 | | , the preferred CSS preprocessor of today. 29 | .col 30 | = image_tag data.site.lazyload_placeholder, class: 'b-lazy full', data: {src: 'images/demo/code.svg'} 31 | h2 Readable 32 | p No ridiculous amounts of classes or nesting. No excessively buried code. 33 | .col 34 | = image_tag data.site.lazyload_placeholder, class: 'b-lazy full', data: {src: 'images/demo/expand.svg'} 35 | h2 Scalable 36 | p 37 | ' Written almost entirely in 38 | code em 39 | | values, allowing for easy and consistent scaling. 40 | 41 | .row#light 42 | .section.center 43 | = image_tag data.site.lazyload_placeholder, class: 'b-lazy full', data: {src: 'images/demo/feather.svg'} 44 | h1 Light as a feather 45 | hr.red.small 46 | p At a total size of just 23 KB minified or 6 KB gzipped, Vital loads and renders quickly. 47 | .narrow 48 | .autogrid.stats 49 | .col 50 | h1 51 | | 23 52 | span KB 53 | hr.small 54 | p 55 | | CSS framework 56 | br 57 | small.gray-medium 58 | | 6 KB gzipped! 59 | .col 60 | h1 61 | | 0 62 | span KB 63 | hr.small 64 | p 65 | | No javascript 66 | br 67 | small.gray-medium 68 | | No problems! 69 | 70 | .row.bg-blue#productive 71 | .section.padded.light-text 72 | .col-1-2 73 | = image_tag data.site.lazyload_placeholder, data: {src: 'images/demo/chart.svg'}, class: 'b-lazy' 74 | h1 Less is more 75 | p Traditional CSS frameworks include an overwhelming and unnecessary amount of bloat. Vital is built on the principal that less is more. Working with less code means there are fewer bugs to squash and less documentation to read. Less time spent coding means more time to focus on your next killer feature. 76 | .col-1-2 77 | = image_tag data.site.lazyload_placeholder, data: {src: 'images/demo/hammer.svg'}, class: 'b-lazy' 78 | h1 Regain productivity 79 | p Often times a large CSS framework is used to speed up the time to market or to enforce consistency, but when a project grows beyond the initial scope of a concept, development becomes more difficult and time consuming. Vital reduces workflow inefficiencies because there is less to learn and maintain. 80 | .clear 81 | 82 | .row.bg#devices 83 | .section.center 84 | h1 Vast device support 85 | hr.red.small 86 | p.centered-text Vital is a true cross-platform, mobile-first framework. Elements such as select boxes, checkboxes and radios render consistently across different platforms while gracefully degrading on legacy. 87 | = image_tag data.site.lazyload_placeholder, class: 'b-lazy full', data: {src: 'images/demo/devices.svg'} 88 | 89 | .row.bg-black#open-source 90 | .section.narrow.center.light-text 91 | = image_tag data.site.lazyload_placeholder, class: 'b-lazy', data: {src: 'images/demo/open-source.svg'} 92 | h1 Open Source 93 | hr.small.opacity-2 94 | p 95 | ' Vital is developed and maintained by 96 | = link_to 'Doximity', 'https://doximity.com', target: '_blank' 97 | ' . View the source on 98 | = link_to 'GitHub', 'https://github.com/doximity/vital', target: '_blank' 99 | | . 100 | 101 | .row.bg-orange 102 | .section.narrow.center 103 | p 104 | = link_to 'Get Started using Vital', '/get-started.html', class: 'btn white round large' 105 | 106 | -------------------------------------------------------------------------------- /docs/layouts.html.slim: -------------------------------------------------------------------------------- 1 | - set_meta_tags title: 'Vital | Layouts' 2 | 3 | - @ipsum_title = 'Lorem ipsum dolor sit amet, sed do eiusmod, sondu' 4 | - @ipsum_paragraph = 'Consequat duis aute irure dolor in reprehenderit in voluptate velit esse.' 5 | - @ipsum_title_small = 'Dolor sit amet sondu cotnghi' 6 | - @ipsum_paragraph_small = 'Duis aute in voluptate velit esse.' 7 | 8 | sass: 9 | // backgrounds 10 | .bg-01 11 | background-image: image_url('https://unsplash.it/1000/1000/?image=787') 12 | .bg-02 13 | background-image: image_url('https://unsplash.it/1000/1000/?image=723') 14 | .bg-03 15 | background-image: image_url('https://unsplash.it/1000/1000/?image=803') 16 | .bg-04 17 | background-image: image_url('https://unsplash.it/1000/1000/?image=884') 18 | .bg-05 19 | background-image: image_url('https://unsplash.it/1000/1000/?image=981') 20 | .bg-06 21 | background-image: image_url('https://unsplash.it/1000/1000/?image=826') 22 | .bg-07 23 | background-image: image_url('https://unsplash.it/1000/1000/?image=823') 24 | .bg-08 25 | background-image: image_url('https://unsplash.it/1000/1000/?image=813') 26 | .bg-09 27 | background-image: image_url('https://unsplash.it/1000/1000/?image=892') 28 | .bg-10 29 | background-image: image_url('https://unsplash.it/1000/1000/?image=900') 30 | .bg-11 31 | background-image: image_url('https://unsplash.it/1000/1000/?image=894') 32 | .bg-12 33 | background-image: image_url('https://unsplash.it/1000/1000/?image=901') 34 | .bg-13 35 | background-image: image_url('https://unsplash.it/1000/1000/?image=896') 36 | .bg-14 37 | background-image: image_url('https://unsplash.it/1000/1000/?image=923') 38 | .bg-15 39 | background-image: image_url('https://unsplash.it/1000/1000/?image=898') 40 | 41 | // products 42 | .bg-a 43 | background-image: image_url('products/01.jpg') 44 | .bg-b 45 | background-image: image_url('products/02.jpg') 46 | .bg-c 47 | background-image: image_url('products/03.jpg') 48 | .bg-d 49 | background-image: image_url('products/04.jpg') 50 | .bg-e 51 | background-image: image_url('products/05.jpg') 52 | .bg-f 53 | background-image: image_url('products/06.jpg') 54 | 55 | .row.bg-red.light-text 56 | .section.center 57 | h1 Layouts 58 | 59 | .page.bg 60 | 61 | .row 62 | .section 63 | h2.center Basic Forms 64 | hr.small 65 | .autogrid.full-width-forms 66 | .col-1-4.space 67 | .col-1-2 68 | h3.center Sign In 69 | .box.bg-white.no-first-last 70 | p 71 | input type='email' placeholder='Email' 72 | input type='password' placeholder='Password' 73 | p 74 | = link_to 'Go', '#', class: 'btn red solid' 75 | hr 76 | .col-1-2 77 | = link_to 'Sign Up', '#', class: 'btn gray-medium no-outline small' 78 | .col-1-2 79 | = link_to 'Forgot Password?', '#', class: 'btn gray-medium no-outline small' 80 | .clear 81 | .col-1-4.space 82 | .clear 83 | 84 | .section 85 | .autogrid.full-width-forms 86 | .col-1-4.space 87 | .col-1-2 88 | h3.center Reset Password 89 | .box.bg-white.no-first-last 90 | p 91 | label 92 | small Enter your email 93 | input type='email' placeholder='you@example.com' 94 | p 95 | = link_to 'Reset', '#', class: 'btn red solid' 96 | .col-1-4.space 97 | .clear 98 | 99 | .section 100 | .autogrid.full-width-forms 101 | .col-1-4.space 102 | .col-1-2 103 | h3.center Create Account 104 | .box.no-first-last.bg-white 105 | p 106 | label 107 | small Enter your email 108 | input type='email' placeholder='you@example.com' 109 | p 110 | label 111 | small Confirm your email 112 | input type='email' placeholder='you@example.com' 113 | p 114 | label 115 | small Create a password 116 | input type='password' placeholder='Password' 117 | hr 118 | p 119 | = link_to 'Create Account', '#', class: 'btn red solid' 120 | p.center 121 | ' Have an account? 122 | = link_to 'Sign in', '#' 123 | .col-1-4.space 124 | .clear 125 | 126 | .row 127 | .section 128 | h2.center Background Cards 129 | hr.small 130 | .boxed-backgrounds 131 | .col-1-3 132 | .card 133 | .boxed 134 | .boxed-action 135 | h2 Place of Beauty 136 | = link_to 'Go There', '#', class: 'btn large solid round black' 137 | .boxed-image.bg-10 138 | .col-1-3 139 | .card 140 | .boxed 141 | .boxed-action 142 | h2 Place of Beauty 143 | = link_to 'Go There', '#', class: 'btn large solid round black' 144 | .boxed-image.bg-11 145 | .col-1-3 146 | .card 147 | .boxed 148 | .boxed-action 149 | h2 Place of Beauty 150 | = link_to 'Go There', '#', class: 'btn large solid round black' 151 | .boxed-image.bg-12 152 | .col-1-3 153 | .card 154 | .boxed 155 | .boxed-action 156 | h2 Place of Beauty 157 | = link_to 'Go There', '#', class: 'btn large solid round black' 158 | .boxed-image.bg-13 159 | .col-1-3 160 | .card 161 | .boxed 162 | .boxed-action 163 | h2 Place of Beauty 164 | = link_to 'Go There', '#', class: 'btn large solid round black' 165 | .boxed-image.bg-14 166 | .col-1-3 167 | .card 168 | .boxed 169 | .boxed-action 170 | h2 Place of Beauty 171 | = link_to 'Go There', '#', class: 'btn large solid round black' 172 | .boxed-image.bg-15 173 | .clear 174 | 175 | .row 176 | .section 177 | h2.center Feed Cards 178 | hr.small 179 | .feed-cards 180 | .autogrid 181 | .col 182 | .feed-card 183 | = image_tag 'https://unsplash.it/1000/800/?image=731' 184 | h3 = @ipsum_title 185 | p = @ipsum_paragraph 186 | .col 187 | .feed-card 188 | = image_tag 'https://unsplash.it/1000/800/?image=872' 189 | h3 = @ipsum_title 190 | p = @ipsum_paragraph 191 | .col 192 | .feed-card 193 | = image_tag 'https://unsplash.it/1000/800/?image=176' 194 | h3 = @ipsum_title 195 | p = @ipsum_paragraph 196 | .autogrid 197 | .col 198 | .feed-card 199 | = image_tag 'https://unsplash.it/1000/800/?image=957' 200 | h3 = @ipsum_title 201 | p = @ipsum_paragraph 202 | .col 203 | .feed-card 204 | = image_tag 'https://unsplash.it/1000/800/?image=118' 205 | h3 = @ipsum_title 206 | p = @ipsum_paragraph 207 | .col 208 | .feed-card 209 | = image_tag 'https://unsplash.it/1000/800/?image=263' 210 | h3 = @ipsum_title 211 | p = @ipsum_paragraph 212 | .col 213 | .feed-card 214 | = image_tag 'https://unsplash.it/1000/800/?image=485' 215 | h3 = @ipsum_title 216 | p = @ipsum_paragraph 217 | 218 | .row.photo-collage 219 | .section 220 | h2.center Photo Collage 221 | hr.small 222 | 223 | .boxed-text 224 | .boxed-text-outer.col-1-3.bg-01 225 | .boxed-text-content 226 | .boxed-text-outer.col-2-3.bg-02 227 | .boxed-text-content 228 | h2 = @ipsum_title_small 229 | p = @ipsum_paragraph_small 230 | .clear 231 | 232 | .boxed-text-outer.col-2-3.bg-03 233 | .boxed-text-content 234 | .boxed-text-outer.col-1-3.bg-04 235 | .boxed-text-content 236 | h2 = @ipsum_title_small 237 | p = @ipsum_paragraph_small 238 | .clear 239 | 240 | .boxed-text-outer.col-1-2.bg-05 241 | .boxed-text-content 242 | h2 = @ipsum_title_small 243 | p = @ipsum_paragraph_small 244 | .boxed-text-outer.col-1-2.bg-06 245 | .boxed-text-content 246 | .clear 247 | 248 | .boxed-text-outer.col-1-3.bg-07 249 | .boxed-text-content 250 | h2 = @ipsum_title_small 251 | p = @ipsum_paragraph_small 252 | .boxed-text-outer.col-1-3.bg-08 253 | .boxed-text-content 254 | h2 = @ipsum_title_small 255 | p = @ipsum_paragraph_small 256 | .boxed-text-outer.col-1-3.bg-09 257 | .boxed-text-content 258 | h2 = @ipsum_title_small 259 | p = @ipsum_paragraph_small 260 | .clear 261 | 262 | .row 263 | .section 264 | h2.center Account 265 | hr.small 266 | 267 | .col-1-4 268 | ul.bordered-list 269 | li = link_to 'Profile', '#', class: 'here' 270 | li = link_to 'Subscription', '#' 271 | li = link_to 'Payment', '#' 272 | 273 | .col-3-4.bg-white.padding.no-first-last 274 | h2 275 | | Richard Hendricks 276 | = image_tag 'images/avatar.png', class: 'float-right', width: '15%' 277 | ul 278 | li 279 | small.gray-light Email 280 | br 281 | span richard@piedpiper.com 282 | li 283 | small.gray-light Handle 284 | br 285 | span @rHendricks 286 | li 287 | small.gray-light Description 288 | br 289 | span Middle-out compression done right. 290 | 291 | p 292 | small.gray-light About 293 | br 294 | | Richard is the CEO (Chief Executive Officer) of Ronify, a company he founded and then was fired from. Isn’t that weird? Although he left four credits short of graduation, he attended Stanford, where none of his computer science classes mentioned the possibility of having an innovative software firm you created ripped from you by soulless bean counters. 295 | 296 | 297 | p 298 | = link_to 'Edit Profile', '#', class: 'btn red' 299 | 300 | .clear 301 | 302 | .row.bg-black.light-text 303 | .section.narrow 304 | h1.center Live Examples 305 | hr.small.opacity-1 306 | .autogrid 307 | .col 308 | h2 Work @ Doximity 309 | ul.list 310 | li = link_to 'https://workat.doximity.com/', 'https://workat.doximity.com/', target: '_blank' 311 | li = link_to 'https://workat.doximity.com/positions/', 'https://workat.doximity.com/positions/', target: '_blank' 312 | li = link_to 'https://workat.doximity.com/about/', 'https://workat.doximity.com/about/', target: '_blank' 313 | li = link_to 'https://workat.doximity.com/contact/', 'https://workat.doximity.com/contact/', target: '_blank' 314 | h2 Doximity Engineering 315 | ul.list 316 | li = link_to 'https://engineering.doximity.com/', 'https://engineering.doximity.com/', target: '_blank' 317 | li = link_to 'https://engineering.doximity.com/pages/engineering-stack', 'https://engineering.doximity.com/pages/engineering-stack', target: '_blank' 318 | li = link_to 'https://engineering.doximity.com/sitemaps', 'https://engineering.doximity.com/sitemaps', target: '_blank' 319 | li = link_to 'https://engineering.doximity.com/authors', 'https://engineering.doximity.com/authors', target: '_blank' 320 | li = link_to 'https://engineering.doximity.com/', 'https://engineering.doximity.com/', target: '_blank' 321 | h2 Doximity 322 | ul.list 323 | li = link_to 'https://doximity.com', 'https://doximity.com', target: '_blank' 324 | li = link_to 'https://doximity.com/about/company', 'https://doximity.com/about/company', target: '_blank' 325 | li = link_to 'https://doximity.com/about/press', 'https://doximity.com/about/press', target: '_blank' 326 | li = link_to 'https://doximity.com/about/jobs', 'https://doximity.com/about/jobs', target: '_blank' 327 | li = link_to 'https://doximity.com/about/contact', 'https://doximity.com/about/contact', target: '_blank' 328 | li = link_to 'https://doximity.com/about/advisors', 'https://doximity.com/about/advisors', target: '_blank' 329 | li = link_to 'https://doximity.com/clinicians/product', 'https://doximity.com/clinicians/product', target: '_blank' 330 | li = link_to 'https://doximity.com/clinicians/download', 'https://doximity.com/clinicians/download', target: '_blank' 331 | li = link_to 'https://doximity.com/clinicians/privacy', 'https://doximity.com/clinicians/privacy', target: '_blank' 332 | li = link_to 'https://doximity.com/directory', 'https://doximity.com/directory', target: '_blank' 333 | li = link_to 'https://doximity.com/partners', 'https://doximity.com/partners', target: '_blank' 334 | li = link_to 'https://doximity.com/partnerships', 'https://doximity.com/partnerships', target: '_blank' 335 | li = link_to 'https://doximity.com/developers/home', 'https://doximity.com/developers/home', target: '_blank' 336 | li = link_to 'https://doximity.com/hospitals', 'https://doximity.com/hospitals', target: '_blank' 337 | li = link_to 'https://doximity.com/signin', 'https://doximity.com/signin', target: '_blank' 338 | li = link_to 'https://doximity.com/password_resets/new', 'https://doximity.com/password_resets/new', target: '_blank' 339 | li = link_to 'https://doximity.com/browser_warning', 'https://doximity.com/browser_warning', target: '_blank' 340 | li = link_to 'https://doximity.com/careers/signin', 'https://doximity.com/careers/signin', target: '_blank' 341 | li = link_to 'https://doximity.com/careers_press_embed', 'https://doximity.com/careers_press_embed', target: '_blank' 342 | li = link_to 'https://doximity.com/about/press_room', 'https://doximity.com/about/press_room', target: '_blank' 343 | li = link_to 'https://doximity.com/about/testimonials', 'https://doximity.com/about/testimonials', target: '_blank' 344 | li = link_to 'https://doximity.com/about/faq', 'https://doximity.com/about/faq', target: '_blank' 345 | li = link_to 'https://doximity.com/free_cme', 'https://doximity.com/free_cme', target: '_blank' 346 | li = link_to 'https://doximity.com/reg/free_cme', 'https://doximity.com/reg/free_cme', target: '_blank' 347 | li = link_to 'https://doximity.com/medstudents', 'https://doximity.com/medstudents', target: '_blank' 348 | li = link_to 'https://doximity.com/docfax', 'https://doximity.com/docfax', target: '_blank' 349 | li = link_to 'https://doximity.com/amion', 'https://doximity.com/amion', target: '_blank' 350 | li = link_to 'https://doximity.com/summit', 'https://doximity.com/summit', target: '_blank' 351 | li = link_to 'https://doximity.com/fellows/apply', 'https://doximity.com/fellows/apply', target: '_blank' 352 | li = link_to 'https://doximity.com/doxconnect', 'https://doximity.com/doxconnect', target: '_blank' 353 | li = link_to 'https://doximity.com/conferences', 'https://doximity.com/conferences', target: '_blank' 354 | li = link_to 'https://doximity.com/promo/fax', 'https://doximity.com/promo/fax', target: '_blank' 355 | li = link_to 'https://doximity.com/leadership', 'https://doximity.com/leadership', target: '_blank' 356 | li = link_to 'https://doximity.com/careers/methodology', 'https://doximity.com/careers/methodology', target: '_blank' 357 | li = link_to 'https://doximity.com/ipad', 'https://doximity.com/ipad', target: '_blank' 358 | li = link_to 'https://doximity.com/watch', 'https://doximity.com/watch', target: '_blank' 359 | li = link_to 'https://doximity.com/emcare', 'https://doximity.com/emcare', target: '_blank' 360 | li = link_to 'https://doximity.com/apdim', 'https://doximity.com/apdim', target: '_blank' 361 | li = link_to 'https://doximity.com/apds', 'https://doximity.com/apds', target: '_blank' 362 | li = link_to 'https://doximity.com/careers_press_embed', 'https://doximity.com/careers_press_embed', target: '_blank' 363 | h2 Doximity Blog 364 | ul.list 365 | li = link_to 'https://blog.doximity.com/', 'https://blog.doximity.com/', target: '_blank' 366 | 367 | -------------------------------------------------------------------------------- /docs/layouts/_lazyload.html.slim: -------------------------------------------------------------------------------- 1 | // Lazyload 2 | 3 | javascript: 4 | /*! 5 | hey, [be]Lazy.js - v1.6.2 - 2016.05.09 6 | A fast, small and dependency free lazy load script (https://github.com/dinbror/blazy) 7 | (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy 8 | */ 9 | (function(p,m){"function"===typeof define&&define.amd?define(m):"object"===typeof exports?module.exports=m():p.Blazy=m()})(this,function(){function p(b){var c=b._util;c.elements=B(b.options.selector);c.count=c.elements.length;c.destroyed&&(c.destroyed=!1,b.options.container&&k(b.options.container,function(a){n(a,"scroll",c.validateT)}),n(window,"resize",c.save_viewportOffsetT),n(window,"resize",c.validateT),n(window,"scroll",c.validateT));m(b)}function m(b){for(var c=b._util,a=0;a=e.left&&f.bottom>=e.top&&f.left<=e.right&&f.top<=e.bottom||q(d,b.options.successClass))b.load(d),c.elements.splice(a,1),c.count--,a--}0===c.count&&b.destroy()}function x(b,c,a){if(!q(b,a.successClass)&&(c||a.loadInvisible||0=window.screen.width)return r=a.src,!1});setTimeout(function(){p(a)})}}); 10 | 11 | // Initialize 12 | window.addEventListener("DOMContentLoaded", (_) => { new Blazy(); }); 13 | -------------------------------------------------------------------------------- /docs/layouts/footer.html.slim: -------------------------------------------------------------------------------- 1 | .row.footer.center 2 | .section 3 | i.icon-vital.i3x 4 | ul 5 | li = link_to "Doximity Engineering", "https://engineering.doximity.com" 6 | li.line │ 7 | li = link_to "Doximity API", "https://www.doximity.com/developers/home" 8 | li.line │ 9 | li = link_to "Open Source", "https://github.com/doximity" 10 | li.line │ 11 | li = link_to "We're Hiring", "https://www.doximity.com/about/jobs" 12 | li.line │ 13 | li = link_to "Follow Us", "https://twitter.com/doximity_tech" 14 | hr.small 15 | p 16 | ' © 17 | = Time.now.strftime('%Y') 18 | -------------------------------------------------------------------------------- /docs/layouts/header.html.slim: -------------------------------------------------------------------------------- 1 | .row.header 2 | .section 3 | 4 | nav 5 | = link_to '/', class: 'logo' do 6 | = image_tag 'logo.svg' 7 | 8 | label#menu-toggle-label for='menu-toggle' 9 | input#menu-toggle type='checkbox' 10 | .icon-menu 11 | 12 | ul.menu 13 | li = link_to 'GitHub', 'https://github.com/doximity/vital' 14 | li = link_to 'Why Vital?', 'https://engineering.doximity.com/articles/vital-css-framework', target: '_blank' 15 | li = link_to 'Layouts', '/layouts.html' 16 | li = link_to 'Components', '/components.html' 17 | li = link_to 'Get Started', '/get-started.html' 18 | -------------------------------------------------------------------------------- /docs/layouts/layout.html.slim: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | meta[content='IE=edge' http-equiv='X-UA-Compatible']/ 5 | meta[charset='UTF-8']/ 6 | meta[content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' name='viewport']/ 7 | 8 | = auto_display_meta_tags 9 | 10 | /[if IE 9] 11 | html class="ie9" 12 | /[if IE 8] 13 | html class="ie8" 14 | 15 | = favicon_tag 'images/favicon.ico' 16 | = favicon_tag 'apple-touch-icon-60x60.png', rel: 'apple-touch-icon', type: 'image/png', sizes: '60x60' 17 | = favicon_tag 'apple-touch-icon-76x76.png', rel: 'apple-touch-icon', type: 'image/png', sizes: '76x76' 18 | = favicon_tag 'apple-touch-icon-120x120.png', rel: 'apple-touch-icon', type: 'image/png', sizes: '120x120' 19 | = favicon_tag 'apple-touch-icon-152x152.png', rel: 'apple-touch-icon', type: 'image/png', sizes: '152x152' 20 | = stylesheet_link_tag :vital 21 | = stylesheet_link_tag :demo 22 | = yield_content :assets 23 | = partial 'layouts/lazyload' 24 | 25 | body class='#{page_classes}' 26 | = partial 'layouts/header' 27 | .contents 28 | = yield 29 | = partial 'layouts/footer' 30 | 31 | -------------------------------------------------------------------------------- /docs/stylesheets/demo.css.sass: -------------------------------------------------------------------------------- 1 | @import vital/variables 2 | 3 | // Demo 4 | 5 | .grid-preview 6 | margin: 2em 0 7 | [class*='col-'], .autogrid .col 8 | padding-top: 0.5em 9 | padding-bottom: 0.5em 10 | background: #eee 11 | font-size: 0.7em 12 | text-align: center 13 | border: $border-width solid #ddd 14 | font-family: $code 15 | overflow: hidden 16 | 17 | .empty-grid-preview 18 | margin: 1em 0 19 | padding: 1em 1em 0 1em 20 | background: $gray-lightest 21 | 22 | .icons-preview 23 | img 24 | &[src$='.svg'] 25 | width: 1em 26 | height: 1em 27 | p 28 | padding: 1em 0 29 | margin: 0 30 | height: auto 31 | min-height: 3em 32 | text-align: center 33 | line-height: 1.5 34 | color: gray 35 | width: 25% 36 | float: left 37 | display: block 38 | &:hover 39 | background: $gray-lightest 40 | border-radius: 2px 41 | transition: 0.1s linear background 42 | 43 | .header-preview 44 | .header, nav ul li 45 | background: #efefef !important 46 | 47 | // HR Colors 48 | hr 49 | height: 3px 50 | &.red 51 | background: #DD3F41 52 | 53 | // Header 54 | 55 | .header nav ul li 56 | float: right 57 | .get-started .header .menu li:nth-child(5), 58 | .components .header .menu li:nth-child(4), 59 | .layouts .header .menu li:nth-child(3), 60 | background: $header-link-hover 61 | 62 | // Lazyload 63 | 64 | .b-lazy 65 | opacity: 0 66 | .b-loading, .b-loaded 67 | opacity: 1 68 | transform: $translate 69 | transition: opacity 0.5s ease 70 | 71 | // Home 72 | 73 | .index 74 | .hero 75 | h1 76 | font-size: 5em 77 | line-height: 1 78 | .icon-vital 79 | line-height: 1 80 | font-size: 8em 81 | .page 82 | .section 83 | padding: 3em 1em 84 | .centered-text 85 | padding: 0 15% 86 | 87 | #productive 88 | .section 89 | padding: 5em 1em 90 | img 91 | width: 4em 92 | opacity: 0.7 93 | p 94 | padding-right: 2em 95 | 96 | #simple 97 | img 98 | width: 4em 99 | opacity: 0.8 100 | .autogrid 101 | padding: 2em 0 102 | 103 | #light 104 | img 105 | padding: 2% 15% 0 15% 106 | .stats 107 | h1 108 | font-size: 4em 109 | margin: 0 110 | font-weight: 100 111 | span 112 | font-size: 0.5em 113 | color: #aaa 114 | &:before 115 | content: ' ' 116 | hr 117 | margin: 0 auto 118 | 119 | #open-source 120 | img 121 | width: 5em 122 | margin: 2em 0 0 0 123 | 124 | 125 | @media screen and (max-width: $phablet) 126 | 127 | .forms-preview 128 | [class*='col-'] 129 | padding: 0.5% 0 130 | 131 | .centered-text 132 | padding: 0 5% 133 | 134 | .index .page .section 135 | padding: 1em 136 | 137 | #productive 138 | p 139 | padding-right: 0 140 | .section 141 | padding: 2em 1em 1em 1em 142 | .col-1-2 143 | padding-bottom: 2em 144 | 145 | @media screen and (max-width: $handheld) 146 | 147 | // Components 148 | 149 | .icons-preview 150 | p 151 | width: 50% 152 | 153 | .forms-preview 154 | input:not([type='checkbox']):not([type='radio']), select, textarea, .btn 155 | margin: 0.1em 0 156 | -------------------------------------------------------------------------------- /docs/stylesheets/vital.css.sass: -------------------------------------------------------------------------------- 1 | ../../sass/vital.css.sass -------------------------------------------------------------------------------- /icons/icon-arrow-updown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/icon-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/icon-clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/icon-close-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /icons/icon-close-outline.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /icons/icon-close.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /icons/icon-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/icon-vital.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | includePaths: [ 5 | path.join(__dirname, 'sass') 6 | ] 7 | }; 8 | -------------------------------------------------------------------------------- /lib/vital.rb: -------------------------------------------------------------------------------- 1 | require "vital/version" 2 | 3 | module Vital 4 | # Pretty much copy & pasted from https://github.com/twbs/bootstrap-rubygem/blob/36b5f3f9b4fd383381c87cbdfbab253d5501d6b2/lib/bootstrap.rb 5 | class << self 6 | def load! 7 | register_compass_extension if compass? 8 | 9 | if rails? 10 | register_rails_engine 11 | elsif sprockets? 12 | register_sprockets 13 | end 14 | 15 | configure_sass 16 | end 17 | 18 | # Paths 19 | def gem_path 20 | @gem_path ||= File.expand_path '..', File.dirname(__FILE__) 21 | end 22 | 23 | def sass_path 24 | File.join gem_path, 'sass' 25 | end 26 | 27 | # Environment detection helpers 28 | def rails? 29 | defined?(::Rails) 30 | end 31 | 32 | def sprockets? 33 | defined?(::Sprockets) 34 | end 35 | 36 | def compass? 37 | defined?(::Compass::Frameworks) 38 | end 39 | 40 | private 41 | 42 | def configure_sass 43 | require 'sass' 44 | ::Sass.load_paths << sass_path 45 | end 46 | 47 | def register_sprockets 48 | Sprockets.append_path(sass_path) 49 | end 50 | 51 | def register_rails_engine 52 | require 'vital/engine' 53 | end 54 | end 55 | end 56 | 57 | Vital.load! 58 | -------------------------------------------------------------------------------- /lib/vital/engine.rb: -------------------------------------------------------------------------------- 1 | module Vital 2 | class Engine < ::Rails::Engine 3 | isolate_namespace Vital 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /lib/vital/version.rb: -------------------------------------------------------------------------------- 1 | module Vital 2 | VERSION = "2.2.1" 3 | end 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vital-css", 3 | "version": "2.2.1", 4 | "description": "A minimally invasive CSS framework for modern web applications.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/doximity/vital.git" 8 | }, 9 | "author": "The Vital Authors (https://github.com/doximity/vital/graphs/contributors)", 10 | "license": "Apache-2.0", 11 | "bugs": { 12 | "url": "https://github.com/doximity/vital/issues" 13 | }, 14 | "homepage": "https://github.com/doximity/vital#readme" 15 | } 16 | -------------------------------------------------------------------------------- /releases/v1.0.0/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.0.0/fonts/icons.eot -------------------------------------------------------------------------------- /releases/v1.0.0/fonts/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by FontForge 20150828 at Fri Apr 29 13:11:31 2016 9 | By Body Taing 10 | Copyright (c) 2016, Body Taing 11 | 12 | 13 | 14 | 27 | 28 | 30 | 32 | 35 | 37 | 39 | 41 | 43 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /releases/v1.0.0/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.0.0/fonts/icons.ttf -------------------------------------------------------------------------------- /releases/v1.0.0/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.0.0/fonts/icons.woff -------------------------------------------------------------------------------- /releases/v1.0.0/stylesheets/vital.min.css: -------------------------------------------------------------------------------- 1 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit}optgroup{font-weight:bold}button,input,select{overflow:visible}button,input,select,textarea{margin:0}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}@font-face{font-family:"icons";src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.0/fonts/icons.eot");src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.0/fonts/icons.eot?#iefix") format("embedded-opentype"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.0/fonts/icons.woff") format("woff"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.0/fonts/icons.ttf") format("truetype"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.0/fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}@media screen and (-webkit-min-device-pixel-ratio: 0){@font-face{font-family:"icons";src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.0/fonts/icons.svg#icons") format("svg")}}[data-icon]:before{content:attr(data-icon)}[data-icon]:before,.icon-arrow-updown:before,.icon-check:before,.icon-clock:before,.icon-close:before,.icon-close-empty:before,.icon-close-outline:before,.icon-menu:before,.icon-vital:before{display:inline-block;font-family:"icons";font-style:normal;font-weight:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.icon-arrow-updown:before{content:"\f109"}.icon-check:before{content:"\f100"}.icon-clock:before{content:"\f10b"}.icon-close:before{content:"\f102"}.icon-close-empty:before{content:"\f103"}.icon-close-outline:before{content:"\f104"}.icon-menu:before{content:"\f10a"}.icon-vital:before{content:"\f101"}[class*='col-']{float:left}.col-1-3{width:33.33%}.col-2-3{width:66.66%}.col-1-2{width:50%}.col-1-4{width:25%}.col-3-4{width:75%}.col-1-5{width:20%}.col-1-8{width:12.5%}.autogrid{display:table;table-layout:fixed;width:100%}.col{width:auto;display:table-cell;vertical-align:top}.padded [class*='col-'],.padded .col{padding-left:2%;padding-right:2%}.right-padded [class*='col-'],.right-padded .col{padding-right:2%}@media screen and (max-width: 860px){[class*='col-'],.col{width:100%}.col{display:block}.right-padded [class*='col-'],.right-padded .col{padding:0}}*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}html,body{height:100%;width:100%}body{background:#FAFAFA;color:#444;font:17px/1.7 "Helvetica Neue", Helvetica, Sans-Serif}body:after{content:"";display:table;clear:both}img{height:auto;border-radius:0.15em}h1,h2,h3,h4,h5,h6,p,ul,ol,div{font-weight:300}h1,h2,h3,h4,h5,h6,p,ul,ol{margin:1em 0;margin:1rem 0}h1,h2,h3,h4,h5,h6{line-height:1.5}ul,ol{padding:0}li{list-style:none}a{color:#C9282E;text-decoration:none;outline:0}a:hover{color:#FF0008;transition:color 200ms ease-in-out}a:focus{outline:none}blockquote{margin:1em 0;padding:0 1em;border-left:0.4em solid #EEE}strong,b,.bold{font-weight:500}hr{border:none;background:#EEE;clear:both;margin:1.5em auto;height:1px}hr.half{width:50%}hr.small{width:5em}pre{white-space:pre-wrap;word-break:break-all}code{color:#333;font-family:"Monaco", Menlo, Courier;font-size:0.7em;background:#EEE;padding:0.9em 0.8em;margin:0 0.3em 0 0.2em;border-radius:0.15em;display:inline-block;word-break:break-word}p code{display:inline;padding:0.1em 0.4em 0.1em 0.3em;margin:0 0.3em 0 0}dl{display:table;width:100%}dt,dd{display:table-cell;vertical-align:top;float:left;clear:both}dt{color:#666;font-size:0.85em}dd{color:black;font-weight:400;padding-bottom:0.3em}dd:after{content:" "}dd i{margin:0 1em 0 0}.contents{background:white;min-height:24em}.row{clear:both;width:100%}.section{padding:1em;margin:0 auto;width:90%}@media screen and (min-width: 1440px){.section{width:70%}}@media screen and (min-width: 1680px){.section{width:60%}}@media screen and (max-width: 860px){.section{width:100%}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){strong,b,.bold{font-weight:500}}.ie8 strong,.ie8 b,.ie8 .bold,.ie9 strong,.ie9 b,.ie9 .bold{font-weight:500}.btn{-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border-radius:0.15em;border:1px solid #666;box-shadow:none;color:#666;cursor:pointer;display:inline-block;font-size:1.05em;height:auto;line-height:1;margin:0;outline:none;padding:0.76em 1.5em;text-align:center;text-decoration:none;user-select:none;white-space:nowrap}.btn:hover{border-color:#666}.btn.solid,.btn:hover{color:#FFF;background:#666}.btn.white{color:#FFF;border-color:#FFF}.btn.white.solid,.btn.white:hover{color:#000;background:#FFF}.btn.gray-light{color:#BBB;border-color:#BBB}.btn.gray-light.solid,.btn.gray-light:hover{color:#666;background:#BBB}.btn.gray-dark{color:#333;border-color:#333}.btn.gray-dark.solid,.btn.gray-dark:hover{color:#FFF;background:#333}.btn.black{color:#000;border-color:#000}.btn.black.solid,.btn.black:hover{color:#FFF;background:#000}.btn.red{color:#C9282E;border-color:#C9282E}.btn.red.solid,.btn.red:hover{color:#FFF;background:#C9282E}.btn.orange{color:#E16E00;border-color:#E16E00}.btn.orange.solid,.btn.orange:hover{color:#FFF;background:#E16E00}.btn.yellow{color:#D5B778;border-color:#D5B778}.btn.yellow.solid,.btn.yellow:hover{color:#FFF;background:#D5B778}.btn.blue{color:#5A9FC8;border-color:#5A9FC8}.btn.blue.solid,.btn.blue:hover{color:#FFF;background:#5A9FC8}.btn.green{color:#6BAF56;border-color:#6BAF56}.btn.green.solid,.btn.green:hover{color:#FFF;background:#6BAF56}.btn.solid:hover,.btn.solid:active{opacity:0.8}.btn.no-outline{border-color:transparent}.btn.large{font-size:1.2em;padding:0.8em 1.7em;word-wrap:normal}.btn.small{padding:0.5em 0.9em;font-size:0.9em}.btn.tiny{padding:0.3em 0.8em;font-size:0.8em}.btn.round{border-radius:99em}.btn:hover{transition:all 200ms ease-in-out;opacity:0.8}.btn:disabled,.btn.disabled,.btn:disabled:hover,.btn.disabled:hover{cursor:default;background:transparent;color:#666;opacity:0.2}@-moz-document url-prefix(){.btn{padding:0.78em 1.5em}}.footer{color:#BBB;padding:3em 1em;background:#FAFAFA}.footer hr{background:rgba(0,0,0,0.1)}.footer ul{list-style:none;margin:0;padding:0}.footer li{display:inline;padding:0 0.5em}.footer a{color:#666;display:inline-block;line-height:3}.footer a:hover{color:#FF0008}@media screen and (max-width: 667px){.footer li,.footer a{display:block}.footer a{padding:1em;line-height:2}.footer .line{display:none}}.full-width-forms .btn:not([type='checkbox']):not([type='radio']),.full-width-forms a:not([type='checkbox']):not([type='radio']),.full-width-forms button:not([type='checkbox']):not([type='radio']),.full-width-forms submit:not([type='checkbox']):not([type='radio']),.full-width-forms select:not([type='checkbox']):not([type='radio']),.full-width-forms textarea:not([type='checkbox']):not([type='radio']),.full-width-forms input:not([type='checkbox']):not([type='radio']){width:100%}fieldset{border-radius:0.15em;border:1px solid #f5f5f5;margin:1em 0}fieldset legend{font-weight:400;padding:0 0.25em}input,select,textarea{-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;border-radius:0.15em;border:1px solid #ddd;box-shadow:none;color:#444;display:block;font-family:"Helvetica Neue", Helvetica, Sans-Serif;font-size:inherit;outline:none;padding:0.49em 0.5em}input:hover,input:focus,select:hover,select:focus,textarea:hover,textarea:focus{border-color:#FF0008;transition:all 200ms ease-in-out}input:focus,select:focus,textarea:focus{box-shadow:0 0 10px rgba(255,0,0,0.2)}textarea{padding:0.5em}select{background-image:url('data:image/svg+xml;utf8,');background-color:#FFF;background-size:1em;background-repeat:no-repeat;background-position:99% 50%;line-height:1.1;padding:0.78em 0.5em;padding-right:1.4em}input:not(.btn):not([type='checkbox']):not([type='radio']){min-height:2.7em}input[type='file']{background-color:#FFF;width:100%;font-size:12px;padding:1.02em 0.5em}input[type='range']{padding:0.87em 0.1em}input[type='range']:focus{outline:0}input[type='search']{box-sizing:border-box !important;-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}input[type='checkbox'],input[type='radio']{background-color:#FFF;border:1px solid #888;display:inline-block;height:1em;margin:0 0.3em -0.1em 0;padding:0;position:relative;top:0;width:1em;overflow:hidden}input[type='checkbox']:checked,input[type='radio']:checked{background-color:#C9282E;border-color:#C9282E}input[type='checkbox']:disabled,input[type='radio']:disabled{opacity:0.3}input[type='checkbox']{border-radius:0.15em}input[type='checkbox']:checked{border:none}input[type='checkbox']:checked:before{bottom:0;color:white;content:"";font-family:"icons", helvetica, Sans-Serif;font-size:1em;left:0;line-height:1;position:absolute;right:0;text-align:center;top:0}input[type='radio']{border-radius:99em}input[type='radio']:checked:before{color:white;content:" ";height:1em;overflow:hidden;position:absolute;text-align:center;top:0;width:1em}@media screen and (-webkit-min-device-pixel-ratio: 0){input:not(.btn):not([type='checkbox']):not([type='radio']),select,textarea{min-height:2.7em}}@-moz-document url-prefix(){input[type='file']{padding:1em 0.5em}input[type='range']{border:0;margin:0.6em 0 0 0}select{padding:0.641em 0.5em}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000;transition:none}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){select{padding:0.65em 0.5em;padding-right:0.5em}input[type='file']::-ms-value{background:#FFF}input[type='file']::-ms-value,input[type='file']::-ms-value{box-shadow:none;border:0}input[type='range']{border-color:transparent}}.ie8 select,.ie9 select{padding:0.65em 0.5em;padding-right:0.5em}.ie8 input[type='checkbox'],.ie8 input[type='radio'],.ie9 input[type='checkbox'],.ie9 input[type='radio']{background:transparent;border:0}.ie8 input[type='checkbox']:checked,.ie8 input[type='radio']:checked,.ie9 input[type='checkbox']:checked,.ie9 input[type='radio']:checked{background-color:transparent;border-color:transparent}.ie8 input[type='checkbox']:focus,.ie8 input[type='radio']:focus,.ie9 input[type='checkbox']:focus,.ie9 input[type='radio']:focus{border:0}.ie8 input[type='file'],.ie9 input[type='file']{height:3.8em}.ie8 input[type='range'],.ie9 input[type='range']{height:2em;line-height:0}.header{background:#FFF;height:4.25em;transform:translateZ(0)}.header .section{padding:0;position:relative}.header .logo{border:0;color:#C9282E;float:left;line-height:1;padding:0.6em 1em;max-height:4.25em;overflow:hidden}.header .logo:hover{background:none}.header .logo:hover i{color:#FF0008;transition:all 200ms ease-in-out}nav a{display:block;padding:1.3em}nav a:hover{background:#F5F5F5}nav ul{padding:0;margin:0}nav ul li{background:#FFF;display:inline;float:left;position:relative}nav ul li ul{left:0;top:100%}nav ul ul{display:none}nav li:hover>ul{display:block;position:absolute;width:12.5em;z-index:9000}nav li:hover>ul li{width:100%}nav ul ul li:hover>ul{left:auto;right:-12.5em;top:0}#menu-toggle,#menu-toggle-label{cursor:pointer;display:none;height:4.25em;position:absolute;right:0;user-select:none;width:4.25em}#menu-toggle{border-radius:0;border:0;box-shadow:none;margin:0;outline:none;padding:0;z-index:-1}#menu-toggle:hover{background:#F5F5F5}#menu-toggle:before{content:"";font-family:"icons", helvetica, Sans-Serif;font-size:2em;padding:0.24em 0.5em;position:absolute;right:0}#menu-toggle:checked{background:#F5F5F5}#menu-toggle:checked:before{bottom:0;color:#444;content:"";font-size:3em;left:0;line-height:0;padding:0.7em 0;position:absolute;right:0;top:0}@media screen and (max-width: 860px){.header .logo{padding:0.6em}#menu-toggle,#menu-toggle-label{display:block}nav a{border-top:1px solid #eee;padding:1em}nav ul li ul{display:block}nav ul li{border-right:none;display:block;float:left;width:100%;text-align:center}nav ul li a{background:#F5F5F5}nav>ul{clear:both;display:none}nav>input:checked+ul{display:block}nav li:hover ul{position:relative;width:auto}nav ul ul li:hover>ul{left:auto;right:auto;top:auto}}.hero{color:#FFF;background:#A8002D;background:linear-gradient(to bottom right, #C9282E, #A60052)}.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero h6{margin:0;line-height:1.3}.hero h1{font-size:3em}.hero h2{font-size:1.8em}.hero h3{font-size:1.6em}.hero h4{font-size:1.4em}.hero h5{font-size:1.2em}.hero h6{font-size:1em}.hero .section{padding:5em 1.5em}@media screen and (max-width: 667px){.hero .section{padding:4em 1em}.hero h1{font-size:2.4em}}.load{-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:loading;-webkit-animation-timing-function:linear;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:loading;-moz-animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite;animation-name:loading;animation-timing-function:linear;border-radius:99em;border:3px solid #DDD;border-left-color:#666;display:inline-block;height:2em;width:2em}.load.smallest{width:9px;height:9px;border-width:1px}.load.small{width:16px;height:16px;border-width:2px}.load.large{width:48px;height:48px;border-width:4px}@keyframes loading{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes loading{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes loading{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}.ie8 .load,.ie9 .load{border-color:transparent;line-height:1;font-size:32px;width:32px;height:32px;display:inline}.ie8 .load:after,.ie9 .load:after{content:"";font-family:"icons", helvetica, Sans-Serif}.ie8 .load.smallest,.ie9 .load.smallest{font-size:9px;width:9px;height:9px;border-width:0.1em}.ie8 .load.small,.ie9 .load.small{font-size:16px;width:16px;height:16px;border-width:0.1em}.ie8 .load.large,.ie9 .load.large{font-size:48px;width:48px;height:48px}.notice{background:#FFE0A3;text-align:center}.notice .section{position:relative;padding-right:3em}.notice i.icon-close-outline{cursor:pointer;font-size:2em;line-height:1.91;position:absolute;right:0.5em;top:0}.notice i.icon-close-outline:hover:before{content:""}.pagination{margin:1em 0;padding:1em;text-align:center}.pagination a,.pagination .current,.pagination .next_page,.pagination .previous_page{background:transparent;border-radius:99em;border:1px solid #BBB;color:#666;display:inline-block;font-size:1em;margin:0.5%;min-height:2.6em;padding:0.4em 1em}.pagination a.current,.pagination a:hover,.pagination .current.current,.pagination .current:hover,.pagination .next_page.current,.pagination .next_page:hover,.pagination .previous_page.current,.pagination .previous_page:hover{background:#BBB;color:#FFF;transition:all 200ms ease-in-out}.pagination .next_page,.pagination .previous_page{min-width:9em}@media screen and (max-width: 667px){.pagination a,.pagination .current,.pagination .gap{margin:0 1em 1em 0}.pagination .next_page,.pagination .previous_page{width:9em;display:block;margin:0 auto 1em auto}}table{width:100%;margin:1em 0;border-spacing:0;border-collapse:separate}th{font-weight:400;color:#000;text-align:left}td{border-top:1px solid #EEE}td,th{padding:0.5em;text-align:left;vertical-align:top}tfoot tr{border-bottom:0}@media screen and (max-width: 667px){tr,td,th{display:block}tr{padding:1em 0;border-top:1px solid #EEE}tr:first-child{border-top:0}thead{display:none}td{clear:both;border:none}td,th{padding:0.25em 0}}.tabs-block{background:transparent;border-bottom:1px solid #EEE}.tabs-block .col{text-align:center;position:relative}.tabs-block .col:last-child{border-right:0}.tabs-block .col:hover,.tabs-block .col.here{background:#EEE;transition:all 200ms ease-in-out}.tabs-block a{width:100%;display:inline-block;padding:0.5em;color:#444}.tabs{display:inline-block;list-style:none;margin:1em 0;padding:0;width:100%}.tabs a{border-radius:0.15em;border:1px solid transparent;padding:0.65em 1em;color:#444}.tabs li{display:inline-block;padding:0 0.5%}.tabs li:hover a,.tabs li.here a{transition:all 200ms ease-in-out;background:#EEE}.tabs ul{padding:0}.tabs.round li a{border-radius:99em}@media screen and (max-width: 860px){.tabs-block a,.tabs a{margin:0.5% 0;padding:0.65em 0.5em;display:block;text-align:center}.tabs-block{border-bottom:0}.tabs li{display:block;padding:0}}.highlight code{width:100%}.hll{background-color:#f8f8f8;border:1px solid #ccc;padding:6px 10px;border-radius:3px}.c{color:#999988;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k,.o{font-weight:bold}.cm{color:#999988;font-style:italic}.cp{color:#999999;font-weight:bold}.c1{color:#999988;font-style:italic}.cs{color:#999999;font-weight:bold;font-style:italic}.gd{color:#000000;background-color:#ffdddd}.gd .x{color:#000000;background-color:#ffaaaa}.ge{font-style:italic}.gr{color:#aa0000}.gh{color:#999999}.gi{color:#000000;background-color:#ddffdd}.gi .x{color:#000000;background-color:#aaffaa}.go{color:#888888}.gp{color:#555555}.gs{font-weight:bold}.gu{color:#800080;font-weight:bold}.gt{color:#aa0000}.kc,.kd,.kn,.kp,.kr{font-weight:bold}.kt{color:#445588;font-weight:bold}.m{color:#009999}.s{color:#dd1144}.n{color:#333333}.na{color:teal}.nb{color:#0086b3}.nc{color:#445588;font-weight:bold}.no{color:teal}.ni{color:purple}.ne,.nf{color:#990000;font-weight:bold}.nn{color:#555555}.nt{color:navy}.nv{color:teal}.ow{font-weight:bold}.w{color:#bbbbbb}.mf,.mh,.mi,.mo{color:#009999}.sb,.sc,.sd,.s2,.se,.sh,.si,.sx{color:#dd1144}.sr{color:#009926}.s1{color:#dd1144}.ss{color:#990073}.bp{color:#999999}.vc,.vg,.vi{color:teal}.il{color:#009999}.gc{color:#999;background-color:#EAF2F5}ul.list,ol.list{margin-left:1em;padding-left:1em}ul.list li{list-style:disc}ol.list li{list-style:decimal}.align-left{text-align:left}.align-right{text-align:right}.break-word{word-break:break-all}.no-wrap{white-space:nowrap}.thin{font-weight:100}.uppercase{text-transform:uppercase}.light-text *,.light-text a{color:white}.light-text a{text-decoration:underline}.auto{margin:0 auto}.block{display:block}.center{text-align:center}.clear{clear:both}.float-left{float:left}.float-right{float:right}.inline{display:inline}.inline-block{display:inline-block}.checkbox,.radio{display:block;line-height:2.2}.box{border-radius:0.15em;border:1px solid #ddd;margin:1em 0;padding:1em}.disabled{color:#BBB}.radius{border-radius:0.15em}.round{border-radius:99em}.opacity-half{opacity:0.5}.gray{color:#666}.gray-medium{color:#999}.gray-light{color:#BBB}.gray-lighter{color:#EEE}.gray-lightest{color:#F9F9F9}.bg{background:#F9F9F9}.bg-black{background:#252525;background:linear-gradient(to bottom right, #222, #333)}.bg-gray{background:#9A9A9A;background:linear-gradient(to bottom right, #888, #CCC)}.bg-blue{background:#1C6AB9;background:linear-gradient(to bottom right, #25639A, #1F9CEA)}.bg-red{background:#A8002D;background:linear-gradient(to bottom right, #C9282E, #A60052)}.bg-green{background:#52BB5C;background:linear-gradient(to bottom right, #73B558, #45D093)}.hide{display:none}.show{display:block}.full{width:100%}.space:after{content:" "}.i2x{font-size:2em}.i3x{font-size:3em}.i4x{font-size:4em}.i5x{font-size:5em}.same-width{text-align:center;width:2em;display:inline-block}@media screen and (max-width: 667px){.space,.hide-on-mobile{display:none}.responsive{width:100%}}@media screen and (max-width: 334px){.responsive-landscape{width:100%}} 2 | -------------------------------------------------------------------------------- /releases/v1.0.1/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.0.1/fonts/icons.eot -------------------------------------------------------------------------------- /releases/v1.0.1/fonts/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by FontForge 20150828 at Fri Apr 29 13:11:31 2016 9 | By Body Taing 10 | Copyright (c) 2016, Body Taing 11 | 12 | 13 | 14 | 27 | 28 | 30 | 32 | 35 | 37 | 39 | 41 | 43 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /releases/v1.0.1/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.0.1/fonts/icons.ttf -------------------------------------------------------------------------------- /releases/v1.0.1/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.0.1/fonts/icons.woff -------------------------------------------------------------------------------- /releases/v1.0.1/stylesheets/vital.min.css: -------------------------------------------------------------------------------- 1 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit}optgroup{font-weight:bold}button,input,select{overflow:visible}button,input,select,textarea{margin:0}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}@font-face{font-family:"icons";src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/fonts/icons.eot");src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/fonts/icons.eot?#iefix") format("embedded-opentype"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/fonts/icons.woff") format("woff"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/fonts/icons.ttf") format("truetype"),url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/fonts/icons.svg#icons") format("svg");font-weight:normal;font-style:normal}@media screen and (-webkit-min-device-pixel-ratio: 0){@font-face{font-family:"icons";src:url("https://cdn.rawgit.com/doximity/vital/master/releases/v1.0.1/fonts/icons.svg#icons") format("svg")}}[data-icon]:before{content:attr(data-icon)}[data-icon]:before,.icon-arrow-updown:before,.icon-check:before,.icon-clock:before,.icon-close:before,.icon-close-empty:before,.icon-close-outline:before,.icon-menu:before,.icon-vital:before{display:inline-block;font-family:"icons";font-style:normal;font-weight:normal;font-variant:normal;line-height:1;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}.icon-arrow-updown:before{content:"\f109"}.icon-check:before{content:"\f100"}.icon-clock:before{content:"\f10b"}.icon-close:before{content:"\f102"}.icon-close-empty:before{content:"\f103"}.icon-close-outline:before{content:"\f104"}.icon-menu:before{content:"\f10a"}.icon-vital:before{content:"\f101"}[class*='col-']{float:left}.col-1-3{width:33.33%}.col-2-3{width:66.66%}.col-1-2{width:50%}.col-1-4{width:25%}.col-3-4{width:75%}.col-1-5{width:20%}.col-1-8{width:12.5%}.autogrid{display:table;table-layout:fixed;width:100%}.col{width:auto;display:table-cell;vertical-align:top}.padded [class*='col-'],.padded .col{padding-left:2%;padding-right:2%}.right-padded [class*='col-'],.right-padded .col{padding-right:2%}@media screen and (max-width: 860px){[class*='col-'],.col{width:100%}.col{display:block}.right-padded [class*='col-'],.right-padded .col{padding:0}}*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}html,body{height:100%;width:100%}body{background:#FAFAFA;color:#444;font:17px/1.7 "Helvetica Neue", Helvetica, Sans-Serif}body:after{content:"";display:table;clear:both}img{height:auto;border-radius:0.15em}h1,h2,h3,h4,h5,h6,p,ul,ol,div{font-weight:300}h1,h2,h3,h4,h5,h6,p,ul,ol{margin:1em 0;margin:1rem 0}h1,h2,h3,h4,h5,h6{line-height:1.5}ul,ol{padding:0}li{list-style:none}a{color:#C9282E;text-decoration:none;outline:0}a:hover{color:#FF0008;transition:color 200ms ease-in-out}a:focus{outline:none}blockquote{margin:1em 0;padding:0 1em;border-left:0.4em solid #EEE}strong,b,.bold{font-weight:500}hr{border:none;background:#EEE;clear:both;margin:1.5em auto;height:1px}hr.half{width:50%}hr.small{width:5em}pre{white-space:pre-wrap;word-break:break-all}code{color:#333;font-family:"Monaco", Menlo, Courier;font-size:0.7em;background:#EEE;padding:0.9em 0.8em;margin:0 0.3em 0 0.2em;border-radius:0.15em;display:inline-block;word-break:break-word}p code{display:inline;padding:0.1em 0.4em 0.1em 0.3em;margin:0 0.3em 0 0}dl{display:table;width:100%}dt,dd{display:table-cell;vertical-align:top;float:left;clear:both}dt{color:#666;font-size:0.85em}dd{color:black;font-weight:400;padding-bottom:0.3em}dd:after{content:" "}dd i{margin:0 1em 0 0}.contents{background:white;min-height:24em}.row{clear:both;width:100%}.section{padding:1em;margin:0 auto;width:90%}@media screen and (min-width: 1440px){.section{width:70%}}@media screen and (min-width: 1680px){.section{width:60%}}@media screen and (max-width: 860px){.section{width:100%}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){strong,b,.bold{font-weight:500}}.ie8 strong,.ie8 b,.ie8 .bold,.ie9 strong,.ie9 b,.ie9 .bold{font-weight:500}.btn{-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border-radius:0.15em;border:1px solid #666;box-shadow:none;color:#666;cursor:pointer;display:inline-block;font-size:1.05em;height:auto;line-height:1;margin:0;outline:none;padding:0.76em 1.5em;text-align:center;text-decoration:none;user-select:none;white-space:nowrap}.btn:hover{border-color:#666}.btn.solid,.btn:hover{color:#FFF;background:#666}.btn.white{color:#FFF;border-color:#FFF}.btn.white.solid,.btn.white:hover{color:#000;background:#FFF}.btn.gray-light{color:#BBB;border-color:#BBB}.btn.gray-light.solid,.btn.gray-light:hover{color:#666;background:#BBB}.btn.gray-dark{color:#333;border-color:#333}.btn.gray-dark.solid,.btn.gray-dark:hover{color:#FFF;background:#333}.btn.black{color:#000;border-color:#000}.btn.black.solid,.btn.black:hover{color:#FFF;background:#000}.btn.red{color:#C9282E;border-color:#C9282E}.btn.red.solid,.btn.red:hover{color:#FFF;background:#C9282E}.btn.orange{color:#E16E00;border-color:#E16E00}.btn.orange.solid,.btn.orange:hover{color:#FFF;background:#E16E00}.btn.yellow{color:#D5B778;border-color:#D5B778}.btn.yellow.solid,.btn.yellow:hover{color:#FFF;background:#D5B778}.btn.blue{color:#5A9FC8;border-color:#5A9FC8}.btn.blue.solid,.btn.blue:hover{color:#FFF;background:#5A9FC8}.btn.green{color:#6BAF56;border-color:#6BAF56}.btn.green.solid,.btn.green:hover{color:#FFF;background:#6BAF56}.btn.solid:hover,.btn.solid:active{opacity:0.8}.btn.no-outline{border-color:transparent}.btn.large{font-size:1.2em;padding:0.8em 1.7em;word-wrap:normal}.btn.small{padding:0.5em 0.9em;font-size:0.9em}.btn.tiny{padding:0.3em 0.8em;font-size:0.8em}.btn.round{border-radius:99em}.btn:hover{transition:all 200ms ease-in-out;opacity:0.8}.btn:disabled,.btn.disabled,.btn:disabled:hover,.btn.disabled:hover{cursor:default;background:transparent;color:#666;opacity:0.2}@-moz-document url-prefix(){.btn{padding:0.78em 1.5em}}.footer{color:#BBB;padding:3em 1em;background:#FAFAFA}.footer hr{background:rgba(0,0,0,0.1)}.footer ul{list-style:none;margin:0;padding:0}.footer li{display:inline;padding:0 0.5em}.footer a{color:#666;display:inline-block;line-height:3}.footer a:hover{color:#FF0008}@media screen and (max-width: 667px){.footer li,.footer a{display:block}.footer a{padding:1em;line-height:2}.footer .line{display:none}}.full-width-forms .btn:not([type='checkbox']):not([type='radio']),.full-width-forms a:not([type='checkbox']):not([type='radio']),.full-width-forms button:not([type='checkbox']):not([type='radio']),.full-width-forms submit:not([type='checkbox']):not([type='radio']),.full-width-forms select:not([type='checkbox']):not([type='radio']),.full-width-forms textarea:not([type='checkbox']):not([type='radio']),.full-width-forms input:not([type='checkbox']):not([type='radio']){width:100%}fieldset{border-radius:0.15em;border:1px solid #f5f5f5;margin:1em 0}fieldset legend{font-weight:400;padding:0 0.25em}input,select,textarea{-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none;border-radius:0.15em;border:1px solid #ddd;box-shadow:none;color:#444;display:block;font-family:"Helvetica Neue", Helvetica, Sans-Serif;font-size:inherit;outline:none;padding:0.49em 0.5em}input:hover,input:focus,select:hover,select:focus,textarea:hover,textarea:focus{border-color:#FF0008;transition:all 200ms ease-in-out}input:focus,select:focus,textarea:focus{box-shadow:0 0 10px rgba(255,0,0,0.2)}textarea{padding:0.5em}select{background-image:url('data:image/svg+xml;utf8,');background-color:#FFF;background-size:1em;background-repeat:no-repeat;background-position:99% 50%;line-height:1.1;padding:0.78em 0.5em;padding-right:1.4em}input:not(.btn):not([type='checkbox']):not([type='radio']){min-height:2.7em}input[type='file']{background-color:#FFF;width:100%;font-size:12px;padding:1.02em 0.5em}input[type='range']{padding:0.87em 0.1em}input[type='range']:focus{outline:0}input[type='search']{box-sizing:border-box !important;-moz-appearance:none;-o-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}input[type='checkbox'],input[type='radio']{background-color:#FFF;border:1px solid #888;display:inline-block;height:1em;margin:0 0.3em -0.1em 0;padding:0;position:relative;top:0;width:1em;overflow:hidden}input[type='checkbox']:checked,input[type='radio']:checked{background-color:#C9282E;border-color:#C9282E}input[type='checkbox']:disabled,input[type='radio']:disabled{opacity:0.3}input[type='checkbox']{border-radius:0.15em}input[type='checkbox']:checked{border:none}input[type='checkbox']:checked:before{bottom:0;color:white;content:"";font-family:"icons", helvetica, Sans-Serif;font-size:1em;left:0;line-height:1;position:absolute;right:0;text-align:center;top:0}input[type='radio']{border-radius:99em}input[type='radio']:checked:before{color:white;content:" ";height:1em;overflow:hidden;position:absolute;text-align:center;top:0;width:1em}@media screen and (-webkit-min-device-pixel-ratio: 0){input:not(.btn):not([type='checkbox']):not([type='radio']),select,textarea{min-height:2.7em}}@-moz-document url-prefix(){input[type='file']{padding:1em 0.5em}input[type='range']{border:0;margin:0.6em 0 0 0}select{padding:0.641em 0.5em}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000;transition:none}}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){select{padding:0.65em 0.5em;padding-right:0.5em}input[type='file']::-ms-value{background:#FFF}input[type='file']::-ms-value,input[type='file']::-ms-value{box-shadow:none;border:0}input[type='range']{border-color:transparent}}.ie8 select,.ie9 select{padding:0.65em 0.5em;padding-right:0.5em}.ie8 input[type='checkbox'],.ie8 input[type='radio'],.ie9 input[type='checkbox'],.ie9 input[type='radio']{background:transparent;border:0}.ie8 input[type='checkbox']:checked,.ie8 input[type='radio']:checked,.ie9 input[type='checkbox']:checked,.ie9 input[type='radio']:checked{background-color:transparent;border-color:transparent}.ie8 input[type='checkbox']:focus,.ie8 input[type='radio']:focus,.ie9 input[type='checkbox']:focus,.ie9 input[type='radio']:focus{border:0}.ie8 input[type='file'],.ie9 input[type='file']{height:3.8em}.ie8 input[type='range'],.ie9 input[type='range']{height:2em;line-height:0}.header{background:#FFF;height:4.25em;transform:translateZ(0)}.header .section{padding:0;position:relative}.header .logo{border:0;color:#C9282E;float:left;line-height:1;padding:0.6em 1em;max-height:4.25em;overflow:hidden}.header .logo:hover{background:none}.header .logo:hover i{color:#FF0008;transition:all 200ms ease-in-out}.header nav a{display:block;padding:1.3em}.header nav a:hover{background:#F5F5F5}.header nav ul{padding:0;margin:0}.header nav ul li{background:#FFF;display:inline;float:left;position:relative}.header nav ul li ul{left:0;top:100%}.header nav ul ul{display:none}.header nav li:hover>ul{display:block;position:absolute;width:12.5em;z-index:9000}.header nav li:hover>ul li{width:100%}.header nav ul ul li:hover>ul{left:auto;right:-12.5em;top:0}#menu-toggle,#menu-toggle-label{cursor:pointer;display:none;height:4.25em;position:absolute;right:0;user-select:none;width:4.25em}#menu-toggle{border-radius:0;border:0;box-shadow:none;margin:0;outline:none;padding:0;z-index:-1}#menu-toggle:hover{background:#F5F5F5}#menu-toggle:before{content:"";font-family:"icons", helvetica, Sans-Serif;font-size:2em;padding:0.24em 0.5em;position:absolute;right:0}#menu-toggle:checked{background:#F5F5F5}#menu-toggle:checked:before{bottom:0;color:#444;content:"";font-size:3em;left:0;line-height:0;padding:0.7em 0;position:absolute;right:0;top:0}@media screen and (max-width: 860px){.header .logo{padding:0.6em}.header nav a{border-top:1px solid #eee;padding:1em}.header nav ul li ul{display:block}.header nav ul li{border-right:none;display:block;float:left;width:100%;text-align:center}.header nav ul li a{background:#F5F5F5}.header nav>ul{clear:both;display:none}.header nav>input:checked+ul{display:block}.header nav li:hover ul{position:relative;width:auto}.header nav ul ul li:hover>ul{left:auto;right:auto;top:auto}#menu-toggle,#menu-toggle-label{display:block}}.hero{color:#FFF;background:#A8002D;background:linear-gradient(to bottom right, #C9282E, #A60052)}.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero h6{margin:0;line-height:1.3}.hero h1{font-size:3em}.hero h2{font-size:1.8em}.hero h3{font-size:1.6em}.hero h4{font-size:1.4em}.hero h5{font-size:1.2em}.hero h6{font-size:1em}.hero .section{padding:5em 1.5em}@media screen and (max-width: 667px){.hero .section{padding:4em 1em}.hero h1{font-size:2.4em}}.load{-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:loading;-webkit-animation-timing-function:linear;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-name:loading;-moz-animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite;animation-name:loading;animation-timing-function:linear;border-radius:99em;border:3px solid #DDD;border-left-color:#666;display:inline-block;height:2em;width:2em}.load.smallest{width:9px;height:9px;border-width:1px}.load.small{width:16px;height:16px;border-width:2px}.load.large{width:48px;height:48px;border-width:4px}@keyframes loading{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes loading{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes loading{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}.ie8 .load,.ie9 .load{border-color:transparent;line-height:1;font-size:32px;width:32px;height:32px;display:inline}.ie8 .load:after,.ie9 .load:after{content:"";font-family:"icons", helvetica, Sans-Serif}.ie8 .load.smallest,.ie9 .load.smallest{font-size:9px;width:9px;height:9px;border-width:0.1em}.ie8 .load.small,.ie9 .load.small{font-size:16px;width:16px;height:16px;border-width:0.1em}.ie8 .load.large,.ie9 .load.large{font-size:48px;width:48px;height:48px}.notice{background:#FFE0A3;text-align:center}.notice .section{position:relative;padding-right:3em}.notice i.icon-close-outline{cursor:pointer;font-size:2em;line-height:1.91;position:absolute;right:0.5em;top:0}.notice i.icon-close-outline:hover:before{content:""}.pagination{margin:1em 0;padding:1em;text-align:center}.pagination a,.pagination .current,.pagination .next_page,.pagination .previous_page{background:transparent;border-radius:99em;border:1px solid #BBB;color:#666;display:inline-block;font-size:1em;margin:0.5%;min-height:2.6em;padding:0.4em 1em}.pagination a.current,.pagination a:hover,.pagination .current.current,.pagination .current:hover,.pagination .next_page.current,.pagination .next_page:hover,.pagination .previous_page.current,.pagination .previous_page:hover{background:#BBB;color:#FFF;transition:all 200ms ease-in-out}.pagination .next_page,.pagination .previous_page{min-width:9em}@media screen and (max-width: 667px){.pagination a,.pagination .current,.pagination .gap{margin:0 1em 1em 0}.pagination .next_page,.pagination .previous_page{width:9em;display:block;margin:0 auto 1em auto}}table{width:100%;margin:1em 0;border-spacing:0;border-collapse:separate}th{font-weight:400;color:#000;text-align:left}td{border-top:1px solid #EEE}td,th{padding:0.5em;text-align:left;vertical-align:top}tfoot tr{border-bottom:0}@media screen and (max-width: 667px){tr,td,th{display:block}tr{padding:1em 0;border-top:1px solid #EEE}tr:first-child{border-top:0}thead{display:none}td{clear:both;border:none}td,th{padding:0.25em 0}}.tabs-block{background:transparent;border-bottom:1px solid #EEE}.tabs-block .col{text-align:center;position:relative}.tabs-block .col:last-child{border-right:0}.tabs-block .col:hover,.tabs-block .col.here{background:#EEE;transition:all 200ms ease-in-out}.tabs-block a{width:100%;display:inline-block;padding:0.5em;color:#444}.tabs{display:inline-block;list-style:none;margin:1em 0;padding:0;width:100%}.tabs a{border-radius:0.15em;border:1px solid transparent;padding:0.65em 1em;color:#444}.tabs li{display:inline-block;padding:0 0.5%}.tabs li:hover a,.tabs li.here a{transition:all 200ms ease-in-out;background:#EEE}.tabs ul{padding:0}.tabs.round li a{border-radius:99em}@media screen and (max-width: 860px){.tabs-block a,.tabs a{margin:0.5% 0;padding:0.65em 0.5em;display:block;text-align:center}.tabs-block{border-bottom:0}.tabs li{display:block;padding:0}}.highlight code{width:100%}.hll{background-color:#f8f8f8;border:1px solid #ccc;padding:6px 10px;border-radius:3px}.c{color:#999988;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k,.o{font-weight:bold}.cm{color:#999988;font-style:italic}.cp{color:#999999;font-weight:bold}.c1{color:#999988;font-style:italic}.cs{color:#999999;font-weight:bold;font-style:italic}.gd{color:#000000;background-color:#ffdddd}.gd .x{color:#000000;background-color:#ffaaaa}.ge{font-style:italic}.gr{color:#aa0000}.gh{color:#999999}.gi{color:#000000;background-color:#ddffdd}.gi .x{color:#000000;background-color:#aaffaa}.go{color:#888888}.gp{color:#555555}.gs{font-weight:bold}.gu{color:#800080;font-weight:bold}.gt{color:#aa0000}.kc,.kd,.kn,.kp,.kr{font-weight:bold}.kt{color:#445588;font-weight:bold}.m{color:#009999}.s{color:#dd1144}.n{color:#333333}.na{color:teal}.nb{color:#0086b3}.nc{color:#445588;font-weight:bold}.no{color:teal}.ni{color:purple}.ne,.nf{color:#990000;font-weight:bold}.nn{color:#555555}.nt{color:navy}.nv{color:teal}.ow{font-weight:bold}.w{color:#bbbbbb}.mf,.mh,.mi,.mo{color:#009999}.sb,.sc,.sd,.s2,.se,.sh,.si,.sx{color:#dd1144}.sr{color:#009926}.s1{color:#dd1144}.ss{color:#990073}.bp{color:#999999}.vc,.vg,.vi{color:teal}.il{color:#009999}.gc{color:#999;background-color:#EAF2F5}ul.list,ol.list{margin-left:1em;padding-left:1em}ul.list li{list-style:disc}ol.list li{list-style:decimal}.align-left{text-align:left}.align-right{text-align:right}.break-word{word-break:break-all}.no-wrap{white-space:nowrap}.thin{font-weight:100}.uppercase{text-transform:uppercase}.light-text *,.light-text a{color:white}.light-text a{text-decoration:underline}.auto{margin:0 auto}.block{display:block}.center{text-align:center}.clear{clear:both}.float-left{float:left}.float-right{float:right}.inline{display:inline}.inline-block{display:inline-block}.checkbox,.radio{display:block;line-height:2.2}.box{border-radius:0.15em;border:1px solid #ddd;margin:1em 0;padding:1em}.disabled{color:#BBB}.radius{border-radius:0.15em}.round{border-radius:99em}.opacity-half{opacity:0.5}.gray{color:#666}.gray-medium{color:#999}.gray-light{color:#BBB}.gray-lighter{color:#EEE}.gray-lightest{color:#F9F9F9}.bg{background:#F9F9F9}.bg-black{background:#252525;background:linear-gradient(to bottom right, #222, #333)}.bg-gray{background:#9A9A9A;background:linear-gradient(to bottom right, #888, #CCC)}.bg-blue{background:#1C6AB9;background:linear-gradient(to bottom right, #25639A, #1F9CEA)}.bg-red{background:#A8002D;background:linear-gradient(to bottom right, #C9282E, #A60052)}.bg-green{background:#52BB5C;background:linear-gradient(to bottom right, #73B558, #45D093)}.hide{display:none}.show{display:block}.full{width:100%}.space:after{content:" "}.i2x{font-size:2em}.i3x{font-size:3em}.i4x{font-size:4em}.i5x{font-size:5em}.same-width{text-align:center;width:2em;display:inline-block}@media screen and (max-width: 667px){.space,.hide-on-mobile{display:none}.responsive{width:100%}}@media screen and (max-width: 334px){.responsive-portrait{width:100%}} 2 | -------------------------------------------------------------------------------- /releases/v1.1.0/fonts/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.1.0/fonts/icons.eot -------------------------------------------------------------------------------- /releases/v1.1.0/fonts/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by FontForge 20150828 at Fri Apr 29 13:11:31 2016 9 | By Body Taing 10 | Copyright (c) 2016, Body Taing 11 | 12 | 13 | 14 | 27 | 28 | 30 | 32 | 35 | 37 | 39 | 41 | 43 | 46 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /releases/v1.1.0/fonts/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.1.0/fonts/icons.ttf -------------------------------------------------------------------------------- /releases/v1.1.0/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doximity/vital/e7fcf29302b48809924835de5daa60312be3b411/releases/v1.1.0/fonts/icons.woff -------------------------------------------------------------------------------- /sass/vital.css.sass: -------------------------------------------------------------------------------- 1 | @import vital/all 2 | -------------------------------------------------------------------------------- /sass/vital.sass: -------------------------------------------------------------------------------- 1 | @import vital/all 2 | -------------------------------------------------------------------------------- /sass/vital/_all.sass: -------------------------------------------------------------------------------- 1 | // Vendor 2 | 3 | @import vital/normalize 4 | 5 | // Components 6 | 7 | @import vital/variables 8 | @import vital/mixins 9 | @import vital/icons 10 | @import vital/grid 11 | 12 | @import vital/base 13 | @import vital/buttons 14 | @import vital/footer 15 | @import vital/forms 16 | @import vital/header 17 | @import vital/heroes 18 | @import vital/loaders 19 | @import vital/notice 20 | @import vital/pagination 21 | @import vital/tables 22 | @import vital/tabs 23 | @import vital/syntax 24 | @import vital/helpers 25 | 26 | // Optional Layouts 27 | 28 | @import vital/layouts/background_cards 29 | @import vital/layouts/photo_collages 30 | @import vital/layouts/feed_cards 31 | @import vital/layouts/bordered_lists 32 | -------------------------------------------------------------------------------- /sass/vital/_base.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Base 4 | 5 | * 6 | @include box-sizing(border-box) 7 | 8 | html, body 9 | height: 100% 10 | width: 100% 11 | 12 | body 13 | @include font-smoothing 14 | background: $body 15 | color: $text 16 | font: 17px / 1.7 $font 17 | &:after 18 | content: "" 19 | display: table 20 | clear: both 21 | 22 | img 23 | height: auto 24 | border-radius: $radius 25 | 26 | // Typography 27 | 28 | h1, h2, h3, h4, h5, h6 29 | font-weight: 400 30 | 31 | h1, h2, h3, h4, h5, h6, p, ul, ol 32 | margin: 1em 0 33 | margin: 1rem 0 34 | 35 | h1, h2, h3, h4, h5, h6 36 | line-height: 1.5 37 | 38 | ul, ol 39 | padding: 0 40 | li 41 | list-style: none 42 | 43 | a 44 | color: $link 45 | text-decoration: none 46 | outline: 0 47 | &:hover 48 | color: $hover 49 | transition: $color 50 | &:focus 51 | outline: none 52 | 53 | blockquote 54 | margin: 1em 0 55 | padding: 0 1em 56 | border-left: 0.4em solid $gray-lighter 57 | 58 | strong, b, .bold 59 | font-weight: $bold 60 | 61 | hr 62 | border: none 63 | background: $gray-lighter 64 | clear: both 65 | margin: 1.5em auto 66 | height: $border-width 67 | &.half 68 | width: 50% 69 | &.small 70 | width: 5em 71 | 72 | pre 73 | white-space: pre-wrap 74 | word-break: break-all 75 | 76 | code 77 | color: $gray-dark 78 | font-family: $code 79 | font-size: 0.7em 80 | background: $gray-lighter 81 | padding: 0.9em 0.8em 82 | margin: 0 0.3em 0 0.2em 83 | border-radius: $radius 84 | display: inline-block 85 | word-break: break-word 86 | p & 87 | display: inline 88 | padding: 0.1em 0.4em 0.1em 0.3em 89 | margin: 0 0.3em 0 0 90 | 91 | dl 92 | display: table 93 | width: 100% 94 | dt, dd 95 | display: table-cell 96 | vertical-align: top 97 | float: left 98 | clear: both 99 | dt 100 | color: $gray 101 | font-size: 0.85em 102 | dd 103 | color: black 104 | font-weight: 400 105 | padding-bottom: 0.3em 106 | &:after 107 | content: $non-breaking-space 108 | i 109 | margin: 0 1em 0 0 110 | 111 | .contents 112 | background: white 113 | min-height: 24em 114 | 115 | .row 116 | clear: both 117 | width: 100% 118 | 119 | .section 120 | padding: 1em 121 | margin: 0 auto 122 | width: 90% 123 | 124 | @media screen and (min-width: $desktop) 125 | 126 | .section 127 | width: 70% 128 | 129 | @media screen and (min-width: $desktop-large) 130 | 131 | .section 132 | width: 60% 133 | 134 | @media screen and (max-width: $phablet) 135 | 136 | .section 137 | width: 100% 138 | -------------------------------------------------------------------------------- /sass/vital/_buttons.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // buttons 4 | 5 | .btn 6 | @include appearance(none) 7 | background: transparent 8 | border-radius: $radius 9 | border: $border-width solid $gray 10 | box-shadow: none 11 | color: $gray 12 | cursor: pointer 13 | display: inline-block 14 | font-size: 1.05em 15 | height: auto 16 | line-height: 1 17 | margin: 0 18 | outline: none 19 | padding: 0.76em 1.5em 20 | text-align: center 21 | text-decoration: none 22 | user-select: none 23 | white-space: nowrap 24 | &:hover 25 | border-color: $gray 26 | &.solid, &:hover 27 | color: $white 28 | background: $gray 29 | 30 | // colors 31 | 32 | &.white 33 | color: $white 34 | border-color: $white 35 | &.solid, &:hover 36 | color: $black 37 | background: $white 38 | &.gray-light 39 | color: $gray-light 40 | border-color: $gray-light 41 | &.solid, &:hover 42 | color: $gray 43 | background: $gray-light 44 | &.gray-dark 45 | color: $gray-dark 46 | border-color: $gray-dark 47 | &.solid, &:hover 48 | color: $white 49 | background: $gray-dark 50 | &.black 51 | color: $black 52 | border-color: $black 53 | &.solid, &:hover 54 | color: $white 55 | background: $black 56 | &.red 57 | color: $red 58 | border-color: $red 59 | &.solid, &:hover 60 | color: $white 61 | background: $red 62 | &.orange 63 | color: $orange 64 | border-color: $orange 65 | &.solid, &:hover 66 | color: $white 67 | background: $orange 68 | &.yellow 69 | color: $yellow 70 | border-color: $yellow 71 | &.solid, &:hover 72 | color: $white 73 | background: $yellow 74 | &.blue 75 | color: $blue 76 | border-color: $blue 77 | &.solid, &:hover 78 | color: $white 79 | background: $blue 80 | &.green 81 | color: $green 82 | border-color: $green 83 | &.solid, &:hover 84 | color: $white 85 | background: $green 86 | 87 | // solids 88 | 89 | &.solid 90 | &:hover, &:active 91 | opacity: 0.8 92 | 93 | // no outline 94 | 95 | &.no-outline 96 | border-color: transparent 97 | 98 | // sizes 99 | 100 | &.large 101 | font-size: 1.2em 102 | padding: 0.8em 1.7em 103 | word-wrap: normal 104 | &.small 105 | padding: 0.5em 0.9em 106 | font-size: 0.9em 107 | &.tiny 108 | padding: 0.3em 0.8em 109 | font-size: 0.8em 110 | 111 | // shapes 112 | 113 | &.round 114 | border-radius: $round 115 | 116 | // states 117 | 118 | &:hover 119 | transition: $all 120 | opacity: 0.8 121 | 122 | &:disabled, &.disabled, &:disabled:hover, &.disabled:hover 123 | cursor: default 124 | background-color: $gray-light !important 125 | border-color: $gray-light !important 126 | color: $gray !important 127 | opacity: 0.2 128 | 129 | // Adjustments for Firefox 130 | 131 | @-moz-document url-prefix() 132 | 133 | .btn 134 | padding: 0.78em 1.5em 135 | -------------------------------------------------------------------------------- /sass/vital/_custom.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Custom 4 | // Styles that are very unique to specific pages or intended not to be re-used should go here. 5 | -------------------------------------------------------------------------------- /sass/vital/_footer.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Footer 4 | .footer 5 | color: $gray-light 6 | padding: 3em 1em 7 | background: $body 8 | hr 9 | background: rgba(0,0,0,0.1) 10 | ul 11 | list-style: none 12 | margin: 0 13 | padding: 0 14 | li 15 | display: inline 16 | padding: 0 0.5em 17 | a 18 | color: $gray 19 | display: inline-block 20 | line-height: 3 21 | &:hover 22 | color: $hover 23 | 24 | @media screen and (max-width: $handheld) 25 | 26 | .footer 27 | li, a 28 | display: block 29 | a 30 | padding: 1em 31 | line-height: 2 32 | .line 33 | display: none 34 | -------------------------------------------------------------------------------- /sass/vital/_forms.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | .full-width-forms 4 | .btn 5 | padding-left: 0.5em 6 | padding-right: 0.5em 7 | .btn, 8 | a, 9 | button, 10 | submit, 11 | select, 12 | textarea, 13 | input 14 | &:not([type='checkbox']):not([type='radio']) 15 | width: 100% 16 | 17 | fieldset 18 | border-radius: $radius 19 | border: $border-width solid #f5f5f5 20 | margin: 1em 0 21 | legend 22 | font-weight: 400 23 | padding: 0 0.25em 24 | 25 | input, select, textarea, button, .btn 26 | margin-bottom: 1px 27 | 28 | input, select, textarea 29 | @include appearance(none) 30 | border-radius: $radius 31 | border: 1px solid $gray-lighter 32 | background-color: $input-background-color 33 | box-shadow: none 34 | color: $text 35 | display: block 36 | font-size: inherit 37 | outline: none 38 | padding: 0.49em $input-left-right-padding 39 | &:hover, &:focus 40 | border-color: $gray 41 | transition: $all 42 | background-color: $input-background-color-hover 43 | &:focus 44 | border-color: $gray 45 | 46 | textarea 47 | padding: $input-left-right-padding 48 | 49 | select 50 | @include svg-background 51 | background-image: url($icon-arrow-updown) 52 | line-height: 1.1 53 | padding: 0.78em $input-left-right-padding 54 | padding-right: 1.4em 55 | 56 | input 57 | &:not(.btn):not([type='checkbox']):not([type='radio']) 58 | min-height: 2.7em 59 | 60 | &[type='file'] 61 | background-color: $input-background-color 62 | width: 100% 63 | font-size: 12px 64 | padding: 1.02em $input-left-right-padding 65 | 66 | &[type='range'] 67 | padding: 0.870em 0.1em 68 | &:focus 69 | outline: 0 70 | 71 | &[type='search'] 72 | box-sizing: border-box !important 73 | @include appearance(none) 74 | 75 | &[type='checkbox'], &[type='radio'] 76 | background-color: $input-background-color 77 | border: $border-width solid #888 78 | display: inline-block 79 | height: 1em 80 | margin: 0 0.3em -0.1em 0 81 | padding: 0 82 | position: relative 83 | top: 0 84 | width: 1em 85 | overflow: hidden 86 | &:checked 87 | background-color: $input-checkbox-checked 88 | border-color: $input-checkbox-checked 89 | &:disabled 90 | opacity: 0.3 91 | 92 | &[type='checkbox'] 93 | border-radius: $radius 94 | &:checked 95 | @include svg-background 96 | background-image: url($icon-check-inverse) 97 | border: none 98 | 99 | &[type='radio'] 100 | border-radius: $round 101 | &:checked 102 | &:before 103 | color: white 104 | content: ' ' 105 | height: 1em 106 | overflow: hidden 107 | position: absolute 108 | text-align: center 109 | top: 0 110 | width: 1em 111 | 112 | // Adjustments for iOS Safari 113 | 114 | @media screen and (-webkit-min-device-pixel-ratio: 0) 115 | 116 | input:not(.btn):not([type='checkbox']):not([type='radio']), select, textarea 117 | min-height: $input-height 118 | 119 | // Adjustments to Firefox 120 | 121 | @-moz-document url-prefix() 122 | 123 | input 124 | &[type='file'] 125 | padding: 1.0em $input-left-right-padding 126 | 127 | select 128 | padding: 0.6410em $input-left-right-padding 129 | &:-moz-focusring 130 | color: transparent 131 | text-shadow: 0 0 0 #000 132 | transition: none 133 | 134 | // Adjustments for internet explorer 10+ 135 | 136 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 137 | 138 | select 139 | padding: 0.65em $input-left-right-padding 140 | padding-right: $input-left-right-padding 141 | 142 | input 143 | &[type='file'] 144 | &::-ms-value 145 | background: $input-background-color 146 | &::-ms-value, &::-ms-value 147 | box-shadow: none 148 | border: 0 149 | &[type='range'] 150 | border-color: transparent 151 | 152 | -------------------------------------------------------------------------------- /sass/vital/_grid.sass: -------------------------------------------------------------------------------- 1 | [class*='col-'] 2 | float: left 3 | 4 | .col-1-3 5 | width: 33.33% 6 | .col-2-3 7 | width: 66.66% 8 | .col-1-2 9 | width: 50% 10 | .col-1-4 11 | width: 25% 12 | .col-3-4 13 | width: 75% 14 | .col-1-5 15 | width: 20% 16 | .col-1-8 17 | width: 12.5% 18 | 19 | .autogrid 20 | display: table 21 | table-layout: fixed 22 | width: 100% 23 | .col 24 | width: auto 25 | display: table-cell 26 | vertical-align: top 27 | 28 | @media screen and (max-width: $phablet) 29 | 30 | [class*='col-'], .col 31 | width: 100% 32 | 33 | .col 34 | display: block 35 | -------------------------------------------------------------------------------- /sass/vital/_header.sass: -------------------------------------------------------------------------------- 1 | // Header 2 | 3 | .header 4 | background: $header 5 | height: $header-height 6 | z-index: 9 7 | position: relative 8 | a 9 | cursor: pointer 10 | .section 11 | padding: 0 12 | .logo 13 | width: 4em 14 | float: left 15 | padding: 0 16 | min-height: 4.22em 17 | img 18 | margin: 0.95em 0 0 1em 19 | max-height: 2.5em 20 | &:hover 21 | background: none 22 | 23 | .menu 24 | li 25 | float: right 26 | a 27 | color: $header-link 28 | display: block 29 | font-size: 1em 30 | font-weight: 400 31 | line-height: $header-menu-line-height 32 | padding: $header-dropdown-menu-padding 33 | &:hover, &.here 34 | opacity: 0.75 35 | ul 36 | padding: 0 37 | li 38 | float: right 39 | &:first-child 40 | a 41 | padding-top: 1em 42 | &:last-child 43 | a 44 | padding-bottom: 1em 45 | a 46 | line-height: 1 47 | padding: $header-dropdown-submenu-padding 48 | 49 | .dropdown-with-avatar 50 | margin-right: 1em 51 | padding: 0.35em 52 | &:hover 53 | .dropdown-icon 54 | opacity: 1 55 | ul 56 | margin-top: 1px 57 | left: -7em 58 | text-align: right 59 | .avatar 60 | display: inline-block 61 | max-height: 3em 62 | position: relative 63 | top: 0.25em 64 | .dropdown-icon 65 | -webkit-filter: invert(1) 66 | margin: 0 0.2em 67 | opacity: 0.75 68 | position: absolute 69 | top: 1.7em 70 | width: 1em 71 | 72 | nav 73 | ul 74 | padding: 0 75 | margin: 0 76 | li 77 | display: inline 78 | float: left 79 | position: relative 80 | ul 81 | left: 0 82 | top: 100% 83 | ul 84 | display: none 85 | background: $header-menu-background-color 86 | li:hover > ul 87 | display: block 88 | position: absolute 89 | width: 12.5em 90 | z-index: 9000 91 | li 92 | width: 100% 93 | ul ul li:hover > ul 94 | left: auto 95 | right: -12.5em 96 | top: 0 97 | 98 | #menu-toggle-label, #menu-toggle 99 | display: none 100 | 101 | // Header Options 102 | 103 | .header-center 104 | nav 105 | display: inline-block 106 | .menu 107 | position: absolute 108 | right: 0 109 | .section 110 | text-align: center 111 | padding: 0 112 | .logo img 113 | margin-left: 0 114 | 115 | // Mobile 116 | 117 | @media screen and (max-width: $phablet) 118 | 119 | .header 120 | .section 121 | width: 100% 122 | [type='checkbox'] 123 | transition: none !important 124 | .icon-menu 125 | display: block 126 | position: absolute 127 | top: 0 128 | right: 0 129 | height: $header-height 130 | width: $header-height 131 | z-index: -1 132 | background-position: 50% 133 | background-repeat: no-repeat 134 | background-size: 2em 135 | background-image: url($icon-menu) 136 | #menu-toggle-label 137 | background: transparent 138 | border-radius: 0 139 | border: 0 140 | box-shadow: none 141 | cursor: pointer 142 | display: block 143 | height: $header-height - 0.05em 144 | margin: 0 145 | outline: none 146 | position: absolute 147 | right: 0 148 | user-select: none 149 | width: 4.6em 150 | #menu-toggle:checked + .icon-menu 151 | background-image: url($icon-close-empty) 152 | background-color: rgba(0,0,0,0.02) 153 | 154 | .menu 155 | * 156 | float: none 157 | margin: 0 158 | position: relative 159 | i 160 | display: none 161 | li 162 | background: $header-menu-background-color 163 | padding: 0 164 | ul 165 | padding: 0 166 | a 167 | line-height: $header-menu-line-height 168 | padding: $header-dropdown-menu-padding 169 | 170 | .dropdown-with-avatar 171 | ul 172 | left: 0 173 | right: 0 174 | .avatar, .dropdown-icon 175 | display: none 176 | 177 | nav 178 | height: $header-height 179 | border-bottom: 1px solid $header-menu-border-color 180 | a 181 | border-bottom: 1px solid $header-menu-border-color 182 | padding: 1em 183 | &.logo 184 | border-bottom: 0 185 | ul 186 | li ul 187 | display: block 188 | li 189 | border-right: none 190 | display: block 191 | float: left 192 | width: 100% 193 | text-align: center 194 | > 195 | ul 196 | clear: both 197 | display: none 198 | input:checked ~ ul 199 | display: block 200 | opacity: 1 201 | li:hover ul 202 | position: relative 203 | width: auto 204 | ul ul 205 | li:hover > ul 206 | left: auto 207 | right: auto 208 | top: auto 209 | -------------------------------------------------------------------------------- /sass/vital/_helpers.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Helpers 4 | // These helpers are here for quick adjustments. Add small reusable classes here. 5 | 6 | // Text, Typography 7 | 8 | // Lists 9 | 10 | ul, ol 11 | &.list 12 | padding-left: 1em 13 | li 14 | padding-bottom: 0.5em 15 | ul.list 16 | li 17 | list-style: disc 18 | ul 19 | margin-top: 0 20 | li 21 | list-style: circle 22 | ol.list 23 | li 24 | list-style: decimal 25 | ul 26 | margin-bottom: 0 27 | li 28 | list-style: circle 29 | 30 | .align-left 31 | text-align: left 32 | .align-right 33 | text-align: right 34 | .break-word 35 | word-break: break-all 36 | .thin 37 | font-weight: 100 38 | .uppercase 39 | text-transform: uppercase 40 | 41 | // Removals 42 | 43 | .no-wrap 44 | white-space: nowrap 45 | .no-text-margins * 46 | margin: 0 47 | .no-margin-top 48 | margin-top: 0 49 | .no-margin-bottom 50 | margin-bottom: 0 51 | .no-first-last 52 | * 53 | &:first-child 54 | margin-top: 0 55 | &:last-child 56 | margin-bottom: 0 57 | 58 | // Lighten all typography for dark backgrounds 59 | 60 | .light-text 61 | *, a 62 | color: white 63 | a:hover 64 | text-decoration: underline 65 | 66 | // Page width 67 | 68 | .narrow 69 | max-width: 34em 70 | margin: 0 auto 71 | .narrow-large 72 | max-width: 40em 73 | margin: 0 auto 74 | .narrow-small 75 | max-width: 20em 76 | margin: 0 auto 77 | 78 | // Alignment 79 | 80 | .auto 81 | margin: 0 auto 82 | .block 83 | display: block 84 | .center 85 | text-align: center 86 | .clear 87 | clear: both 88 | .float-left 89 | float: left 90 | .float-right 91 | float: right 92 | .inline 93 | display: inline 94 | .inline-block 95 | display: inline-block 96 | .padding 97 | padding: 1em 98 | 99 | // Forms 100 | 101 | .checkbox, .radio 102 | display: block 103 | line-height: 2.2 104 | 105 | // Styled Elements 106 | 107 | .box 108 | border-radius: $radius 109 | border: $border-width solid #ddd 110 | margin: 1em 0 111 | padding: 1em 112 | .disabled 113 | color: $gray-light 114 | .radius 115 | border-radius: $radius 116 | .round 117 | border-radius: $round 118 | 119 | // Colors 120 | 121 | .gray 122 | color: $gray 123 | .gray-medium 124 | color: $gray-medium 125 | .gray-light 126 | color: $gray-light 127 | .gray-lighter 128 | color: $gray-lighter 129 | .gray-lightest 130 | color: $gray-lightest 131 | 132 | // Backgrounds 133 | 134 | .bg 135 | background: $gray-lightest 136 | .bg-white 137 | background: #FFF 138 | .bg-default 139 | background: $bg-default-fallback 140 | background: $bg-default 141 | .bg-black 142 | background: $bg-black-fallback 143 | background: $bg-black 144 | .bg-gray 145 | background: $bg-gray-fallback 146 | background: $bg-gray 147 | .bg-blue 148 | background: $bg-blue-fallback 149 | background: $bg-blue 150 | .bg-red 151 | background: $bg-red-fallback 152 | background: $bg-red 153 | .bg-orange 154 | background: $bg-orange-fallback 155 | background: $bg-orange 156 | .bg-green 157 | background: $bg-green-fallback 158 | background: $bg-green 159 | 160 | // Opacities 161 | 162 | .opacity-1 163 | opacity: 0.1 164 | .opacity-2 165 | opacity: 0.2 166 | .opacity-3 167 | opacity: 0.3 168 | .opacity-4 169 | opacity: 0.4 170 | .opacity-5 171 | opacity: 0.5 172 | .opacity-6 173 | opacity: 0.6 174 | .opacity-7 175 | opacity: 0.7 176 | .opacity-8 177 | opacity: 0.8 178 | .opacity-9 179 | opacity: 0.9 180 | .opaque 181 | opacity: 1 182 | 183 | // Hide / Show 184 | 185 | .hide 186 | display: none 187 | 188 | .show 189 | display: block 190 | 191 | // Widths 192 | 193 | .full 194 | width: 100% 195 | 196 | // Manually inserting a space into an empty element 197 | 198 | .space 199 | &:after 200 | content: $non-breaking-space 201 | 202 | // Sizing 203 | 204 | .x2 205 | font-size: 2em 206 | .x3 207 | font-size: 3em 208 | .x4 209 | font-size: 4em 210 | .x5 211 | font-size: 5em 212 | 213 | .same-width 214 | text-align: center 215 | width: 2em 216 | display: inline-block 217 | 218 | // Image sizes 219 | 220 | img 221 | height: auto 222 | &.smallest 223 | width: 1em 224 | &.smaller 225 | width: 2em 226 | &.small 227 | width: 3em 228 | &.medium 229 | width: 4em 230 | &.large 231 | width: 5em 232 | &.larger 233 | width: 6em 234 | &.largest 235 | width: 7em 236 | 237 | // Grid 238 | 239 | .padded 240 | [class*='col-'], .col 241 | padding-left: $grid-padding 242 | padding-right: $grid-padding 243 | 244 | .right-padded 245 | [class*='col-'], .col 246 | padding-right: $grid-padding 247 | 248 | @media screen and (max-width: $phablet) 249 | 250 | .right-padded 251 | [class*='col-'], .col 252 | padding: 0 253 | 254 | @media screen and (max-width: $handheld) 255 | 256 | // Hide these classes on the $handheld breakpoint 257 | 258 | .space, .hide-on-mobile 259 | display: none 260 | 261 | .responsive 262 | width: 100% 263 | 264 | @media screen and (max-width: $handheld-portrait) 265 | 266 | .responsive-portrait 267 | width: 100% 268 | -------------------------------------------------------------------------------- /sass/vital/_heroes.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Heroes 4 | 5 | .hero 6 | color: $white 7 | background: $bg-red-fallback 8 | background: $bg-red 9 | 10 | h1, h2, h3, h4, h5, h6 11 | margin: 0 12 | line-height: 1.3 13 | h1 14 | font-size: 3em 15 | h2 16 | font-size: 1.8em 17 | h3 18 | font-size: 1.6em 19 | h4 20 | font-size: 1.4em 21 | h5 22 | font-size: 1.2em 23 | h6 24 | font-size: 1.0em 25 | 26 | .section 27 | padding: 5em 1.5em 28 | 29 | @media screen and (max-width: $handheld) 30 | 31 | .hero 32 | .section 33 | padding: 4em 1em 34 | h1 35 | font-size: 2.4em 36 | -------------------------------------------------------------------------------- /sass/vital/_icons.sass: -------------------------------------------------------------------------------- 1 | // Framework Icons 2 | 3 | $icon-arrow-updown: 'data:image/svg+xml;utf8,' 4 | 5 | $icon-check: 'data:image/svg+xml;utf8,' 6 | 7 | $icon-check-inverse: 'data:image/svg+xml;utf8,' 8 | 9 | $icon-clock: 'data:image/svg+xml;utf8,' 10 | 11 | $icon-close: 'data:image/svg+xml;utf8,' 12 | 13 | $icon-close-empty: 'data:image/svg+xml;utf8,' 14 | 15 | $icon-close-empty-white: 'data:image/svg+xml;utf8,' 16 | 17 | $icon-close-outline: 'data:image/svg+xml;utf8,' 18 | 19 | $icon-menu: 'data:image/svg+xml;utf8,' 20 | 21 | $icon-menu-white: 'data:image/svg+xml;utf8,' 22 | -------------------------------------------------------------------------------- /sass/vital/_loaders.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Loaders 4 | 5 | .load 6 | -webkit-animation-duration: 1s 7 | -webkit-animation-iteration-count: infinite 8 | -webkit-animation-name: loading 9 | -webkit-animation-timing-function: linear 10 | -moz-animation-duration: 1s 11 | -moz-animation-iteration-count: infinite 12 | -moz-animation-name: loading 13 | -moz-animation-timing-function: linear 14 | animation-duration: 1s 15 | animation-iteration-count: infinite 16 | animation-name: loading 17 | animation-timing-function: linear 18 | border-radius: $round 19 | border: $border-width * 3 solid #DDD 20 | border-left-color: #666 21 | display: inline-block 22 | height: 2em 23 | width: 2em 24 | &.smallest 25 | width: $loader-smallest 26 | height: $loader-smallest 27 | border-width: $border-width 28 | &.small 29 | width: $loader-small 30 | height: $loader-small 31 | border-width: $border-width * 2 32 | &.large 33 | width: $loader-large 34 | height: $loader-large 35 | border-width: $border-width * 4 36 | 37 | @keyframes loading 38 | from 39 | transform: rotate(0deg) 40 | to 41 | transform: rotate(360deg) 42 | 43 | @-webkit-keyframes loading 44 | from 45 | -webkit-transform: rotate(0deg) 46 | to 47 | -webkit-transform: rotate(360deg) 48 | 49 | @-moz-keyframes loading 50 | from 51 | -moz-transform: rotate(0deg) 52 | to 53 | -moz-transform: rotate(360deg) 54 | -------------------------------------------------------------------------------- /sass/vital/_mixins.sass: -------------------------------------------------------------------------------- 1 | // Mixins 2 | 3 | @mixin appearance($appearance-variable) 4 | -moz-appearance: $appearance-variable 5 | -ms-appearance: $appearance-variable 6 | -o-appearance: $appearance-variable 7 | -webkit-appearance: $appearance-variable 8 | appearance: $appearance-variable 9 | 10 | @mixin box-sizing($box-sizing-variable) 11 | box-sizing: $box-sizing-variable 12 | -moz-box-sizing: $box-sizing-variable 13 | -webkit-box-sizing: $box-sizing-variable 14 | 15 | @mixin border-radius($border-radius-variable) 16 | -moz-border-radius: $border-radius-variable 17 | -ms-border-radius: $border-radius-variable 18 | -o-border-radius: $border-radius-variable 19 | -webkit-border-radius: $border-radius-variable 20 | border-radius: $border-radius-variable 21 | 22 | @mixin background($background-variable) 23 | -moz-background: $background-variable 24 | -ms-background: $background-variable 25 | -o-background: $background-variable 26 | -webkit-background: $background-variable 27 | 28 | @mixin background-size($background-size-variable) 29 | -moz-background-size: $background-size-variable 30 | -ms-background-size: $background-size-variable 31 | -o-background-size: $background-size-variable 32 | -webkit-background-size: $background-size-variable 33 | background-size: $background-size-variable 34 | background-repeat: no-repeat 35 | background-position: center 36 | 37 | @mixin box-shadow($box-shadow-variable) 38 | -moz-box-shadow: $box-shadow-variable 39 | -ms-box-shadow: $box-shadow-variable 40 | -o-box-shadow: $box-shadow-variable 41 | -webkit-box-shadow: $box-shadow-variable 42 | box-shadow: $box-shadow-variable 43 | 44 | @mixin color($color-variable) 45 | color: $color-variable 46 | fill: $color-variable 47 | 48 | @mixin column-count($column-count-variable) 49 | -webkit-column-count: $column-count-variable 50 | -moz-column-count: $column-count-variable 51 | -ms-column-count: $column-count-variable 52 | column-count: $column-count-variable 53 | columns: $column-count-variable 54 | 55 | @mixin filter($filter-variable) 56 | -moz-filter: $filter-variable 57 | -ms-filter: $filter-variable 58 | -o-filter: $filter-variable 59 | -webkit-filter: $filter-variable 60 | filter: $filter-variable 61 | 62 | @mixin user-select($user-select-variable) 63 | -moz-user-select: $user-select-variable 64 | -ms-user-select: $user-select-variable 65 | -o-user-select: $user-select-variable 66 | -webkit-user-select: $user-select-variable 67 | user-select: $user-select-variable 68 | 69 | @mixin object-fit($object-fit-variable) 70 | -moz-object-fit: $object-fit-variable 71 | -ms-object-fit: $object-fit-variable 72 | -o-object-fit: $object-fit-variable 73 | -webkit-object-fit: $object-fit-variable 74 | object-fit: $object-fit-variable 75 | 76 | @mixin transform($transform-variable) 77 | -webkit-transform: $transform-variable 78 | -moz-transform: $transform-variable 79 | -ms-transform: $transform-variable 80 | transform: $transform-variable 81 | 82 | @mixin transition($transition-variable) 83 | -webkit-transition: $transition-variable 84 | -moz-transition: $transition-variable 85 | -ms-transition: $transition-variable 86 | transition: $transition-variable 87 | 88 | @mixin transition-delay($transition-delay-variable) 89 | -webkit-transition-delay: $transition-delay-variable 90 | -moz-transition-delay: $transition-delay-variable 91 | -ms-transition-delay: $transition-delay-variable 92 | transition-delay: $transition-delay-variable 93 | 94 | @mixin transition-duration($transition-duration-variable) 95 | -webkit-transition-duration: $transition-duration-variable 96 | -moz-transition-duration: $transition-duration-variable 97 | -ms-transition-duration: $transition-duration-variable 98 | transition-duration: $transition-duration-variable 99 | 100 | // Pre-defined 101 | 102 | @mixin font-smoothing 103 | -moz-osx-font-smoothing: grayscale 104 | -webkit-font-smoothing: antialiased 105 | font-smoothing: antialiased 106 | 107 | @mixin svg-background 108 | background-size: 1em 109 | background-repeat: no-repeat 110 | background-position: 99% 50% 111 | 112 | @mixin vertical-align 113 | position: relative 114 | top: 50% 115 | -webkit-transform: translateY(-50%) 116 | -ms-transform: translateY(-50%) 117 | transform: translateY(-50%) 118 | -webkit-transform-style: preserve-3d 119 | -moz-transform-style: preserve-3d 120 | transform-style: preserve-3d 121 | -------------------------------------------------------------------------------- /sass/vital/_normalize.sass: -------------------------------------------------------------------------------- 1 | // ! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css 2 | 3 | // 4 | // 1. Change the default font family in all browsers (opinionated). 5 | // 2. Prevent adjustments of font size after orientation changes in IE and iOS. 6 | 7 | html 8 | font-family: sans-serif 9 | // 1 10 | -ms-text-size-adjust: 100% 11 | // 2 12 | -webkit-text-size-adjust: 100% 13 | // 2 14 | 15 | // 16 | // Remove the margin in all browsers (opinionated). 17 | 18 | body 19 | margin: 0 20 | 21 | // HTML5 display definitions 22 | // ========================================================================== 23 | 24 | // 25 | // Add the correct display in IE 9-. 26 | // 1. Add the correct display in Edge, IE, and Firefox. 27 | // 2. Add the correct display in IE. 28 | 29 | article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary 30 | // 1 31 | display: block 32 | 33 | // 34 | // Add the correct display in IE 9-. 35 | 36 | audio, canvas, progress, video 37 | display: inline-block 38 | 39 | // 40 | // Add the correct display in iOS 4-7. 41 | 42 | audio:not([controls]) 43 | display: none 44 | height: 0 45 | 46 | // 47 | // Add the correct vertical alignment in Chrome, Firefox, and Opera. 48 | 49 | progress 50 | vertical-align: baseline 51 | 52 | // 53 | // Add the correct display in IE 10-. 54 | // 1. Add the correct display in IE. 55 | 56 | template, [hidden] 57 | display: none 58 | 59 | // Links 60 | // ========================================================================== 61 | 62 | // 63 | // Remove the gray background on active links in IE 10. 64 | 65 | a 66 | background-color: transparent 67 | &:active, &:hover 68 | outline-width: 0 69 | 70 | // 71 | // Remove the outline on focused links when they are also active or hovered 72 | // in all browsers (opinionated). 73 | 74 | // Text-level semantics 75 | // ========================================================================== 76 | 77 | // 78 | // 1. Remove the bottom border in Firefox 39-. 79 | // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 80 | 81 | abbr[title] 82 | border-bottom: none 83 | // 1 84 | text-decoration: underline 85 | // 2 86 | text-decoration: underline dotted 87 | // 2 88 | 89 | // 90 | // Prevent the duplicate application of `bolder` by the next rule in Safari 6. 91 | 92 | b, strong 93 | font-weight: inherit 94 | 95 | // 96 | // Add the correct font weight in Chrome, Edge, and Safari. 97 | 98 | b, strong 99 | font-weight: bolder 100 | 101 | // 102 | // Add the correct font style in Android 4.3-. 103 | 104 | dfn 105 | font-style: italic 106 | 107 | // 108 | // Correct the font size and margin on `h1` elements within `section` and 109 | // `article` contexts in Chrome, Firefox, and Safari. 110 | 111 | h1 112 | font-size: 2em 113 | margin: 0.67em 0 114 | 115 | // 116 | // Add the correct background and color in IE 9-. 117 | 118 | mark 119 | background-color: #ff0 120 | color: #000 121 | 122 | // 123 | // Add the correct font size in all browsers. 124 | 125 | small 126 | font-size: 80% 127 | 128 | // 129 | // Prevent `sub` and `sup` elements from affecting the line height in 130 | // all browsers. 131 | 132 | sub, sup 133 | font-size: 75% 134 | line-height: 0 135 | position: relative 136 | vertical-align: baseline 137 | 138 | sub 139 | bottom: -0.25em 140 | 141 | sup 142 | top: -0.5em 143 | 144 | // Embedded content 145 | // ========================================================================== 146 | 147 | // 148 | // Remove the border on images inside links in IE 10-. 149 | 150 | img 151 | border-style: none 152 | 153 | // 154 | // Hide the overflow in IE. 155 | 156 | svg:not(:root) 157 | overflow: hidden 158 | 159 | // Grouping content 160 | // ========================================================================== 161 | 162 | // 163 | // 1. Correct the inheritance and scaling of font size in all browsers. 164 | // 2. Correct the odd `em` font sizing in all browsers. 165 | 166 | code, kbd, pre, samp 167 | font-family: monospace, monospace 168 | // 1 169 | font-size: 1em 170 | // 2 171 | 172 | // 173 | // Add the correct margin in IE 8. 174 | 175 | figure 176 | margin: 1em 40px 177 | 178 | // 179 | // 1. Add the correct box sizing in Firefox. 180 | // 2. Show the overflow in Edge and IE. 181 | 182 | hr 183 | box-sizing: content-box 184 | // 1 185 | height: 0 186 | // 1 187 | overflow: visible 188 | // 2 189 | 190 | // Forms 191 | // ========================================================================== 192 | 193 | // 194 | // Change font properties to `inherit` in all browsers (opinionated). 195 | 196 | button, input, select, textarea 197 | font: inherit 198 | 199 | // 200 | // Restore the font weight unset by the previous rule. 201 | 202 | optgroup 203 | font-weight: bold 204 | 205 | // 206 | // Show the overflow in IE. 207 | // 1. Show the overflow in Edge. 208 | // 2. Show the overflow in Edge, Firefox, and IE. 209 | 210 | button, input, select 211 | // 2 212 | overflow: visible 213 | 214 | // 215 | // Remove the margin in Safari. 216 | // 1. Remove the margin in Firefox and Safari. 217 | 218 | button, input, select, textarea 219 | // 1 220 | margin: 0 221 | 222 | // 223 | // Remove the inheritence of text transform in Edge, Firefox, and IE. 224 | // 1. Remove the inheritence of text transform in Firefox. 225 | 226 | button, select 227 | // 1 228 | text-transform: none 229 | 230 | // 231 | // Change the cursor in all browsers (opinionated). 232 | 233 | button, [type="button"], [type="reset"], [type="submit"] 234 | cursor: pointer 235 | 236 | // 237 | // Restore the default cursor to disabled elements unset by the previous rule. 238 | 239 | [disabled] 240 | cursor: default 241 | 242 | // 243 | // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 244 | // controls in Android 4. 245 | // 2. Correct the inability to style clickable types in iOS. 246 | 247 | button, html [type="button"], [type="reset"], [type="submit"] 248 | -webkit-appearance: button 249 | // 2 250 | 251 | // 252 | // Remove the inner border and padding in Firefox. 253 | 254 | button::-moz-focus-inner, input::-moz-focus-inner 255 | border: 0 256 | padding: 0 257 | 258 | // 259 | // Restore the focus styles unset by the previous rule. 260 | 261 | button:-moz-focusring, input:-moz-focusring 262 | outline: 1px dotted ButtonText 263 | 264 | // 265 | // Change the border, margin, and padding in all browsers (opinionated). 266 | 267 | fieldset 268 | border: 1px solid #c0c0c0 269 | margin: 0 2px 270 | padding: 0.35em 0.625em 0.75em 271 | 272 | // 273 | // 1. Correct the text wrapping in Edge and IE. 274 | // 2. Correct the color inheritance from `fieldset` elements in IE. 275 | // 3. Remove the padding so developers are not caught out when they zero out 276 | // `fieldset` elements in all browsers. 277 | 278 | legend 279 | box-sizing: border-box 280 | // 1 281 | color: inherit 282 | // 2 283 | display: table 284 | // 1 285 | max-width: 100% 286 | // 1 287 | padding: 0 288 | // 3 289 | white-space: normal 290 | // 1 291 | 292 | // 293 | // Remove the default vertical scrollbar in IE. 294 | 295 | textarea 296 | overflow: auto 297 | 298 | // 299 | // 1. Add the correct box sizing in IE 10-. 300 | // 2. Remove the padding in IE 10-. 301 | 302 | [type="checkbox"], [type="radio"] 303 | box-sizing: border-box 304 | // 1 305 | padding: 0 306 | // 2 307 | 308 | // 309 | // Correct the cursor style of increment and decrement buttons in Chrome. 310 | 311 | [type="number"] 312 | &::-webkit-inner-spin-button, &::-webkit-outer-spin-button 313 | height: auto 314 | 315 | // 316 | // Correct the odd appearance of search inputs in Chrome and Safari. 317 | 318 | [type="search"] 319 | -webkit-appearance: textfield 320 | &::-webkit-search-cancel-button, &::-webkit-search-decoration 321 | -webkit-appearance: none 322 | 323 | // 324 | // Remove the inner padding and cancel buttons in Chrome on OS X and 325 | // Safari on OS X. 326 | -------------------------------------------------------------------------------- /sass/vital/_notice.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Notice 4 | 5 | .notice 6 | background: $notice 7 | text-align: center 8 | .section 9 | position: relative 10 | padding: 1em 11 | 12 | .notice-message 13 | display: table 14 | width: 100% 15 | 16 | .notice-text, 17 | .notice-dismiss 18 | display: table-cell 19 | vertical-align: middle 20 | 21 | .notice-dismiss 22 | width: 3em 23 | img 24 | cursor: pointer 25 | width: 2em 26 | height: 2em 27 | float: right 28 | &:hover 29 | opacity: 0.7 30 | -------------------------------------------------------------------------------- /sass/vital/_pagination.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | .pagination 4 | margin: 1em 0 5 | padding: 1em 6 | text-align: center 7 | a, .current, .next_page, .previous_page 8 | background: transparent 9 | border-radius: $round 10 | border: 1px solid $gray-light 11 | color: $gray 12 | display: inline-block 13 | font-size: 1em 14 | margin: 0.5% 15 | min-height: 2.6em 16 | padding: 0.4em 1em 17 | &.current, &:hover 18 | background: $gray-light 19 | color: $white 20 | transition: $all 21 | .next_page, .previous_page 22 | min-width: 9em 23 | 24 | @media screen and (max-width: $handheld) 25 | 26 | .pagination 27 | a, .current, .gap 28 | margin: 0 1em 1em 0 29 | .next_page, .previous_page 30 | width: 9em 31 | display: block 32 | margin: 0 auto 1em auto 33 | -------------------------------------------------------------------------------- /sass/vital/_syntax.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Syntax Highlighting 4 | 5 | .highlight 6 | code 7 | width: 100% 8 | 9 | .hll 10 | background-color: #f8f8f8 11 | border: 1px solid #ccc 12 | padding: 6px 10px 13 | border-radius: 3px 14 | 15 | .c 16 | color: #999988 17 | font-style: italic 18 | 19 | .err 20 | color: #a61717 21 | background-color: #e3d2d2 22 | 23 | .k, .o 24 | font-weight: bold 25 | 26 | .cm 27 | color: #999988 28 | font-style: italic 29 | 30 | .cp 31 | color: #999999 32 | font-weight: bold 33 | 34 | .c1 35 | color: #999988 36 | font-style: italic 37 | 38 | .cs 39 | color: #999999 40 | font-weight: bold 41 | font-style: italic 42 | 43 | .gd 44 | color: #000000 45 | background-color: #ffdddd 46 | .x 47 | color: #000000 48 | background-color: #ffaaaa 49 | 50 | .ge 51 | font-style: italic 52 | 53 | .gr 54 | color: #aa0000 55 | 56 | .gh 57 | color: #999999 58 | 59 | .gi 60 | color: #000000 61 | background-color: #ddffdd 62 | .x 63 | color: #000000 64 | background-color: #aaffaa 65 | 66 | .go 67 | color: #888888 68 | 69 | .gp 70 | color: #555555 71 | 72 | .gs 73 | font-weight: bold 74 | 75 | .gu 76 | color: #800080 77 | font-weight: bold 78 | 79 | .gt 80 | color: #aa0000 81 | 82 | .kc, .kd, .kn, .kp, .kr 83 | font-weight: bold 84 | 85 | .kt 86 | color: #445588 87 | font-weight: bold 88 | 89 | .m 90 | color: #009999 91 | 92 | .s 93 | color: #dd1144 94 | 95 | .n 96 | color: #333333 97 | 98 | .na 99 | color: teal 100 | 101 | .nb 102 | color: #0086b3 103 | 104 | .nc 105 | color: #445588 106 | font-weight: bold 107 | 108 | .no 109 | color: teal 110 | 111 | .ni 112 | color: purple 113 | 114 | .ne, .nf 115 | color: #990000 116 | font-weight: bold 117 | 118 | .nn 119 | color: #555555 120 | 121 | .nt 122 | color: navy 123 | 124 | .nv 125 | color: teal 126 | 127 | .ow 128 | font-weight: bold 129 | 130 | .w 131 | color: #bbbbbb 132 | 133 | .mf, .mh, .mi, .mo 134 | color: #009999 135 | 136 | .sb, .sc, .sd, .s2, .se, .sh, .si, .sx 137 | color: #dd1144 138 | 139 | .sr 140 | color: #009926 141 | 142 | .s1 143 | color: #dd1144 144 | 145 | .ss 146 | color: #990073 147 | 148 | .bp 149 | color: #999999 150 | 151 | .vc, .vg, .vi 152 | color: teal 153 | 154 | .il 155 | color: #009999 156 | 157 | .gc 158 | color: #999 159 | background-color: #EAF2F5 160 | -------------------------------------------------------------------------------- /sass/vital/_tables.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Tables 4 | 5 | table 6 | width: 100% 7 | margin: 1em 0 8 | border-spacing: 0 9 | border-collapse: separate 10 | th 11 | font-weight: 400 12 | color: #000 13 | text-align: left 14 | td 15 | border-top: $border-width solid $gray-lighter 16 | 17 | td, th 18 | padding: 0.5em 19 | text-align: left 20 | vertical-align: top 21 | tfoot 22 | tr 23 | border-bottom: 0 24 | 25 | @media screen and (max-width: $handheld) 26 | 27 | tr, td, th 28 | display: block 29 | tr 30 | padding: 1em 0 31 | border-top: 1px solid $gray-lighter 32 | &:first-child 33 | border-top: 0 34 | thead 35 | display: none 36 | td 37 | clear: both 38 | border: none 39 | td, th 40 | padding: 0.25em 0 41 | -------------------------------------------------------------------------------- /sass/vital/_tabs.sass: -------------------------------------------------------------------------------- 1 | @import variables 2 | 3 | // Tabs 4 | 5 | .tabs-block 6 | background: transparent 7 | border-bottom: $border-width solid $gray-lighter 8 | .col 9 | text-align: center 10 | position: relative 11 | &:last-child 12 | border-right: 0 13 | &:hover, &.here 14 | background: $gray-lighter 15 | transition: $all 16 | a 17 | width: 100% 18 | display: inline-block 19 | padding: 0.5em 20 | color: $text 21 | 22 | .tabs 23 | display: inline-block 24 | list-style: none 25 | margin: 1em 0 26 | padding: 0 27 | width: 100% 28 | a 29 | border-radius: $radius 30 | border: $border-width solid transparent 31 | padding: 0.65em 1em 32 | color: $text 33 | li 34 | display: inline-block 35 | padding: 0 0.5% 36 | &:hover, &.here 37 | a 38 | transition: $all 39 | background: $gray-lighter 40 | & ul 41 | padding: 0 42 | &.round 43 | li a 44 | border-radius: $round 45 | 46 | @media screen and (max-width: $phablet) 47 | 48 | .tabs-block, .tabs 49 | a 50 | margin: 0.5% 0 51 | padding: 0.65em 0.5em 52 | display: block 53 | text-align: center 54 | 55 | .tabs-block 56 | border-bottom: 0 57 | 58 | .tabs 59 | li 60 | display: block 61 | padding: 0 62 | -------------------------------------------------------------------------------- /sass/vital/_variables.sass: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | // Fonts 4 | 5 | $vital-sass-asset-helper: false !default 6 | 7 | $font: "Helvetica Neue", Helvetica, Sans-Serif !default 8 | $code: "Monaco", Menlo, Courier !default 9 | $icons: "icons", helvetica, Sans-Serif !default 10 | 11 | // App Colors 12 | 13 | $notice: #FFE0A3 !default 14 | $body: #FAFAFA !default 15 | $page: #FFF !default 16 | 17 | // Base Colors 18 | 19 | $white: #FFF !default 20 | $black: #000 !default 21 | 22 | $gray-dark: #333 !default 23 | $gray: #666 !default 24 | $gray-medium: #999 !default 25 | $gray-light: #BBB !default 26 | $gray-lighter: #EEE !default 27 | $gray-lightest: #F9F9F9 !default 28 | 29 | $red-dark: #AA2227 !default 30 | $red: #C9282E !default 31 | $red-bright: #FF0008 !default 32 | 33 | $orange: #E16E00 !default 34 | $orange-bright: #F97908 !default 35 | 36 | $yellow: #D5B778 !default 37 | $yellow-bright: #F1CE86 !default 38 | 39 | $green: #6BAF56 !default 40 | $green-bright: #85DB6A !default 41 | 42 | $blue: #5A9FC8 !default 43 | $blue-bright: #66B7E7 !default 44 | 45 | // Background Colors 46 | 47 | $bg-gray-lgihter: $gray-lighter !default 48 | $bg-transparent: rgba(0,0,0,0.1) !default 49 | $bg-tab: $gray-light !default 50 | 51 | // Gradated Background Colors 52 | 53 | $bg-default: linear-gradient(to bottom right, #4B99CB, #91E1B9) !default 54 | $bg-default-fallback: #4B99CB !default 55 | $bg-red: linear-gradient(to bottom right, #C9282E, #A60052) !default 56 | $bg-red-fallback: #A8002D !default 57 | $bg-orange: linear-gradient(to bottom right, #EE495C, #F09259) !default 58 | $bg-orange-fallback: #EE495C !default 59 | $bg-green: linear-gradient(to bottom right, #73B558, #45D093) !default 60 | $bg-green-fallback: #52BB5C !default 61 | $bg-blue: linear-gradient(to bottom right, #25639A, #1F9CEA) !default 62 | $bg-blue-fallback: #1C6AB9 !default 63 | 64 | $bg-black: linear-gradient(to bottom right, #222, #333) !default 65 | $bg-black-fallback: #252525 !default 66 | $bg-gray: linear-gradient(to bottom right, #888, #CCC) !default 67 | $bg-gray-fallback: #9A9A9A !default 68 | $bg-gray-medium: linear-gradient(to bottom right, #666, #777) !default 69 | $bg-gray-medium-fallback: #666 !default 70 | $bg-gray-light: linear-gradient(to bottom right, #DDD, #EEE) !default 71 | $bg-gray-light-fallback: #DDD !default 72 | $bg-gray-lighter: linear-gradient(to bottom right, #EEE, #f9f9f9) !default 73 | $bg-gray-lighter-fallback: #EEE !default 74 | $bg-gray-lightest: linear-gradient(to bottom right, #F9F9F9, #FFF) !default 75 | $bg-gray-lightest-fallback: #F9F9F9 !default 76 | 77 | // Hover 78 | 79 | $link: $red !default 80 | $hover: $red-bright !default 81 | $focus: rgba(255,0,0,0.2) !default 82 | 83 | // Header 84 | 85 | $header-background-color: #FFF !default 86 | $header-dropdown-menu-padding: 1.24em 1.3em !default 87 | $header-dropdown-submenu-padding: 0.7em 1.5em !default 88 | $header-height: 4.25em !default 89 | $header-link-hover: #EEE !default 90 | $header-link: #333 !default 91 | $header-menu-background-color-dark: #222 !default 92 | $header-menu-background-color: #FFF !default 93 | $header-menu-border-color-dark: #111 !default 94 | $header-menu-border-color: #EEE !default 95 | $header-menu-line-height: 1.82 !default 96 | $header: #FFF !default 97 | 98 | // Typography 99 | 100 | $text: #444 !default 101 | $bold: 500 !default 102 | 103 | // Transitions 104 | 105 | $standard-animation-speed: 200ms !default 106 | $all: all $standard-animation-speed ease-in-out !default 107 | $color: color $standard-animation-speed ease-in-out !default 108 | 109 | // GPU Trickery 110 | 111 | $translate: translateZ(0) !default 112 | 113 | // Radius 114 | 115 | $radius: 0.15em !default 116 | $round: 99em !default 117 | 118 | // Grid 119 | 120 | $grid-padding: 2% !default 121 | 122 | // Loaders 123 | 124 | $loader-large: 48px !default 125 | $loader: 32px !default 126 | $loader-small: 16px !default 127 | $loader-smallest: 9px !default 128 | 129 | // Forms 130 | 131 | $size: 1em !default 132 | $border-width: 1px !default 133 | $input-left-right-padding: 0.5em !default 134 | $input-checkbox-checked: $link !default 135 | $input-background-color: #FFF !default 136 | $input-background-color-hover: #F8F8F8 !default 137 | $input-height: 2.7em !default 138 | 139 | // Breakpoints 140 | 141 | $desktop-large: 1680px !default 142 | $desktop: 1440px !default 143 | $laptop: 1280px !default 144 | $tablet: 1080px !default 145 | $phablet: 860px !default 146 | $phablet-handheld: 780px !default 147 | $handheld: 667px !default 148 | $handheld-portrait: 334px !default 149 | 150 | // Characters 151 | 152 | $non-breaking-space: '\00a0' !default 153 | 154 | // Vectors 155 | 156 | $svg-arrow-updown: 'data:image/svg+xml;utf8,' 157 | -------------------------------------------------------------------------------- /sass/vital/layouts/_background_cards.sass: -------------------------------------------------------------------------------- 1 | // Background cards 2 | 3 | .boxed-image, 4 | .boxed-action, 5 | .boxed-meta 6 | position: absolute 7 | .boxed-image, 8 | .boxed-action 9 | top: 0 10 | left: 0 11 | right: 0 12 | bottom: 0 13 | .boxed-image 14 | @include background-size(cover) 15 | .boxed-meta 16 | bottom: 0 17 | z-index: 1 18 | .boxed-action 19 | opacity: 0 20 | padding: 20% 0 0 21 | z-index: 2 22 | .boxed 23 | padding-top: 80% 24 | position: relative 25 | text-align: center 26 | &:hover 27 | .boxed-action 28 | background: rgba(255, 255, 255, .7) 29 | opacity: 1 30 | transition: $all 31 | 32 | @media screen and (max-width: $tablet) 33 | 34 | .boxed-backgrounds 35 | [class*='col-'] 36 | width: 50% 37 | .clear 38 | display: none 39 | 40 | @media screen and (max-width: $handheld) 41 | 42 | .boxed-backgrounds 43 | [class*='col-'] 44 | width: 100% 45 | -------------------------------------------------------------------------------- /sass/vital/layouts/_bordered_lists.sass: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | .bordered-list 4 | margin: 0 5 | a 6 | display: block 7 | padding: 1em 8 | li 9 | border-top: 1px solid #eee 10 | &:first-child 11 | border-top: 0 12 | .here 13 | background: #fff 14 | -------------------------------------------------------------------------------- /sass/vital/layouts/_feed_cards.sass: -------------------------------------------------------------------------------- 1 | // Post cards 2 | 3 | .feed-card 4 | background: #FFF 5 | box-shadow: 0 .1em .2em rgba(0, 0, 0, .05) 6 | padding: 1em 7 | margin: 0.3em 8 | img 9 | border-radius: 0 10 | height: auto 11 | width: 100% 12 | * 13 | margin: 0.2em 0 14 | -------------------------------------------------------------------------------- /sass/vital/layouts/_photo_collages.sass: -------------------------------------------------------------------------------- 1 | // Photo collages 2 | 3 | .boxed-text 4 | position: relative 5 | [class*='bg-'] 6 | @include background-size(cover) 7 | .boxed-text-outer 8 | position: relative 9 | top: 0 10 | padding-bottom: 30% 11 | .boxed-text-content 12 | position: absolute 13 | top: 0 14 | left: 0 15 | right: 0 16 | bottom: 0 17 | padding: 1em 18 | color: #FFF 19 | * 20 | margin: 0 21 | &:after 22 | content: '' 23 | &:hover 24 | background: rgba(0,0,0,0.3) 25 | transition: $all 26 | 27 | @media screen and (max-width: $handheld) 28 | 29 | .boxed-text 30 | .filler 31 | padding-bottom: 80% 32 | -------------------------------------------------------------------------------- /vital.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | lib = File.expand_path('../lib', __FILE__) 3 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) 4 | require 'vital/version' 5 | 6 | Gem::Specification.new do |spec| 7 | spec.name = 'vital' 8 | spec.version = Vital::VERSION 9 | spec.authors = ['Body Taing', 'Fabio Rehm'] 10 | spec.email = ['btaing@doximity.com', 'frehm@doximity.com'] 11 | 12 | spec.summary = 'A minimally invasive CSS framework for modern web applications.' 13 | spec.homepage = 'https://doximity.github.io/vital/' 14 | 15 | spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features|docs|icons)/}) } 16 | spec.require_paths = ['lib'] 17 | 18 | spec.add_dependency 'sass', '>= 3.4' 19 | 20 | spec.add_development_dependency "dox-style", "~> 1.0.16" 21 | spec.add_development_dependency 'bundler', '~> 1.11' 22 | spec.add_development_dependency 'rake', '~> 10.0' 23 | end 24 | --------------------------------------------------------------------------------