├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── .stylelintrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── gh-pages.sh ├── lerna.json ├── package-lock.json ├── package.json └── packages ├── base-blockquotes ├── .gitignore ├── LICENSE ├── README.md ├── _blockquotes.scss ├── index.html └── package.json ├── base-forms ├── .gitignore ├── LICENSE ├── README.md ├── _forms.scss ├── index.html └── package.json ├── base-images ├── .gitignore ├── LICENSE ├── README.md ├── _images.scss └── package.json ├── base-lists ├── .gitignore ├── LICENSE ├── README.md ├── _lists.scss ├── index.html └── package.json ├── base-tables ├── .gitignore ├── LICENSE ├── README.md ├── _tables.scss ├── index.html └── package.json ├── base-typography ├── .gitignore ├── LICENSE ├── README.md ├── _typography.scss ├── index.html └── package.json ├── components-buttons ├── .gitignore ├── LICENSE ├── README.md ├── _buttons.scss ├── index.html └── package.json ├── generic-normalize ├── .gitignore ├── LICENSE ├── README.md ├── _normalize.scss └── package.json ├── generic-reset ├── .gitignore ├── LICENSE ├── README.md ├── _reset.scss └── package.json ├── objects-box ├── .gitignore ├── LICENSE ├── README.md ├── _box.scss ├── index.html └── package.json ├── objects-centered-column ├── .gitignore ├── LICENSE ├── README.md ├── _centered-column.scss ├── index.html └── package.json ├── objects-flag ├── .gitignore ├── LICENSE ├── README.md ├── _flag.scss ├── index.html └── package.json ├── objects-horizontal-list ├── .gitignore ├── LICENSE ├── README.md ├── _horizontal-list.scss ├── index.html └── package.json ├── objects-media-object ├── .gitignore ├── LICENSE ├── README.md ├── _media-object.scss ├── index.html └── package.json ├── objects-multi-col-list ├── .gitignore ├── LICENSE ├── README.md ├── _multi-col-list.scss ├── index.html └── package.json ├── objects-split ├── .gitignore ├── LICENSE ├── README.md ├── _split.scss ├── index.html └── package.json ├── objects-stack ├── .gitignore ├── LICENSE ├── README.md ├── _stack.scss ├── index.html └── package.json ├── objects-stats ├── .gitignore ├── LICENSE ├── README.md ├── _stats.scss ├── index.html └── package.json ├── objects-vertical-list ├── .gitignore ├── LICENSE ├── README.md ├── _vertical-list.scss ├── index.html └── package.json ├── scalescss ├── .gitignore ├── LICENSE.md ├── README.md ├── imports.md ├── index.html ├── package-lock.json ├── package.json └── vars.md ├── utilities-clearfix ├── .gitignore ├── LICENSE ├── README.md ├── _clearfix.scss └── package.json ├── utilities-spacing ├── .gitignore ├── LICENSE ├── README.md ├── _spacing.scss └── package.json └── utilities-width ├── .gitignore ├── LICENSE ├── README.md ├── _width.scss └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .*.swo 2 | .*.swp 3 | nbproject 4 | CVS 5 | .cvsignore 6 | .#* 7 | .DS_Store 8 | .sublime-workspace 9 | .sass-cache/ 10 | css/ 11 | .idea/ 12 | node_modules/ 13 | lerna-debug.log 14 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | packages/generic-normalize/_normalize.scss 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | First of all, thank you for your interest in contributing to Scales! I really appreciate your time and interest. 4 | 5 | ## Where to start 6 | To get familiar with Scales, start with the README. Everything you need to get the whole project running is in there already. 7 | 8 | Since Scales is a collection of separate packages it's likely that you will be contributing to an individual part of Scales, which doesn't require setting the whole thing up. 9 | 10 | Once you've fork and cloned the repo locally, create a feature branch and start making changes to the package you want to contribute to. 11 | 12 | ## Anatomy of a Scales package 13 | The 3 important files in a Scales package are the `.scss` file, index.html, and the README. 14 | 15 | ### .scss 16 | This is the main file for each package and the one that actually gets referenced in a project that uses Scales. Scales uses [Stylelint Lint](https://stylelint.io/) and [Prettier](https://prettier.io/) to maintain consistent code style. When you commit files, they will linted and formatted. I recommend that you install the Stylelint and Prettier plugins for your code editor so you can catch errors before attempting to commit. 17 | 18 | Please follow the commenting convention in the files to add usage notes when appropriate. 19 | 20 | #### Variables 21 | Scales makes heavy use of variables so that default values can be set by the user. Make sure you put these in the right area near the top of the file and don't forget to set the `!default` flag. 22 | 23 | ### index.html 24 | This file is used for testing the different patterns in Scales. 25 | 26 | Any changes or additions to classes need to be represented in this file. 27 | 28 | You also need to update the CSS in this file so the changes you made are visible. I suggest copying the contents of the `.scss` file into [Sassmeister](https://www.sassmeister.com/) and pasting the css output into `index.html`. 29 | 30 | ### README.md 31 | This is the documentation for the package. Add any documentation here that helps explain your changes. 32 | 33 | Be sure to add or update any variables or classes in the appropriate sections. 34 | 35 | Also, be sure to add or update the html in the usage section. 36 | 37 | ## Opening a PR 38 | Once you've made the changes and updated all of the documentation, simply open a pull request against master. 39 | 40 | Thanks again for your interest! 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # This library is no longer being maintained 2 | Scales has been pulled directly into https://github.com/sparkdesignsystem/spark-design-system and is no longer being directly maintained. 3 | 4 | # Scales 5 | 6 | Scales is a modular CSS framework for quickly building responsive web projects. It clocks in at only 3.8kb when minified and gzipped. 7 | 8 | It is purposely "design-free" so that there is nothing you will have to change. Instead, you will build your design on top of the foundation that Scales provides. 9 | 10 | This is a framework for serious developers and designers who aren't afraid to get their hands dirty with advanced and sometimes challenging CSS concepts. A framework shouldn't do your work for you or make all of the decisions. Scales tries it's best to stay out of your way. 11 | 12 | Scales is a highly _scalable_ CSS architecture, it contains design _patterns_ (scales in nature form patterns), and it is responsive so it _scales_ to the width of the viewport. So clever it hurts. 13 | 14 | ## Monorepo 15 | 16 | Scales is managed as a monorepo. All of the Scales source code lives in a single repo, but is released as separate packages using [Lerna](https://github.com/lerna/lerna). 17 | 18 | ### Looking for the previous version of scales? 19 | [Scales 2.6.1](https://github.com/ScalesCSS/scalescss/tree/v2.6.1) 20 | 21 | ## Techniques/Concepts Used in Scales 22 | * [ITCSS](http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) (Inverted Triangle CSS) architecture 23 | * Object Oriented CSS Design Patterns 24 | * Responsive Design 25 | * Sass/scss 26 | * BEM (Block, Element, Modifier)-style naming convention 27 | 28 | ## Browser Support 29 | Scales uses `box-sizing: border-box;`, and `display: table-cell;`, neither of which are supported in IE7 and under. There are a few media queries, but they are an enhancement. Thus, Scales is only for IE9+ and any modern browser, but IE8 is also mostly covered. 30 | 31 | ## Dependencies 32 | * [Sass](http://sass-lang.com/) - Either Ruby Sass or Libsass. 33 | * [NPM](http://npmjs.com) - To pull all of the scales packages together. 34 | 35 | ## Setup 36 | Make sure you have the dependencies installed on your system and then, from the root directory of your project, run: 37 | 38 | ``` 39 | npm install --save @scalescss/scalescss 40 | ``` 41 | 42 | Next you will want to create 3 files (name them whatever you want): 43 | 44 | 1. A settings/variables file. ex. `_settings.scss` 45 | 1. A file to import all of the Scales packages. ex. `_scalescss.scss` 46 | 1. A main file to import the settings, Scales packages, and all of your project partials. ex. `styles.scss` 47 | 48 | ### Settings/Variables 49 | Scales exposes a large number of variables that allow you to customize nearly everything. 50 | 51 | Have a look at all of the [available variables](https://github.com/ScalesCSS/scalescss/blob/master/packages/scalescss/vars.md). 52 | 53 | ### The Scales Packages 54 | Each piece of Scales is its own package on npm. Once you have all of the packages in your project, you will need to import them into your project. I recommend creating a `_scalescss.scss` file that imports everything. 55 | 56 | **The order of the imports is very important!** 57 | 58 | See an example of the [correct import order](https://github.com/ScalesCSS/scalescss/blob/master/packages/scalescss/imports.md). 59 | 60 | ### Main Sass File 61 | 62 | Once you have these files sorted out, you will want to create a main Scss file that will import your settings, Scales, and the rest of your project partials. This is the file that will get compiled into CSS: 63 | 64 | ``` 65 | @import your-project/settings; 66 | @import your-project/scalescss; 67 | @import your-project/project-partial; 68 | @import your-project/project-partial; 69 | @import your-project/project-partial; 70 | @import your-project/project-partial; 71 | ``` 72 | 73 | ## Compile to CSS 74 | Once you have these things set up you simply need to tell Sass what to compile: 75 | 76 | ``` 77 | $ sass your-project/styles.scss your-project/css/styles.css 78 | ``` 79 | 80 | There are many other options for compiling that you can find in the [Sass Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html). You can also look into using a task runner like [Gulp](http://gulpjs.com/) or a module bundler like [Webpack](https://webpack.github.io/). 81 | 82 | ## Pattern Library 83 | The [scalescss](https://github.com/ScalesCSS/scalescss/tree/master/packages/scalescss/) package includes an `index.html` file that serves as a basic pattern library for Scales. It shows all of the available patterns in their default state. This can be used as a reference, for testing, or styled into a more complete pattern library with your project's patterns as well. 84 | 85 | ## Props 86 | This couldn't have been done without the amazing work of [Harry Roberts](https://csswizardry.com/) on [inuitcss](https://github.com/inuitcss). A number of the design patterns and techniques in Scales were borrowed or adapted from inuitcss. 87 | 88 | I also wanted to thank [Nicole Sullivan](http://www.stubbornella.org/) for her work on [OOCSS](https://github.com/stubbornella/oocss/wiki), without which I would not be the developer I am today. 89 | 90 | ## Sites using Scales 91 | 92 | ### v2 93 | * [rocket.quickenloans.com](https://rocket.quickenloans.com/) 94 | * [quickenloans.com](https://quickenloans.com/) 95 | * [myql.com](https://www.myql.com/) 96 | * [davidgillhespy.com](http://davidgillhespy.com/) 97 | * [rockframework.org](http://www.rockframework.org/) 98 | 99 | ### v1 100 | * [realestateagent.quickenloans.com](https://realestateagent.quickenloans.com/#!/) 101 | * [toflexornottoflex.com](http://toflexornottoflex.com/#/) 102 | 103 | ## Meta 104 | * Follow me on twitter [@yodasw16](http://twitter.com/yodasw16) 105 | * Check out [my website](http://davidgillhespy.com/) 106 | * Detroit people: Check out [Devtroit](http://devtroit.com/) 107 | 108 | ![Devtroit](http://devtroit.com/img/badges/badge-medium.png) 109 | -------------------------------------------------------------------------------- /gh-pages.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | git subtree split --prefix packages/scalescss -b gh-pages 3 | git push -f origin gh-pages:gh-pages 4 | git branch -D gh-pages 5 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.10.2", 3 | "packages": [ 4 | "packages/*" 5 | ], 6 | "version": "6.0.0-1" 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scalescss", 3 | "description": "Scales is a design-free collection of OOCSS patterns, framework settings, & utilities to quickly build mobile-first, responsive web projects", 4 | "scripts": { 5 | "test": "echo \"Error: no test specified\" && exit 1", 6 | "gh-pages": "./gh-pages.sh", 7 | "precommit": "lint-staged" 8 | }, 9 | "lint-staged": { 10 | "packages/**/*.scss": [ 11 | "prettier-stylelint --write", 12 | "git add" 13 | ] 14 | }, 15 | "author": "Dave Gillhespy", 16 | "license": "MIT", 17 | "devDependencies": { 18 | "husky": "^0.14.3", 19 | "lerna": "^2.10.2", 20 | "lint-staged": "^6.1.0", 21 | "prettier-stylelint": "^0.4.2", 22 | "stylelint": "^8.4.0", 23 | "stylelint-scss": "^2.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/base-blockquotes/.gitignore: -------------------------------------------------------------------------------- 1 | .*.swo 2 | .*.swp 3 | nbproject 4 | CVS 5 | .cvsignore 6 | .#* 7 | .DS_Store 8 | .sublime-workspace 9 | .sass-cache/ 10 | css/ 11 | .idea/ 12 | node_modules/ 13 | -------------------------------------------------------------------------------- /packages/base-blockquotes/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/base-blockquotes/README.md: -------------------------------------------------------------------------------- 1 | # Base Block Quotes for Scales 2 | 3 | These are the base styles for block quotes. 4 | 5 | ## Requirements 6 | 7 | Scales uses the [Sass CSS preprocessor](http://sass-lang.com/), you'll need either Ruby Sass or LibSass. 8 | 9 | ## Installation 10 | 11 | * [NPM](http://npmjs.com): `npm install --save @scales/base-blockquotes` 12 | 13 | ## Usage 14 | 15 | A nice semantic way to markup a blockquote is using the `figure` element. See http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required for the rationale behind this approach. 16 | 17 | ### Default blockquote 18 | ``` 19 |
20 |
21 |

For me, it is far better to grasp the Universe as it really is than to persist in delusion, however satisfying and reassuring.

22 |
23 |
Carl Sagan, The Demon-Haunted World
24 |
25 | ``` 26 | 27 | ## Available Classes 28 | 29 | * `.Blockquote` 30 | * `.Blockquote__quote` 31 | * `.Blockquote__source` 32 | 33 | ## Available Variables 34 | 35 | * `$source-prefix` 36 | 37 | ### Namespace Variables 38 | 39 | #### The Scales Namespace Variable 40 | 41 | All Scales patterns expose the `$scales-namespace` variable. 42 | 43 | `$scales-namespace` accepts a string that will prefix all Scales classes. The default value is `null`. 44 | 45 | #### Class Level Namespace Variable 46 | 47 | Class level namespace variables allow you to namespace a selector based on the type e.g. `b-` for "base", `o-` for "objects", `u-` for utilities, and `c-` for "components". 48 | 49 | This pattern exposes the `$scales-base-class-namespace` variable. 50 | 51 | `$scales-base-class-namespace` accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is `null`. 52 | 53 | #### Namespace Variable Usage 54 | 55 | To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example: 56 | 57 | ``` 58 | @import your-project/settings; // Namespace variables are set in this file 59 | @import your-project/scalescss; // Imports all of the Scales packages 60 | @import your-project/project // The rest of your project imports 61 | ``` 62 | -------------------------------------------------------------------------------- /packages/base-blockquotes/_blockquotes.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Block Quotes 3 | // ========================================================================== 4 | /// 5 | 6 | // 7 | // Scales namespace variable 8 | /// 9 | $scales-namespace: null !default; 10 | 11 | // 12 | // Class level namespacing variable 13 | /// 14 | $scales-base-class-namespace: null !default; 15 | 16 | // 17 | // Available Variables 18 | /// 19 | $source-prefix: '—' !default; 20 | 21 | // 22 | // Blockquote 23 | /// 24 | .#{$scales-namespace}#{$scales-base-class-namespace}Blockquote { 25 | margin: 0; 26 | } 27 | 28 | .#{$scales-namespace}Blockquote__quote { 29 | &:last-of-type { 30 | margin-bottom: 0; 31 | } 32 | } 33 | 34 | .#{$scales-namespace}Blockquote__source { 35 | display: block; 36 | text-indent: 0; 37 | 38 | &::before { 39 | content: $source-prefix; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/base-blockquotes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Base Blockquotes - Scales 6 | 7 | 25 | 26 | 27 |
28 |

Base Block Quotes for Scales

29 |
30 |
31 |

This page includes the default base blockquote styles.

32 | 33 |

Default blockquote

34 |
35 |
36 |

For me, it is far better to grasp the Universe as it really is than to persist in delusion, however satisfying and reassuring.

37 |
38 |
Carl Sagan, The Demon-Haunted World
39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /packages/base-blockquotes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@scalescss/base-blockquotes", 3 | "version": "6.0.0-1", 4 | "description": "Base block quote styles for Scales CSS", 5 | "main": "_blockquotes.scss", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/ScalesCSS/scalescss/tree/master/packages/base-blockquotes" 12 | }, 13 | "author": "Dave Gillhespy", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/ScalesCSS/scalescss/issues" 17 | }, 18 | "homepage": "https://github.com/ScalesCSS/scalescss/tree/master/packages/base-blockquotes#readme" 19 | } 20 | -------------------------------------------------------------------------------- /packages/base-forms/.gitignore: -------------------------------------------------------------------------------- 1 | .*.swo 2 | .*.swp 3 | nbproject 4 | CVS 5 | .cvsignore 6 | .#* 7 | .DS_Store 8 | .sublime-workspace 9 | .sass-cache/ 10 | css/ 11 | .idea/ 12 | node_modules/ 13 | -------------------------------------------------------------------------------- /packages/base-forms/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /packages/base-forms/_forms.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Forms 3 | // ========================================================================== 4 | // 5 | // These are base styles for forms as well as some helpful classes to 6 | // make alignment and state easier. 7 | /// 8 | 9 | // 10 | // Scales namespace variable 11 | /// 12 | $scales-namespace: null !default; 13 | 14 | // 15 | // Class level namespacing variable 16 | /// 17 | $scales-base-class-namespace: null !default; 18 | 19 | // 20 | // Available Variables 21 | /// 22 | $fieldset-padding: 1em !default; 23 | $text-input-padding: 0.5em !default; 24 | $text-input-border-width: 1px !default; 25 | $text-input-border-style: solid !default; 26 | $text-input-border-color: #000 !default; 27 | $text-input-border-radius: 0 !default; 28 | $select-background-color: #fff !default; 29 | $input-container-margin-bottom: 1em !default; 30 | $input-container-inline-valign: top !default; 31 | $input-disabled-border-color: #aaa !default; 32 | $input-disabled-background-color: #ccc !default; 33 | $input-disabled-text-color: #aaa !default; 34 | $input-readonly-border-color: #aaa !default; 35 | $input-readonly-background-color: #ccc !default; 36 | $input-readonly-text-color: #000 !default; 37 | $helper-text-hidden: true !default; 38 | 39 | // 40 | // Main form styles 41 | /// 42 | fieldset { 43 | padding: $fieldset-padding; 44 | } 45 | 46 | // 47 | // Use when marking up a form as an unordered list. e.g.