pax_global_header 0000666 0000000 0000000 00000000064 13077012456 0014517 g ustar 00root root 0000000 0000000 52 comment=8a52d4288ecb4c01049ac7e2781365b4093c35d6
Singularity-1.8.0/ 0000775 0000000 0000000 00000000000 13077012456 0014037 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/.bump.js 0000664 0000000 0000000 00000002536 13077012456 0015424 0 ustar 00root root 0000000 0000000 'use strict';
var path = require('path'),
fs = require('fs'),
semver = require('semver'),
exec = require('child_process').execSync,
args = require('yargs').argv;
var pkg = require('./package.json'),
ruby = fs.readFileSync('./lib/singularitygs.rb').toString();
var rubyString,
date = new Date().toISOString();
var version = pkg.version;
if (exec('git status --porcelain').toString() !== '') {
console.error('Working dirty. Please commit before trying again');
process.exit(1);
}
version = {
major: semver.major(version),
minor: semver.minor(version),
patch: semver.patch(version)
};
if (args.major) {
version = `${version.major + 1}.0.0`;
}
else if (args.minor) {
version = `${version.major}.${version.minor + 1}.0`;
}
else if (args.patch) {
version = `${version.major}.${version.minor}.${version.patch + 1}`;
}
else {
version = `${version.major}.${version.minor}.${version.patch}`;
}
date = date.substring(0, date.indexOf('T'));
rubyString = `module SingularityGS
VERSION = "${version}"
DATE = "${date}"
end`;
ruby = ruby.substring(0, ruby.indexOf('module SingularityGS')) + rubyString;
pkg.version = version;
fs.writeFileSync('./lib/singularitygs.rb', ruby + '\n');
fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2) + '\n');
exec(`git commit -am "Release v${version}"`);
exec(`git tag v${version}`);
Singularity-1.8.0/.bundle/ 0000775 0000000 0000000 00000000000 13077012456 0015366 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/.bundle/config 0000664 0000000 0000000 00000000070 13077012456 0016553 0 ustar 00root root 0000000 0000000 ---
BUNDLE_PATH: vendor
BUNDLE_DISABLE_SHARED_GEMS: '1'
Singularity-1.8.0/.gembuild.js 0000664 0000000 0000000 00000000617 13077012456 0016247 0 ustar 00root root 0000000 0000000 'use strict';
var exec = require('child_process').execSync,
version = require('./package.json').version;
var commands = [
'gem build singularitygs.gemspec',
`gem push singularitygs-${version}.gem`,
`rm singularitygs-${version}.gem`
];
commands.forEach(command => {
try {
exec(command);
}
catch (e) {
console.error(e.message);
process.exit(1);
}
});
process.exit();
Singularity-1.8.0/.gitignore 0000664 0000000 0000000 00000000153 13077012456 0016026 0 ustar 00root root 0000000 0000000 .DS_Store
*.sassc
*.scssc
*.gem
example/css/
Gemfile.lock
/tests/output/
/tests/diff/
node_modules/
/vendor Singularity-1.8.0/.rvmrc 0000664 0000000 0000000 00000000044 13077012456 0015167 0 ustar 00root root 0000000 0000000 rvm ruby-1.9.2@singularity --create
Singularity-1.8.0/.travis.yml 0000664 0000000 0000000 00000000177 13077012456 0016155 0 ustar 00root root 0000000 0000000 language: ruby
bundler_args: --without development
rvm:
- 1.8.7
- 2.0.0
gemfile:
- Gemfile
branches:
only:
- 1.x.x
Singularity-1.8.0/CHANGELOG.md 0000664 0000000 0000000 00000013461 13077012456 0015655 0 ustar 00root root 0000000 0000000 # Singularity Changelog
## v1.6.2
### February 26, 2015
* **Fix** First gutter in a split gutter grid now displays properly in SVG backgrounds
## v1.6.1
### February 25, 2015
* **Change** Moved from Linear Gradient backgrounds to SVG backgrounds based on the awesome work done over in [Susy](https://github.com/ericam/susy/issues/436)
* **Fix** `@error` issue with current version of Libsass
## v1.5.0
### January 17, 2015
* **New** Moved [Calc Output Style](http://snugug.com/musings/bulletproof-combo-fixed-and-fluid-grids-css3-calc) from [Singularity Extras](https://github.com/at-import/singularity-extras) into Core
* **New** Added `sgs-set()` mixin to mirror `sgs-change()` mixin (getters and setters FTW)
* **New** `background-grid` mixin now throws a warning instead of a unit error if it's unable to generate a CSS Gradient for the given grid
## v1.4.0
### August 23, 2014
* **New** Allow for a map of options to be passed to the `layout` mixin in the same way that you can for `layout-at`
* **New** Allow `output` keyword in `layout-at` mixin map
## v1.3.0
#### August 11, 2014
* **New** Sass 3.4 support
* **New** `layout-at` mixin for defining a layout override and writing a media query at the same time
* **New** `sgs-reset()` mixin and function now allow for comma-separated list of settings to reset
* **Change** Deprecation warning is now deprecated as Sass 3.4 will ensure this is no longer an issue
* **Fix** Grid Visualization now doesn't explode with fixed width gutters
* **New** Quickstart in the README
* **Fix** Quotes in `isolation-span` clear now unquote correctly
* **Removed** Singularity demo installs and box sizing polyfill as they are available in other, more useful means
* **Fix** `SASS_PATH` issues to make Singularity usable w/o Compass and as a Ruby gem
## v1.2.0.rc.6
#### February 11, 2014
* **Fix** Sass 3.3.0.rc.3 updated how some core functions work; updates for that.
* **New** Added an `asymmetric-span` mixin for the common use case of only needing to change location in an asymmetric span.
* **New** Global setting `'asymetric output'` (defaults to `'isolation'`)
* **Change** Moved Background Grid settings to global settings.
* `$background-grid-color` is now `'background grid color'` (defaults to `'chocolate'`)
* `$show-grid-background` is now `'debug'` (defaults to `false`)
* **New** If setting `'debug'` is set to `true`, full settings map passed to output function will be output to the `-sgs-span-settings` property. Inspired by [Susy Issue 293](https://github.com/ericam/susy/issues/293)
## v1.2.0.rc.4
#### January 31, 2014
* **Fix** Years in the Changelog were 2013, but was actually done in 2014
* **Fix** Breakpoint dependency should be >= 2.4.0 and < 3.0.0, which is accomplished with `~>2.4`
## v1.2.0.rc.3
#### January 17, 2014
* **Change** Better warning error for `sgs-set` so settings can contain dashes as long as words are set with spaces. Added errors for underscores as well.
## v1.2.0.rc.2
#### January 17, 2014
* **New** **Change** Output functions can now set the value of a property to a map to have multiple properties printed with different values. The primary two use cases for this is to provide fallbacks for the same property or to provide a way to have experimental values for properties. The map should have a descriptive key (for experimental properties, the prefix plus `standard` for the standard property, or for fallbacks a `fallback` and `standard` key) and the value should be the value to be printed.
## v1.2.0.rc.1
#### January 12, 2014
* **New** Sass 3.3.0 and Compass 1.0.0 compatibility
* Sass 3.3.0 minimum required version
* Compass no longer required to run (no custom Ruby dependencies)
* **New** Installable through Bower
* **New** [Breakpoint](http://github.com/team-sass/breakpoint) variables can now be used in `add-*`
* **New** Items added in `add-*` no longer need to be in order! They'll be sorted for you!
* **New** **Change** `grid-span` now takes an optional parameter `$gutter-style` (after `$output-style`, before `$options`) to allow you to specify gutter style/
* **New** `grid-span` options now can include a `from` key (left, right, or opposite) to specify the direction that should be used. If specifying a `from` direction, the `[dir="rtl"]` will not be printed. If your global direction is `rtl` or `both`, the selector will still be printed.
* **New** `isolation-span` and `float-span` both now have `$gutter-style` and `$from` parameters to pass them (respectively) to `grid-span`
* **New** **Change** When writing both `ltr` and `rtl` styles at the same time, styles whose properties are identical between `ltr` and `rtl` will not print out in the `rtl` style.
* **Change** **DEPRECATION** Removed `grid-overlay` as it was an even worse representation than `background-grid` and was undocumented.
* **Change** **DEPRECATION** Removed `grid-toggle` as the JavaScript needed was annoying to maintain and explain how it worked.
* **New** **DEPRECATION** Global variables for settings have been deprecated due to global namespacing issues that had to be changed. Instead, use `@include sgs-change($setting, $value)` to change a setting. Any setting that previously had dashes in their variable name (`$include-border-box` for instance) becomes a string of the variable name with spaces instead of dashes. Use `@include sgs-reset($setting)` to reset a setting.
* **DEPRECATION** `add-*` functions changed to `add-*` mixins to resolve global namespacing issues that had to be changed. Example: update `$grids: 12` to `@include add-grid(12)` and `$gutters: add-gutter(.5 at 500px)` to `@include add-gutter(.5 at 500px)`
* **DEPRECATION** push/pull/isolation mixins have been deprecated as they were always undocumented and untested and there doesn't appear to be many users using them as it was really only useful for `float`. Most users have migrated to `isolation` if push/pull/isolation was needed
Singularity-1.8.0/CONTRIBUTING.md 0000664 0000000 0000000 00000006056 13077012456 0016277 0 ustar 00root root 0000000 0000000 ## Contributing to Singularity
We love contributors! Yes we do! If you would like to contribute to Singularity, please follow the following guidelines:
* **DO NOT ISSUE A PULL REQUEST WITHOUT RELATED ISSUE!!** All pull requests must reference an issue in the issue queue and will only be looked at after discussion about that issue has taken place. Any pull request created that does not reference an issue will be closed.
* All pull requests will be tested against our standard test suite through Travis CI. If any of the tests fail, we will ask you to fix your code so that the tests no longer fail. Any new features that are added must have accompanying passing tests before being considered. During a pull request, we may ask for additional tests to be written in order to ensure that what is being changed does not have negative effects elsewhere.
* We are actively trying to stay away from Ruby functionality and am attempting to build this entirely with native Sass functionality. If you would like to add a feature that includes Ruby code, there needs to be a very very compelling case as to why.
* Each individual feature you would like add, or bug you would like to squash, should be an individual pull request. Each pull request should be from an individual feature branch to either the latest stable or development branch. **The current *stable* branch is 1.x.x. The current *development* branch is 1.x.x**. Contributions that are not in the form of a pull request will not be considered. If your pull request does not apply cleanly we will ask you to fix that before we will look into pulling it in. We may ask you to update or make changes to the code you've submitted, please don't take this the wrong way. If a pull request smells (such as if a large amount of code is all within a single commit, or the coding standards aren't in line with core Singularity) we may ask you to rewrite your commit.
* If you offer a new feature in a pull request and we do not feel it is a good fit for core Singularity, fret not. Singularity is designed to be extensible, and we encourage you to [build your own Compass Extension](https://github.com/Team-Sass/Compass-Extension-Template) and release your feature (if possible) as a Singularity plugin.
* **BEFORE FILING AND ISSUE** ensure that the issue is reproducable either on [SassMeister](http://sassmeister.com/) or under Bundler control. Post the versions of all gems being used and the smallest set of example code of how to reproduce the error.
### Testing
We have automated tests to ensure our build is working. To test, you must install [Bundler](http://bundler.io/), which will allow you to install all needed gem versions. Once you have Bundler up and running and have your dependencies installed, run ```bundle exec rake``` to run the tests. All tests are stored within the 'test' folder as .scss files. The test suite ensures that each test compiles, and does not change the expected behavior. If a test needs to be updated or changed, update the correct .scss file, and then run ```bundle exec rake compile``` to update all corrosponding css files.
Singularity-1.8.0/Gemfile 0000664 0000000 0000000 00000000370 13077012456 0015332 0 ustar 00root root 0000000 0000000 # Pull gems from RubyGems
source 'https://rubygems.org'
gem 'sass', "~> 3.4"
gem 'compass', "~>1.0"
gem 'breakpoint', "~> 2.4"
group :test do
gem 'rake'
gem "diffy", "~> 3.0.1"
gem "colorize", "~> 0.6.0"
end Singularity-1.8.0/LICENSE 0000664 0000000 0000000 00000002103 13077012456 0015040 0 ustar 00root root 0000000 0000000 The MIT License (MIT)
Copyright (c) 2013 Scott Kellum, Sam Richard
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Singularity-1.8.0/Rakefile 0000664 0000000 0000000 00000001131 13077012456 0015500 0 ustar 00root root 0000000 0000000 task :default => [:test]
task :test do
require 'fileutils'
Dir.chdir('tests') do
output_dir = 'output'
FileUtils.mkdir_p output_dir
ruby '.unit_tests.rb'
FileUtils.rm_rf output_dir
end
end
desc 'Compile baseline CSS'
task :compile do
require 'compass'
require 'compass/exec'
Dir.chdir('tests') do
Compass.add_configuration 'config.rb'
Compass.configuration.project_path = Dir.pwd
# Compile into baseline directory instead of test output directory
Compass.configuration.css_dir = 'controls'
Compass.compiler.clean!
Compass.compiler.run
end
end
Singularity-1.8.0/bower.json 0000664 0000000 0000000 00000000600 13077012456 0016044 0 ustar 00root root 0000000 0000000 {
"name": "singularity",
"version": "1.8.0",
"main": "stylesheets/_singularitygs.scss",
"ignore": [
"**/.*",
"node_modules",
"components",
"Gemfile",
"Gemfile.lock",
"*.gemspec",
"lib",
"example",
"tests",
"Rakefile",
"templates",
"working",
"CONTRIBUTING.md"
],
"dependencies": {
"breakpoint-sass": ">=2.4.0"
}
}
Singularity-1.8.0/example/ 0000775 0000000 0000000 00000000000 13077012456 0015472 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/example/config.rb 0000664 0000000 0000000 00000000404 13077012456 0017262 0 ustar 00root root 0000000 0000000 # Require any additional compass plugins here.
# require 'singularitygs'
require 'modular-scale'
require 'breakpoint'
# Set this to the root of your project when deployed:
add_import_path '../stylesheets'
http_path = 'html'
css_dir = 'css'
sass_dir = 'sass'
Singularity-1.8.0/example/demo/ 0000775 0000000 0000000 00000000000 13077012456 0016416 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/example/demo/ag-asymmetric.html 0000664 0000000 0000000 00000002055 13077012456 0022050 0 ustar 00root root 0000000 0000000
AG Symmetric Test
AG Symmetric Test
Singularity HTML Demo
Singularity HTML Demo
Singularity HTML Demo
Middle Section
First Section
Second Section
Singularity-1.8.0/example/sass/ 0000775 0000000 0000000 00000000000 13077012456 0016443 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/example/sass/demo/ 0000775 0000000 0000000 00000000000 13077012456 0017367 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/example/sass/demo/ag-asymmetric.scss 0000664 0000000 0000000 00000001141 13077012456 0023023 0 ustar 00root root 0000000 0000000 @import "singularitygs";
$grids: 1 2 3 4 5 6 7 8 9 10;
$gutters: 1;
$output: "float";
strong {
display: block;
}
div {
text-align: center;
background: rgba(#266FBD, .2);
}
.ag1 {
@include grid-span(2, 1);
}
.ag2 {
@include grid-span(6, 3);
}
.ag3 {
@include grid-span(2, 9);
}
.ag4 {
@include grid-span(3, 1, 3 4 5 6 7 8);
}
.ag5 {
@include grid-span(3, 4, 3 4 5 6 7 8);
}
.ag6 {
@include grid-span(2, 1, 3 4 5 6 7 8);
}
.ag7 {
@include grid-span(4, 3, 3 4 5 6 7 8);
}
.ag8 {
@include grid-span(2, 1, 5 6 7 8);
}
.ag9 {
@include grid-span(2, 3, 5 6 7 8);
}
.ag10 {
clear: both;
}
Singularity-1.8.0/example/sass/demo/ag-symmetric.scss 0000664 0000000 0000000 00000001103 13077012456 0022660 0 ustar 00root root 0000000 0000000 @import "singularitygs";
$grids: 10;
$gutters: .2;
$output: "float";
strong {
display: block;
}
div {
text-align: center;
background: rgba(#266FBD, .2);
}
.ag1 {
@include grid-span(2);
}
.ag2 {
@include grid-span(6);
}
.ag3 {
@include grid-span(2, last);
}
.ag4 {
@include grid-span(3, $grid: 6);
}
.ag5 {
@include grid-span(3, last, $grid: 6);
}
.ag6 {
@include grid-span(2, $grid: 6);
}
.ag7 {
@include grid-span(4, last, $grid: 6);
}
.ag8 {
@include grid-span(2, $grid: 4);
}
.ag9 {
@include grid-span(2, last, $grid: 4);
}
.ag10 {
clear: both;
}
Singularity-1.8.0/example/sass/demo/float.scss 0000664 0000000 0000000 00000005607 13077012456 0021401 0 ustar 00root root 0000000 0000000 @import "singularitygs";
$break: 700px;
$break2: 900px;
$break3: 1200px;
$grids: add-grid(2);
$grids: add-grid(2 8 2 1 at $break);
$grids: add-grid(12 at $break2);
$grids: add-grid(1 3 5 7 9 at $break3);
$gutters: add-gutter(1/3);
// $gutters: add-gutter(.25 at $break);
$output: 'float';
body {
margin: 0;
padding: 0;
@include background-grid;
}
div {
height: 50px;
}
#foo {
background: red;
height: 30px;
@include grid-span(1, 2);
@include breakpoint($break) {
@include grid-span(1, 4);
clear: none;
}
@include breakpoint($break2) {
@include grid-span(2, 11);
}
@include breakpoint($break3) {
@include grid-span(1, 3);
@include push(2, 1);
}
}
#bar {
background: green;
height: 20px;
@include grid-span(1, 1);
clear: left;
@include breakpoint($break) {
@include grid-span(2, 2);
@include push(1, 1);
clear: none;
}
@include breakpoint($break2) {
@include grid-span(8, 3);
clear: none;
}
@include breakpoint($break3) {
@include grid-span(1, 1);
@include pull(3, 1);
}
}
#baz {
background: purple;
@include grid-span(1, 1);
@include breakpoint($break) {
// This piece's position is very wonky in Float, and as such we need to do some custom silliness to place it. It winds up looking similar to Isolation positioning, but in revers. Fortunately, because we have functions like column-span, gutter-span, and grid-span, we're able to build this fairly easily and have the heavy lifting of the math done for us.
width: column-span(1, 1);
float: right;
margin-left: -100%;
margin-right: grid-span(2, 2) + gutter-span();
clear: none;
}
@include breakpoint($break2) {
margin-right: 0;
@include grid-span(2, 1);
@include pull(10, 1);
clear: none;
}
@include breakpoint($break3) {
@include grid-span(1, 5);
}
}
#qux {
background: yellow;
@include grid-span(1, 1);
clear: both;
@include breakpoint($break) {
@include grid-span(3, 2);
// clear: left;
}
@include breakpoint($break2) {
@include grid-span(3, 4);
clear: both;
@include push(3, 1);
}
@include breakpoint($break3) {
@include grid-span(1, 2);
clear: none;
@include pull(2, 2);
}
}
#waldo {
background: blue;
height: 70px;
@include grid-span(1, 2);
@include breakpoint($break) {
@include grid-span(1, 1);
clear: left;
}
@include breakpoint($break2) {
@include grid-span(3, 1);
@include pull(6, 1);
}
@include breakpoint($break3) {
@include grid-span(1, 4);
clear: none;
margin-right: -100%;
margin-left: 0;
}
}
#garfield {
background: orange;
@include grid-span(2, 1);
@include breakpoint($break) {
@include float-span(4, 1);
}
@include breakpoint($break2) {
@include grid-span(5, 8);
}
@include breakpoint($break3) {
@include grid-span(2, 3);
clear: both;
@include push(2, 1);
}
} Singularity-1.8.0/example/sass/demo/isolation.scss 0000664 0000000 0000000 00000004221 13077012456 0022264 0 ustar 00root root 0000000 0000000 @import "singularitygs";
$break: 700px;
$break2: 900px;
$break3: 1200px;
$grids: add-grid(2);
$grids: add-grid(2 8 2 1 at $break);
$grids: add-grid(12 at $break2);
$grids: add-grid(1 3 5 7 9 at $break3);
$gutters: add-gutter(1/3);
// $gutters: add-gutter(.25 at $break);
// $output: 'float';
body {
margin: 0;
padding: 0;
@include background-grid;
}
div {
height: 50px;
}
#foo {
background: red;
height: 30px;
@include grid-span(1, 2);
@include breakpoint($break) {
@include grid-span(1, 4);
}
@include breakpoint($break2) {
@include grid-span(2, 11);
}
@include breakpoint($break3) {
@include grid-span(1, 3);
}
}
#bar {
background: green;
height: 20px;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(2, 2);
}
@include breakpoint($break2) {
@include grid-span(8, 3);
}
@include breakpoint($break3) {
@include grid-span(1, 1);
}
}
#baz {
background: purple;
@include grid-span(1, 1, $options: 'both');
@include breakpoint($break) {
@include grid-span(1, 1);
}
@include breakpoint($break2) {
@include grid-span(2, 1);
}
@include breakpoint($break3) {
@include grid-span(1, 5);
}
}
#qux {
background: yellow;
@include grid-span(1, 1, $options: 'left');
@include breakpoint($break) {
@include grid-span(3, 2, $options: 'left');
}
@include breakpoint($break2) {
@include grid-span(3, 4, $options: 'both');
}
@include breakpoint($break3) {
@include grid-span(1, 2);
}
}
#waldo {
background: blue;
height: 70px;
@include grid-span(1, 2, $options: 'right');
@include breakpoint($break) {
@include grid-span(1, 1, $options: 'left');
}
@include breakpoint($break2) {
@include grid-span(3, 1, $options: 'right');
}
@include breakpoint($break3) {
@include grid-span(1, 4);
}
}
#garfield {
background: orange;
@include grid-span(2, 1, $options: 'left');
@include breakpoint($break) {
@include isolation-span(4, 1, 'both');
}
@include breakpoint($break2) {
@include grid-span(5, 8);
}
@include breakpoint($break3) {
@include grid-span(2, 3, $options: 'both');
}
}
Singularity-1.8.0/example/sass/demo/pres.scss 0000664 0000000 0000000 00000001253 13077012456 0021236 0 ustar 00root root 0000000 0000000 @import "compass";
@import "singularitygs";
$grids: 12;
$grids: add-grid(2px 8px 2px at 500px);
$gutters: 25px;
$gutter-styles: split fixed;
// $direction: 'both';
* {
@include box-sizing('border-box');
}
.container {
max-width: 80%;
margin: 0 auto;
@include clearfix;
// background: black;
margin-bottom: 2em;
@include background-grid;
}
$colors: red orange yellow green blue;
div {
min-height: 200px;
div {
min-height: 100px;
@for $i from 1 through 5 {
&:nth-of-type(#{$i}) {
background: nth($colors, $i);
}
}
}
}
#foo {
@include grid-span(4, 1);
}
#bar {
@include grid-span(4, 5);
}
#baz {
@include grid-span(4, 9);
} Singularity-1.8.0/example/sass/unit-tests.scss 0000664 0000000 0000000 00000004333 13077012456 0021462 0 ustar 00root root 0000000 0000000 // Singularity unit tests
@import "singularitygs";
@function test-round($n) {
// move decimal point three spaces
$n: $n * 1000;
// round
$n: round($n);
// move decimal point back
$n: $n / 1000;
@return $n;
}
// column-span tests
@if test-round(column-span(3, 2, 1 3 5 3.3 2, 1.2)) != 71.728% {
@debug "column-span failed with non-uniform columns";
@debug "column-span(3, 2, 1 3 5 3.3 2, 1.2) was #{column-span(3, 2, 1 3 5 3.3 2, 1.2)}";
@debug "should have been: 71.728%";
@debug "";
}
@if test-round(column-span(3, 2, 12, 1.2)) != 21.429% {
@debug "column-span failed with uniform columns";
@debug "column-span(3, 2, 12, 1.2) was #{column-span(3, 2, 12, 1.2)}";
@debug "should have been: 21.42857%";
@debug "";
}
// column-sum tests
@if column-sum(1 3 5 3.3 2, 1.2) != 19.1 {
@debug "column-sum failed with non-uniform columns";
@debug "column-sum(1 3 5 3.3 2, 1.2) was #{column-sum(1 3 5 3.3 2, 1.2)}";
@debug "should have been: 19.1";
@debug "";
}
@if column-sum(12, 1.2) != 25.2 {
@debug "column-sum failed with uniform columns";
@debug "column-sum(12, 1.2) was #{column-sum(12, 1.2)}";
@debug "should have been: 25.2";
@debug "";
}
// column-count tests
@if column-count(1 3 5 3.3 2) != 5 {
@debug "column-count failed with non-uniform columns";
@debug "column-count(1 3 5 3.3 2) was #{column-count(1 3 5 3.3 2)}";
@debug "should have been: 5";
@debug "";
}
@if column-count(12) != 12 {
@debug "column-count failed with uniform columns";
@debug "column-count(12) was #{column-count(12)}";
@debug "should have been: 12";
@debug "";
}
// context test
@if context(37%, 83%) != 30.71 {
@debug "context failed";
@debug "context(37%, 83%) was #{context(37%, 83%)}";
@debug "should have been: 30.71";
@debug "";
}
// gutter-span test
@if test-round(gutter-span(1.2, 1 3 5 3.3 2)) != 6.283% {
@debug "gutter-span failed with non-uniform columns";
@debug "gutter-span(1.2, 1 3 5 3.3 2) was #{gutter-span(1.2, 1 3 5 3.3 2)}";
@debug "should have been: 6.283%";
@debug "";
}
@if test-round(gutter-span(1.2, 12)) != 4.762% {
@debug "gutter-span failed with uniform columns";
@debug "gutter-span(1.2, 12) was #{gutter-span(1.2, 12)}";
@debug "should have been: 4.762%";
@debug "";
} Singularity-1.8.0/eyeglass-exports.js 0000664 0000000 0000000 00000000212 13077012456 0017706 0 ustar 00root root 0000000 0000000 var path = require('path');
module.exports = function(eyeglass, sass) {
return {
sassDir: path.join(__dirname, 'stylesheets')
}
} Singularity-1.8.0/lib/ 0000775 0000000 0000000 00000000000 13077012456 0014605 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/lib/singularitygs.rb 0000664 0000000 0000000 00000000703 13077012456 0020036 0 ustar 00root root 0000000 0000000 base_directory = File.expand_path(File.join(File.dirname(__FILE__), '..'))
singularitygs_sass_path = File.join(base_directory, 'stylesheets')
if (defined? Compass)
require 'breakpoint'
Compass::Frameworks.register(
"singularitygs",
:path => base_directory
)
else
ENV["SASS_PATH"] = [ENV["SASS_PATH"], singularitygs_sass_path].compact.join(File::PATH_SEPARATOR)
end
module SingularityGS
VERSION = "1.8.0"
DATE = "2017-04-23"
end
Singularity-1.8.0/package.json 0000664 0000000 0000000 00000002301 13077012456 0016321 0 ustar 00root root 0000000 0000000 {
"name": "singularitygs",
"version": "1.8.0",
"description": "A next generation grid framework built from the ground up to be responsive.",
"main": "stylesheets/_singularitygs.scss",
"directories": {
"test": "tests"
},
"eyeglass": {
"needs": "^1.0.0",
"exports": "eyeglass-exports.js",
"name": "singularitygs"
},
"devDependencies": {
"diff": "^1.2.1",
"fs-extra": "^0.14.0",
"glob": "^4.3.2",
"node-sass": "^3.0.0",
"semver": "^5.1.0",
"yargs": "^4.1.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bump:major": "node .bump.js --major",
"bump:minor": "node .bump.js --minor",
"bump:patch": "node .bump.js --patch",
"publish": "node .gembuild.js && git push && git push origin --tags"
},
"repository": {
"type": "git",
"url": "https://github.com/Team-Sass/Singularity.git"
},
"keywords": [
"sass",
"responsive",
"rwd",
"eyeglass-module",
"singularity",
"layout",
"grid",
"semantic"
],
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/Team-Sass/Singularity/issues"
},
"homepage": "https://github.com/Team-Sass/Singularity"
}
Singularity-1.8.0/readme.md 0000664 0000000 0000000 00000025661 13077012456 0015630 0 ustar 00root root 0000000 0000000 # Singularity.gs [](http://badge.fury.io/rb/singularitygs) [](https://travis-ci.org/at-import/Singularity)
**Grids Without Limits**
Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in *any* unit you want to use.
## CSS Grids and Singularity
Layout on the web has changed significantly since [Scott's first push](https://github.com/at-import/Singularity/commit/d13cd4b1907802708a1e40e61a531bca5d409405) back on March 7, 2012. First came Flexbox, then [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.
With the release of Singularity 1.8, two new mixins, `grid-container` and `css-grid-span`. These two mixins are not included by default when importing Singularity, and will need to be included separately by doing `@import 'singularity/css-grid'` after following the [install instructions](#installation).
**These Mixins Are Not Meant To Be Used As A Replacement For CSS Grid**
The purpose of these mixins is to provide users with a way to **transition off of Singularity and start using CSS Grid directly**. CSS Grid is powerful, and doesn't need a framework like Singularity, and we encourage our users to start using it directly whenever possible instead of Singularity. This also means _there will be no further updates to Singularity for the forseeable future_. We love all of our users, and thank you for your support over the past 5 years. Singularity will continue to work as normal, but further development will stop.
Documentation for the CSS Grid mixins can be [found below](#css-grid);
## Getting Help with Singularity
* For help with Singularity, please ask a question on [Stack Overflow](http://stackoverflow.com/questions/ask) tagged with `singularitygs`.
* To file an issue with Singularity, be it a feature request or a bug report, please use our [Issue Queue](https://github.com/at-import/Singularity/issues).
## Singularity Quickstart
**Full documentation is available on the [Singularity Wiki](https://github.com/at-import/Singularity/wiki)**
*If you are upgrading to Singularity 1.2.0 or greater, please read the [Changelog](https://github.com/at-import/Singularity/blob/1.x.x/CHANGELOG.md) for important changes made to Singularity!*
### Installation
* Singularity should be [installed and compiled](https://github.com/at-import/Singularity/wiki/Installation#installation) through [Bundler](http://bundler.io/) if compiling with Ruby
* Alternatively, Singularity can be installed with Bower (`bower install singularity --save`)
* It can even be installed as an [Eyeglass](https://github.com/sass-eyeglass/eyeglass) module! (`npm install singularitygs --save-dev`)
* Singularity requires a Sass compiler with full feature parity with the Ruby Sass 3.4.23 implementation in order to work
### Setting Up a Basic Grid
[Grids](https://github.com/at-import/Singularity/wiki/Creating-Grids) are made of 3 parts, the Grid definition defining columns, Gutter definition defining spacing between columns, Gutter Style defining how gutters are positioned relative to a column. Singularity supports [Symmetric](https://github.com/at-import/Singularity/wiki/Creating-Grids#symmetric-grids) and [Asymmetric](https://github.com/at-import/Singularity/wiki/Creating-Grids#asymmetric-grids) grids, as well as fluid and [fixed](https://github.com/at-import/Singularity/wiki/Creating-Grids#fixed-gutters) gutters. Setting grids up this way puts them into Singularity's **Global Grid Context**.
```scss
// Symmetric grid with fluid gutters, 1/2 gutter on each side of a column
@include add-grid(12);
@include add-gutter(1/3);
@include add-gutter-style('split');
```
```scss
// Asymmetric grid with fixed gutters, 1 full gutter after each column
@include add-grid(1 3 5);
@include add-gutter(1em);
```
You can [visualize your grid](https://github.com/at-import/Singularity/wiki/Creating-Grids#visualizing-your-grids) with a CSS Gradient. To do so, turn on debug mode and include the `background-grid` mixin. Be warned, CSS Gradients aren't 100% reliable visualizations, if there's a discrepancy between the visualization and the actual items on the grid, it's most likely the visualization that's wrong.
```scss
// Be sure to enable debug mode for your grid visualization so show up:
@include sgs-change('debug', true);
.container {
@include background-grid($color: blue);
}
````
### Spanning Your Grid
Singularity doesn't provide grid classes, instead it uses mixins to [attach an item to your grid](https://github.com/at-import/Singularity/wiki/Spanning-The-Grid). The mixin takes your grid definitions and an [output style](https://github.com/at-import/Singularity/wiki/Output-Styles) and writes the CSS for the given combination. The main mixin for this is the `grid-span` mixin which will work with any output style. Most output styles provide [output-specific spans](https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#output-span) to make working with that specific output style easier.
The `grid-span` mixin takes two required arguments, how many columns you would like to span, and from what column you would like to start from. The column you would like to start from is the first column spanned.
```scss
@include add-grid(4);
.foo {
// Spanning the last 2 columns
@include grid-span(2, 3);
}
.bar {
// Spanning the 2nd column
@include grid-span(1, 2);
}
```
### Responsive Grids
Singularity provides a couple of different ways to have `grid-span` use a different set of grid definitions at different breakpoints. The first is Singularity's [Responsive Grid Context](https://github.com/at-import/Singularity/wiki/Creating-Grids#responsive-grids), which relies upon [Breakpoint](https://github.com/team-sass/breakpoint) (a super powerful and flexible media query system, we recommend using it). This will allow you to use Breakpoint media queries as normal and when `grid-span` is called, it will know what set of grid definitions to use (although it won't automatically change existing `grid-span` calls to put them on a new grid, that's up to you). It does this by allowing for multiple grid definitions in the **Global Grid Context**.
To use, simply call `add-grid` multiple times, each time telling it when you would like to change. **Be Aware** this will *only work with `min-width` media queries!* Sass and Singularity cannot know runtime conditions and provide wiggle room between media queries with anything other than simple `min-width` queries. While a full Breakpoint style media query can be used in these definitions, Singularity will only look for the `min-width` value.
**Responsive grid contexts do not output anything by themsleves**. Singularity's Responsive Grids feature allows you to change the *context of a called `grid-span`*. In order for you to see the context change, you still need to call `grid-span` to apply your grid.
```scss
// Singularity 1.2 Syntax
@include add-grid(3);
@include add-grid(6 at 500px);
@include add-grid(12 at 700px);
@include add-grid(2 8 2 at 900px);
@include add-grid(1 3 5 7 9 at 1100px);
@include add-gutter(1/3);
@include add-gutter(.25 at 900px);
```
The second way to provide responsive grids is with either of the use of the [Context Override](https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#group-context-overrides) mixins. Singularity provides two, `layout` which will override context **Global Grid Context** for any content nested underneath it, and `layout-at`, which will do the same but allows you to define and use a media query at the same time. `layout-at` will accept any Breakpoint media query definition. Both of these options provide more fine-grain control over your **Global Grid Context** overrides as compared to the **Responsive Grid Context**, if you need that.
```scss
@include add-grid(12);
@include add-gutter(1/3);
.foo {
@include layout(1 3 5, .5) {
// Everything in here will use a `1 3 5` grid with `.5` gutter.
// Arguments (in order): $grid, $gutter, $output-style, $gutter-style
}
@include layout((
'grid': 1 3 5,
'gutter': .5
)) {
// Everything in here will use a `1 3 5` grid with `.5` gutter
// Also available: 'gutter style' and 'output'
}
@include layout-at(2 4 6, 500px) {
// Everything in here will be wrapped in a `min-width: 500px` media query
// and use a `2 4 6` grid with the Global Grid Context's `1/3` gutter
}
@include layout-at((
'grid': 1 3 5,
'gutter': .5
), 700px) {
// Everything in here will be wrapped in a `min-width: 700px` media query
// and use a `1 3 5` grid with `.5` gutter
// Also available: 'gutter style' and 'output'
}
}
```
### CSS Grid
Singularity 1.8 introduces the following optional mixins to use current grid definitions to provide [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) layouts for browsers that support it, and fall back to Singularity layouts for browsers that do not.
```scss
@import "breakpoint";
@import "singularitygs";
@import "singularitygs/css-grids"; // Optional module, needs to be imported separately
.container {
@include grid-container; // Will write grid-template-columns, grid-gap, and padding definitions (wrapped in @supports) based on grid definitions previously defined
}
.item {
@include css-grid-span(3) // Spans with no location only work for symmetric grids. Will write a float-based span as a fallback to grid-columns
}
.item-2 {
@include css-grid-span(2, 1) // Spans with a location will work with asymmetric grids. Will write either an isolation or calc based span as a fallback to grid-columns (depending on the defined grid)
}
```
## Contributing to Singularity
We love contributors! Yes we do! If you would like to contribute to Singularity, please follow the [Contributing Guidelines](https://github.com/at-import/Singularity/blob/1.x.x/CONTRIBUTING.md)
## Singularity Plugins
Having been designed to be extensible, the ability to create plugins for Singularity is great and we expect to see great things. From new [Output Span](https://github.com/at-import/Singularity/wiki/Spanning-The-Grid#output-span) syntaxes to new [Output Styles](https://github.com/at-import/Singularity/wiki/Output-Styles) to new [Grid Generators](https://github.com/at-import/Singularity/wiki/Grid-Generators), we are excited to see what the community will come up with. Below are a list of Singularity Plugins available. If you would like to add your Plugin to the list, please issue a Pull Request to add it to the list!
* [Singularity Extras](https://github.com/at-import/Singularity-Extras)
## License
Dual license MIT/GPL-3.0
Singularity-1.8.0/sache.json 0000664 0000000 0000000 00000000720 13077012456 0016014 0 ustar 00root root 0000000 0000000 {
"name": "singularity",
"description": "Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use.",
"tags": ["grids", "rwd", "responsive-web-design", "dry"]
}
Singularity-1.8.0/singularitygs.gemspec 0000664 0000000 0000000 00000002171 13077012456 0020311 0 ustar 00root root 0000000 0000000 # -*- encoding: utf-8 -*-
require './lib/singularitygs'
Gem::Specification.new do |s|
# General Project Information
s.name = "singularitygs"
s.version = SingularityGS::VERSION
s.date = SingularityGS::DATE
s.rubyforge_project = "singularitygs"
s.rubygems_version = "1.7.2"
s.required_rubygems_version = Gem::Requirement.new(">= 1.2")
# Author Information
s.authors = ["Scott Kellum", "Sam Richard"]
s.email = ["scott@scottkellum.com", "snugug@gmail.com"]
s.homepage = "http://singularity.gs"
s.licenses = ["MIT"]
# Project Description
s.description = "Advanced responsive grid system for Sass and Compass"
s.summary = "Singularity is a fluid grid system that can generate uniform columns as well as asymmetric and compound grids. It is designed to be extensible, adding additional outputs or grid generators are easy, and the core syntax is simple to build upon for custom input syntaxes."
# Files to Include
s.files = Dir.glob("lib/*.*")
s.files += Dir.glob("stylesheets/**/*.*")
# Dependent Gems
s.add_dependency 'sass', "~> 3.3"
s.add_dependency 'breakpoint', "~> 2.4"
end Singularity-1.8.0/stylesheets/ 0000775 0000000 0000000 00000000000 13077012456 0016413 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/_singularitygs.scss 0000664 0000000 0000000 00000002552 13077012456 0022357 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Default Settings
//////////////////////////////
$Singularity-Settings: (
'grids': (-1px: 12),
'gutters': (-1px: .25),
'gutter styles': (-1px: 'opposite'),
'output': 'isolation',
'direction': 'ltr',
'mobile first': true,
'include border box': false,
'include clearfix': false,
'background grid color': chocolate,
'asymmetric output': 'isolation',
'calc include min-width': true,
'debug': false
);
//////////////////////////////
// User Settings
//////////////////////////////
$singularity: () !default;
//////////////////////////////
// Import General Helpers
//////////////////////////////
@import "singularitygs/helpers";
//////////////////////////////
// Import Language Helpers
//////////////////////////////
@import "singularitygs/language";
//////////////////////////////
// Import Math
//////////////////////////////
@import "singularitygs/math";
//////////////////////////////
// Import Grid Helpers
//////////////////////////////
@import "singularitygs/grids";
//////////////////////////////
// Import Gutters Helpers
//////////////////////////////
@import "singularitygs/gutters";
//////////////////////////////
// Import Gutter Styles
//////////////////////////////
@import "singularitygs/gutter-styles";
//////////////////////////////
// Import APIs
//////////////////////////////
@import "singularitygs/api"; Singularity-1.8.0/stylesheets/singularitygs/ 0000775 0000000 0000000 00000000000 13077012456 0021317 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/_api.scss 0000664 0000000 0000000 00000006600 13077012456 0023126 0 ustar 00root root 0000000 0000000 @import "api/float";
@import "api/isolation";
@import "api/calc";
//////////////////////////////
// Master Grid Span mixin
//////////////////////////////
@mixin grid-span($span, $location: 1, $grid: null, $gutter: null, $output-style: null, $gutter-style: null, $options: null) {
@if $output-style == null {
$output-style: sgs-get('output');
}
$Grid: find-grid($grid);
$Gutter: find-gutter($gutter);
$Style: find-gutter-style($gutter-style);
$Start-Row: start-row($location);
$End-Row: end-row($span, $location, $Grid);
$Fixed-Gutter: fixed-gutter($Grid, $Gutter, $Style);
$Split-Gutter: index($Style, 'split');
$Gutter-Property: gutter-property($Grid, $Gutter, $Style);
$Direction: sgs-get('direction');
$From: if($options and type-of($options) == 'map', if(map-get($options, 'from'), map-get($options, 'from'), $Direction), $Direction);
$From: if($From == 'ltr' or $From == 'rtl', named-direction($From), $From);
$Holder: ();
@each $k, $v in $options {
$Holder: if($k == 'from', $Holder, map-merge($Holder, ($k: $v)));
}
$options: if(length($Holder) > 0, $Holder, null);
$Span-Map: (
'span': $span,
'location': $location,
'grid': $Grid,
'gutter': $Gutter,
'style': $Style,
'start row': $Start-Row,
'end row': $End-Row,
'fixed gutter': $Fixed-Gutter,
'split gutter': $Split-Gutter,
'gutter property': $Gutter-Property,
'options': $options
);
@if sgs-get('debug') != false {
-sgs-span-settings: inspect($Span-Map);
}
@if function-exists('output-#{$output-style}') {
$Left: ();
$Right: ();
@if $Direction == 'both' or $From == 'left' or ($Direction == 'rtl' and $From == 'opposite') {
$Left: call('output-#{$output-style}', map-merge($Span-Map, ('direction': left)));
}
@if $Direction == 'both' or $From == 'right' or ($Direction == 'ltr' and $From == 'opposite') {
$Right: call('output-#{$output-style}', map-merge($Span-Map, ('direction': right)));
}
$Left-Keys: map-keys($Left);
$Right-Keys: map-keys($Right);
$Exclude: ();
@each $key in $Left-Keys {
@if index($Right-Keys, $key) {
@if map-get($Right, $key) == map-get($Left, $key) {
$Exclude: append($Exclude, $key);
}
}
}
// Always try and print the Left value
@include grid-span-build-exclude($Left, $Exclude, false);
// If Direction is Both or RTL, add the RTL attribute selector
@if $Direction == 'both' or $Direction == 'rtl' {
[dir="rtl"] & {
@include grid-span-build-exclude($Right, $Exclude, true);
}
}
@else {
@include grid-span-build-exclude($Right, $Exclude, true);
}
}
@else {
@warn "There doesn't appear to be an output style named `#{$output-style}`. Please ensure that the function `output-#{$output-style}` and that the output style `#{$output-style}` are both available before trying to use them.";
}
}
@mixin grid-span-build($property, $value) {
@if type-of($value) != 'map' {
#{$property}: $value;
}
@else {
@each $prefix, $val in $value {
#{$property}: $val;
}
}
}
@mixin grid-span-build-exclude($properties, $delta, $exclude: false) {
@each $property, $value in $properties {
@if $exclude {
@if not index($delta, $property) {
@include grid-span-build($property, $value);
}
}
@else {
@include grid-span-build($property, $value);
}
}
} Singularity-1.8.0/stylesheets/singularitygs/_css-grid.scss 0000664 0000000 0000000 00000006232 13077012456 0024071 0 ustar 00root root 0000000 0000000 @import 'breakpoint';
@function _css-gridtemplate-conversion($grid) {
@if type-of($grid) == 'number' or length($grid) == 1 {
@return unquote('repeat(#{$grid}, 1fr)');
}
@else if type-of($grid) == 'list' or length($grid) > 1 {
$holder: '';
@each $column in $grid {
@if unitless($column) {
$holder: $holder + '#{$column}fr ';
}
@else {
$holder: $holder + $column + ' ';
}
}
$holder: str-slice($holder, 0, str-length($holder) - 1);
@return unquote($holder);
}
@return $grid;
}
@function _css-grid-gap-conversion($gutter) {
@if unitless(nth($gutter, 1)) {
@return unquote('#{$gutter}fr');
}
@return $gutter;
}
@mixin _css-grid-container-padding-conversation($style) {
@if length($style) == 1 {
$style: nth($style, 1);
}
@if str-index($style, 'split') != null {
$gutter: find-gutter() / 2;
$padding: _css-grid-gap-conversion($gutter);
padding: {
left: $padding;
right: $padding;
}
}
@else {
padding: {
left: 0;
right: 0;
}
}
}
@mixin grid-container() {
$grids: sgs-get('grids');
$gutters: sgs-get('gutters');
$gutter-styles: sgs-get('gutter styles');
@supports (display: grid) {
display: grid;
// Build Column Templates
@each $mq, $grid in $grids {
@if $mq == -1px {
grid-template-columns: _css-gridtemplate-conversion($grid);
}
@else {
@include mq($mq) {
grid-template-columns: _css-gridtemplate-conversion($grid);
}
}
}
// Build Gaps
@each $mq, $gutter in $gutters {
@if $mq == -1px {
grid-gap: _css-grid-gap-conversion($gutter);
}
@else {
@include mq($mq) {
grid-gap: _css-grid-gap-conversion($gutter);
}
}
}
// Build Padding
@each $mq, $style in $gutter-styles {
@if $mq == -1px {
@include _css-grid-container-padding-conversation($style);
}
@else {
@include mq($mq) {
@include _css-grid-container-padding-conversation($style);
}
}
}
}
}
@mixin css-grid-span($Span, $Location: false) {
$grid: find-grid();
@if type-of($grid) == 'number' or length($grid) == 1 {
// If we have a symmetric grid _and_ no location, Float Span makes most sense
@if $Location == false {
@include float-span($Span, $Location);
}
// If we have an symmetric grid _and_ a location, Isolation Span makes most sense
@else {
@include isolation-span($Span, $Location);
}
}
@else if type-of($grid) == 'list' or length($grid) > 1 {
$calc: false;
@each $column in $grid {
@if not unitless($column) {
$calc: true;
}
}
// If we have an asymmetric grid _and_ it includes united numbers, needs to be Calc
@if ($calc) {
@include calc-span($Span, $Location);
}
// If we have an asymmetric grid _and_ it doesn't include united numbers, Islotion's better
@else {
@include isolation-span($Span, $Location);
}
}
@supports (display: grid) {
@if $Location {
grid-columns: $Location / span $Span;
}
@else {
grid-columns: span $Span;
}
}
} Singularity-1.8.0/stylesheets/singularitygs/_grids.scss 0000664 0000000 0000000 00000000052 13077012456 0023460 0 ustar 00root root 0000000 0000000 @import "grids/add";
@import "grids/find"; Singularity-1.8.0/stylesheets/singularitygs/_gutter-styles.scss 0000664 0000000 0000000 00000000133 13077012456 0025203 0 ustar 00root root 0000000 0000000 @import "gutter-styles/add";
@import "gutter-styles/find";
@import "gutter-styles/helpers"; Singularity-1.8.0/stylesheets/singularitygs/_gutters.scss 0000664 0000000 0000000 00000000056 13077012456 0024051 0 ustar 00root root 0000000 0000000 @import "gutters/add";
@import "gutters/find"; Singularity-1.8.0/stylesheets/singularitygs/_helpers.scss 0000664 0000000 0000000 00000001074 13077012456 0024017 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Setting Helpers
//////////////////////////////
@import "helpers/settings";
//////////////////////////////
// Code Helpers
//////////////////////////////
@import "helpers/find";
@import "helpers/sass-lists";
@import "helpers/columns";
@import "helpers/span-shared";
@import "helpers/directions";
@import "helpers/sort";
//////////////////////////////
// UI Helpers
//////////////////////////////
@import "helpers/background-grid";
//////////////////////////////
// Layout Helpers
//////////////////////////////
@import "helpers/layout"; Singularity-1.8.0/stylesheets/singularitygs/_language.scss 0000664 0000000 0000000 00000000125 13077012456 0024134 0 ustar 00root root 0000000 0000000 @import "language/parse-list";
@import "language/parse-add";
@import "language/span"; Singularity-1.8.0/stylesheets/singularitygs/_math.scss 0000664 0000000 0000000 00000000134 13077012456 0023302 0 ustar 00root root 0000000 0000000 @import "math/columns";
@import "math/gutters";
@import "math/context";
@import "math/grid"; Singularity-1.8.0/stylesheets/singularitygs/api/ 0000775 0000000 0000000 00000000000 13077012456 0022070 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/api/_calc.scss 0000664 0000000 0000000 00000014212 13077012456 0024026 0 ustar 00root root 0000000 0000000 @function output-calc($Span-Map) {
// Set up Left/Right maps
$Return: ();
$Span: map-get($Span-Map, 'span');
$Location: map-get($Span-Map, 'location');
$Grid: map-get($Span-Map, 'grid');
$Gutter: map-get($Span-Map, 'gutter');
$Style: map-get($Span-Map, 'style');
@if unitless($Gutter) {
$ERROR-MESSAGE: "Calc output style uses fixed gutters (gutters with units). Please define fixed gutters to use calc";
@if feature-exists(at-error) {
@error $ERROR-MESSAGE;
}
@else {
@warn $ERROR-MESSAGE;
}
@return $Return;
}
@if type-of($Grid) == 'number' {
$ERROR-MESSAGE: "Calc output style is designed to be used with asymmetric grids, especially with a mix of fixed and fluid columns. Please define an asymmetric grid or use another output style.";
@if feature-exists(at-error) {
@error $ERROR-MESSAGE;
}
@else {
@warn $ERROR-MESSAGE;
}
@return $Return;
}
$Start-Row: map-get($Span-Map, 'start row');
$End-Row: map-get($Span-Map, 'end row');
$Split-Gutter: map-get($Span-Map, 'split gutter');
$Direction: map-get($Span-Map, 'direction');
$Options: map-get($Span-Map, 'options');
$Dir: $Direction;
$Opp: opposite-direction($Dir);
$Width: '';
$Margin: null;
$Min-Width: '(';
$Fixed: ();
$Fluid: ();
$Fixed-Totals: ('px': 0, 'em': 0, '%': 0);
$Gutter-Totals: if(str-index($Style, 'split'), $Gutter * length($Grid), $Gutter * (length($Grid) - 1));
$Fluid-Totals: 0;
$Fluid-Fixed-Sum: '';
$Single-Fluid: '';
@for $i from 1 through length($Grid) {
$Item: nth($Grid, $i);
@if not unitless($Item) {
$Fixed: map-merge($Fixed, ($i: $Item));
}
@else {
$Fluid: map-merge($Fluid, ($i: $Item));
}
}
@each $k, $v in $Fixed {
$Unit: unit($v);
$Running: map-get($Fixed-Totals, $Unit) + $v;
$Fixed-Totals: map-merge($Fixed-Totals, ($Unit: $Running));
}
@each $k, $v in $Fluid {
$Fluid-Totals: $Fluid-Totals + $v;
}
@each $k, $v in $Fixed-Totals {
@if $v != 0 {
$Fluid-Fixed-Sum: '#{$Fluid-Fixed-Sum}#{$v} + ';
}
}
// Width of a single fluid item, for calc()
$Single-Fluid: '((100% - (#{$Fluid-Fixed-Sum}#{$Gutter-Totals})) / (#{$Fluid-Totals}))';
// Margin Calculation
@if not $Start-Row or not $End-Row {
@if $Split-Gutter {
$Margin: '#{$Gutter / 2} + ';
}
@for $i from 1 to $Location {
@if unitless(nth($Grid, $i)) {
$Margin: '#{$Margin}(#{$Single-Fluid} * #{nth($Grid, $i)} + #{$Gutter}) + ';
}
@else {
$Margin: '#{$Margin}(#{nth($Grid, $i)} + #{$Gutter}) + ';
}
}
}
@if $Margin != null {
$Margin: str-slice($Margin, 0, -4);
}
// Width Calculation
@if $Span == 1 {
@if map-has-key($Fixed, $Location) {
$Return: map-merge($Return, ('width': map-get($Fixed, $Location)));
}
@else if map-has-key($Fluid, $Location) {
$Math: '(#{$Single-Fluid}) * #{nth($Grid, $Location)}';
$Span-Map: ('width': ('webkit': -webkit-calc(#{unquote($Math)}), 'standard': calc(#{unquote($Math)})));
$Return: map-merge($Return, $Span-Map);
}
}
@else {
$Location-End: $Location + ($Span - 1);
$Fixed-Counter: 0;
@for $i from $Location through $Location-End {
@if unitless(nth($Grid, $i)) {
$Width: '#{$Width}(#{$Single-Fluid} * #{nth($Grid, $i)}';
}
@else {
$Fixed-Counter: $Fixed-Counter + 1;
$Min-Width: '#{$Min-Width}#{nth($Grid, $i)} + #{$Gutter} + ';
$Width: '#{$Width}(#{nth($Grid, $i)}';
}
@if $i != $Location-End {
$Width: '#{$Width} + #{$Gutter}) + ';
}
@else {
$Min-Width: str-slice($Min-Width, 0, -4);
@if $Fixed-Counter == 1 {
$Min-Width: '#{$Min-Width} - #{$Gutter}';
}
$Min-Width: '#{$Min-Width})';
$Width: '#{$Width})';
}
}
// Min width handling
@if $Min-Width != ')' {
$Min-Map: ('min-width': ('webkit' : -webkit-calc(#{unquote($Min-Width)}), 'standard': calc(#{unquote($Min-Width)}) ));
@if sgs-get('calc include min-width') {
$Return: map-merge($Return, $Min-Map);
}
}
$Span-Map: ('width': ('webkit': -webkit-calc(#{unquote($Width)}), 'standard': calc(#{unquote($Width)}) ) );
$Return: map-merge($Return, $Span-Map);
}
// Build margins and Floats
@if ($End-Row) {
$Return: map-merge($Return, ('float': $Opp));
$Return: map-merge($Return, ('margin-#{$Dir}': 0));
@if $Split-Gutter {
$Return: map-merge($Return, ('margin-#{$Opp}': $Gutter / 2));
}
@else {
$Return: map-merge($Return, ('margin-#{$Opp}': 0));
}
}
@else {
$Return: map-merge($Return, ('float': $Dir));
$Return: map-merge($Return, ('margin-#{$Opp}': -100%));
@if $Start-Row {
@if $Split-Gutter {
$Return: map-merge($Return, ('margin-#{$Dir}': $Gutter / 2));
}
@else {
$Return: map-merge($Return, ('margin-#{$Dir}': 0));
}
}
@else {
$Margin-Map: ('margin-#{$Dir}': ('webkit': -webkit-calc(#{unquote($Margin)}), 'standard': calc(#{unquote($Margin)})));
$Return: map-merge($Return, $Margin-Map);
}
}
@return $Return;
}
//////////////////////////////
// Happy Syntax for Calc
//
// Makes working with Calc easier, as it moves Clear to a 1st class citizen of the mixin, and automatically builds the verbose grid-span mixin call
//////////////////////////////
@mixin calc-span($Span, $Location, $clear: false, $grid: false, $gutter: false, $gutter-style: false, $from: false) {
@if $gutter != false and unitless($gutter) {
@warn "Calc output style uses fixed gutters (gutters with units). Please define fixed gutters to use calc";
}
@if $grid != false and type-of($grid) == 'number' {
@warn "Calc output style is designed to be used with asymmetric grids, especially with a mix of fixed and fluid columns. Please define an asymmetric grid.";
}
$Options: ();
@if $clear {
$Options: map-merge($Options, ('clear': $clear));
}
@if $from {
$Options: map-merge($Options, ('from': $from));
}
$Options: if(length($Options) > 0, $Options, null);
@include grid-span($Span, $Location, $grid, $gutter, 'calc', $gutter-style, $Options);
}
Singularity-1.8.0/stylesheets/singularitygs/api/_float.scss 0000664 0000000 0000000 00000010662 13077012456 0024236 0 ustar 00root root 0000000 0000000 @function output-float($Span-Map) {
// Set up Left/Right maps
$Return: ();
$Span: map-get($Span-Map, 'span');
$Location: map-get($Span-Map, 'location');
$Grid: map-get($Span-Map, 'grid');
$Gutter: map-get($Span-Map, 'gutter');
$Style: map-get($Span-Map, 'style');
$Start-Row: map-get($Span-Map, 'start row');
$End-Row: map-get($Span-Map, 'end row');
$Fixed-Gutter: map-get($Span-Map, 'fixed gutter');
$Split-Gutter: map-get($Span-Map, 'split gutter');
$Gutter-Property: map-get($Span-Map, 'gutter property');
$Direction: map-get($Span-Map, 'direction');
$Options: map-get($Span-Map, 'options');
@if $Start-Row {
$Location: 1;
}
@else if $End-Row {
$Location: column-count($Grid) - $Span + 1;
}
$Width: column-span($Span, $Location, $Grid, $Gutter, $Style);
$Margin-Span: column-span(($Location - 1), 1, $Grid, $Gutter, $Style);
$Gutter-Span: gutter-span($Gutter, $Grid);
// Backwards Compatibility for Options
@if type-of($Options) != 'map' and $Options != null {
$Options: ('clear': unquote(nth($Options, 1)));
}
$Dir: $Direction;
$Opp: opposite-direction($Dir);
$Return: map-merge($Return, ('width': $Width));
$Return: map-merge($Return, ('clear': $Opp));
@if ($End-Row) {
$Return: map-merge($Return, ('float': $Opp));
@if $Split-Gutter and not $Fixed-Gutter {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': 0));
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
}
@else if not $Fixed-Gutter {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': 0));
}
}
@else {
$Return: map-merge($Return, ('float': $Dir));
@if $Split-Gutter and not $Fixed-Gutter {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': $Gutter-Span / 2));
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
}
@else if not $Fixed-Gutter {
@if $Start-Row {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': 0));
}
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span));
}
}
// If options are set, we merge them in!
@if ($Options) {
$Return: map-merge($Return, $Options);
}
// If CLear isn't already available, set it!
@if not map-has-key($Return, 'clear') {
$Return: map-merge($Return, ('clear': none));
}
// Left Fixed Gutters
@if $Fixed-Gutter {
@if index($Style, 'split') {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': $Gutter-Span / 2));
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
}
@else {
@if not $End-Row {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span));
}
@else {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': 0));
}
}
}
@return $Return;
}
//////////////////////////////
// Happy Syntax for Float
//
// Makes working with Float easier, as it allows you to walk the grid for symmetric grids and easy applying of 'last' and 'first', as well as automatically building the verbose grid-span mixin call
//////////////////////////////
@mixin float-span($Span, $Location: false, $grid: false, $gutter: false, $gutter-style: false, $from: false) {
$grid: find-grid($grid);
$gutter: find-gutter($gutter);
$row: false;
$Options: if($from, ('from': $from), null);
// Working around SASS treating a number like a list with one element
@if type-of($grid) == 'list' and length($grid) == 1 {
$grid: nth($grid, 1);
}
// Working with a symmetric grid
@if type-of($grid) == 'number' {
// Special treatment for non-numeric location
@if type-of($Location) != 'number' {
@if $Location == 'last' or $Location == 'omega' {
$Location: $grid - $Span + 1;
}
@else {
@if $Location == 'first' or $Location == 'alpha' {
$row: true;
}
$Location: 1;
}
}
@include grid-span($Span, $Location, $grid, $gutter, 'float', $gutter-style, $Options);
@if $row {
clear: both;
}
}
// Working with an asymmetric grid, should have location provided
@else if type-of($grid) == 'list' and $Location != false {
@include grid-span($Span, $Location, $grid, $gutter, 'float', $gutter-style, $Options);
}
@else {
@warn 'Asymmetric Grids need a Location value as well as a span value in order to know where on the grid you are! Please include a location value!';
}
}
Singularity-1.8.0/stylesheets/singularitygs/api/_isolation.scss 0000664 0000000 0000000 00000010342 13077012456 0025125 0 ustar 00root root 0000000 0000000 @function output-isolation($Span-Map) {
// Set up Left/Right maps
$Return: ();
$Span: map-get($Span-Map, 'span');
$Location: map-get($Span-Map, 'location');
$Grid: map-get($Span-Map, 'grid');
$Gutter: map-get($Span-Map, 'gutter');
$Style: map-get($Span-Map, 'style');
$Start-Row: map-get($Span-Map, 'start row');
$End-Row: map-get($Span-Map, 'end row');
$Fixed-Gutter: map-get($Span-Map, 'fixed gutter');
$Split-Gutter: map-get($Span-Map, 'split gutter');
$Gutter-Property: map-get($Span-Map, 'gutter property');
$Direction: map-get($Span-Map, 'direction');
$Options: map-get($Span-Map, 'options');
$Width: column-span($Span, $Location, $Grid, $Gutter, $Style);
$Margin-Span: column-span(($Location - 1), 1, $Grid, $Gutter, $Style);
$Gutter-Span: gutter-span($Gutter, $Grid);
// Backwards Compatibility for Options
@if type-of($Options) != 'map' and $Options != null {
$Options: ('clear': unquote(nth($Options, 1)));
}
$Dir: $Direction;
$Opp: opposite-direction($Dir);
$Return: map-merge($Return, ('width': $Width));
@if ($End-Row) {
$Return: map-merge($Return, ('float': $Opp));
$Return: map-merge($Return, ('margin-#{$Dir}': 0));
@if $Split-Gutter and not $Fixed-Gutter {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
}
@else {
$Return: map-merge($Return, ('margin-#{$Opp}': 0));
}
}
@else {
$Return: map-merge($Return, ('float': $Dir));
$Return: map-merge($Return, ('margin-#{$Opp}': -100%));
@if $Start-Row {
@if $Split-Gutter and not $Fixed-Gutter {
$Return: map-merge($Return, ('margin-#{$Dir}': $Gutter-Span / 2));
}
@else if not $Fixed-Gutter {
$Return: map-merge($Return, ('margin-#{$Dir}': 0));
}
}
@else {
@if $Split-Gutter and not $Fixed-Gutter {
$Return: map-merge($Return, ('margin-#{$Dir}': $Margin-Span + $Gutter-Span + $Gutter-Span / 2));
}
@else if not $Fixed-Gutter {
$Return: map-merge($Return, ('margin-#{$Dir}': $Margin-Span + $Gutter-Span));
}
@else {
$Return: map-merge($Return, ('margin-#{$Dir}': $Margin-Span));
}
}
}
// If options are set, we merge them in!
@if ($Options) {
$Return: map-merge($Return, $Options);
}
// If CLear isn't already available, set it!
@if not map-has-key($Return, 'clear') {
$Return: map-merge($Return, ('clear': none));
}
// Left Fixed Gutters
@if $Fixed-Gutter {
@if index($Style, 'split') {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': $Gutter-Span / 2));
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
}
@else {
@if not $End-Row {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span));
}
@else {
$Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': 0));
}
}
}
@return $Return;
}
//////////////////////////////
// Happy Syntax for Isolation
//
// Makes working with Isolation easier, as it moves Clear to a 1st class citizen of the mixin, and automatically builds the verbose grid-span mixin call
//////////////////////////////
@mixin isolation-span($Span, $Location, $clear: false, $grid: false, $gutter: false, $gutter-style: false, $from: false) {
$Options: ();
@if $clear {
$Options: map-merge($Options, ('clear': unquote($clear)));
}
@if $from {
$Options: map-merge($Options, ('from': $from));
}
$Options: if(length($Options) > 0, $Options, null);
@include grid-span($Span, $Location, $grid, $gutter, 'isolation', $gutter-style, $Options);
}
//////////////////////////////
// Happy Syntax of Asymmetric Grids
//
// Makes working with asymmetric grids easier!
//////////////////////////////
@mixin asymmetric-span($Location, $Span: false, $grid: false, $gutter: false, $gutter-style: false, $from: false, $output-style: false) {
$Span: if($Span != false, $Span, 1);
$output-style: if($output-style != false, $output-style, sgs-get('asymmetric output'));
$Options: ();
@if $from {
$Options: map-merge($Options, ('from': $from));
}
$Options: if(length($Options) > 0, $Options, null);
@include grid-span($Span, $Location, $grid, $gutter, $output-style, $gutter-style, $Options);
} Singularity-1.8.0/stylesheets/singularitygs/grids/ 0000775 0000000 0000000 00000000000 13077012456 0022427 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/grids/_add.scss 0000664 0000000 0000000 00000003645 13077012456 0024223 0 ustar 00root root 0000000 0000000 // Accepts a grid definition in the human-readable format. Converts it to the internal format,
// appends it to a list of grids and returns the resulting list.
//
// Note that this function only returns a new list, it does not modify the source list.
//
// add-grid($grid-definition, $append-to-list)
// - $grid-definition : See documentation for syntax:
// https://github.com/Team-Sass/Singularity/wiki/Creating-Grids
// - $append-to-list : [list] A list to append to.
// Defaults to $grids if none is specified.
@function add-grid($grid-definition, $custom-map: false) {
$Parsed: parse-add($grid-definition); // Parses grid definition to grid/breakpoint
$Grid: nth($Parsed, 1); // E. g. `()`.
$Breakpoint: nth($Parsed, 2); // Either `()` or false.
$Mobile-First: sgs-get('mobile first');
$Grid-Map: ();
// Determine if a custom map or the default maps should be used.
@if $custom-map {
$Grid-Map: $custom-map;
}
@else {
@if sgs-has('grids') {
$Grid-Map: sgs-get('grids');
}
}
$Grid-Key-Length: length(map-keys($Grid-Map));
// Check whether the definition will be the first one in the list
// and whether it has no breakpoint specified.
@if $Breakpoint == null {
// Returns the first item of the list, e. g. `()`
$Grid-Map: map-merge($Grid-Map, (-1px: $Grid));
}
// IF the list is initiated with a list of grid columns need to start off
// a comma seprated list.
@else {
@if not (map-has-key($Grid-Map, -1px)) {
$Grid-Map: map-merge($Grid-Map, map-get($Singularity-Settings, 'grids'));
}
$Grid-Map: map-merge($Grid-Map, ($Breakpoint: $Grid));
}
$Grid-Map: sort-map($Grid-Map, not $Mobile-First);
@return $Grid-Map;
}
@mixin add-grid($grid-definition) {
$Add-Grid: add-grid($grid-definition);
$HOLDER: sgs-set('grids', $Add-Grid);
} Singularity-1.8.0/stylesheets/singularitygs/grids/_find.scss 0000664 0000000 0000000 00000001031 13077012456 0024376 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Find Grid
//
// Finds the grid that you are on.
// From Singularity
// Must be using Breakpoint to work properly
//////////////////////////////
@function find-grid($user-columns: null) {
// We supply a default if the user hasn't set any grids and hasn't passed in a custom column set
// The default supplied is based on original Susy options
$Grids: sgs-get('grids');
$Found: find-object($Grids, $user-columns);
@if length($Found) == 1 {
$Found: nth($Found, 1);
}
@return $Found;
} Singularity-1.8.0/stylesheets/singularitygs/gutter-styles/ 0000775 0000000 0000000 00000000000 13077012456 0024152 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/gutter-styles/_add.scss 0000664 0000000 0000000 00000004421 13077012456 0025737 0 ustar 00root root 0000000 0000000 // Accepts a gutter-style style definition in the human-readable format. Converts it to the internal format,
// appends it to a list of gutter-style styles and returns the resulting list.
//
// Note that this function only returns a new list, it does not modify the source list.
//
// add-gutter-style-style($gutter-style-style-definition, $append-to-list)
// - $gutter-style-definition : See documentation for syntax:
// https://github.com/Team-Sass/Singularity/wiki/Creating-Grids
// - $append-to-list : [list] A list to append to.
// Defaults to $gutter-styles if none is specified.
@function add-gutter-style($gutter-style-definition, $custom-map: false) {
$Parsed: parse-add($gutter-style-definition); // Parses gutter-style definition to gutter-style/breakpoint
$Gutter-Style: nth($Parsed, 1); // E. g. `()`.
$Breakpoint: nth($Parsed, 2); // Either `()` or false.
$Mobile-First: sgs-get('mobile first');
$Gutter-Style-Map: ();
// Determine if a custom map or the default maps should be used.
@if $custom-map {
$Gutter-Style-Map: $custom-map;
}
@else {
@if sgs-has('gutter styles') {
$Gutter-Style-Map: sgs-get('gutter styles');
}
}
$Gutter-Style-Key-Length: length(map-keys($Gutter-Style-Map));
// Check whether the definition will be the first one in the list
// and whether it has no breakpoint specified.
@if $Breakpoint == null {
// Returns the first item of the list, e. g. `()`
$Gutter-Style-Map: map-merge($Gutter-Style-Map, (-1px: $Gutter-Style));
}
// IF the list is initiated with a list of gutter-style columns need to start off
// a comma seprated list.
@else {
@if not (map-has-key($Gutter-Style-Map, -1px)) {
$Gutter-Style-Map: map-merge($Gutter-Style-Map, map-get($Singularity-Settings, 'gutter styles'));
}
$Gutter-Style-Map: map-merge($Gutter-Style-Map, ($Breakpoint: $Gutter-Style));
}
$Gutter-Style-Map: sort-map($Gutter-Style-Map, not $Mobile-First);
@return $Gutter-Style-Map;
}
@mixin add-gutter-style($gutter-style-definition) {
$Add-gutter-style: add-gutter-style($gutter-style-definition);
$HOLDER: sgs-set('gutter styles', $Add-gutter-style);
} Singularity-1.8.0/stylesheets/singularitygs/gutter-styles/_find.scss 0000664 0000000 0000000 00000001143 13077012456 0026125 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Find gutter style
//
// Finds the gutter style that you are working with.
// From Singularity
// Must be using Breakpoint to work properly
//////////////////////////////
@function find-gutter-style($user-gutter-styles: null) {
// We supply a default if the user hasn't set any gutters and hasn't passed in a custom column set
// The default supplied is based on original Susy options
$Gutters-Styles: sgs-get('gutter styles');
$Found: find-object($Gutters-Styles, $user-gutter-styles);
@if length($Found) == 1 {
$Found: nth($Found, 1);
}
@return $Found;
} Singularity-1.8.0/stylesheets/singularitygs/gutter-styles/_helpers.scss 0000664 0000000 0000000 00000001433 13077012456 0026651 0 ustar 00root root 0000000 0000000 @function fixed-gutter($user-columns, $user-gutter, $user-gutter-style) {
@if index($user-gutter-style, 'fixed') {
// @debug 'Fixed in output style';
@return true;
}
@else if type-of($user-columns) == 'number' and not unitless($user-gutter) {
// @debug 'Equal columns with a unit based gutter';
@return true;
}
@else if type-of($user-columns) == 'list' {
@if unit(nth($user-columns, 1)) != unit($user-gutter) {
// @debug 'Columns and gutters are different units';
@return true;
}
}
@else {
@return false;
}
@return false;
}
@function gutter-property($user-columns, $user-gutter, $user-gutter-style) {
@if fixed-gutter($user-columns, $user-gutter, $user-gutter-style) {
@return 'padding';
}
@else {
@return 'margin';
}
} Singularity-1.8.0/stylesheets/singularitygs/gutters/ 0000775 0000000 0000000 00000000000 13077012456 0023014 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/gutters/_add.scss 0000664 0000000 0000000 00000003777 13077012456 0024616 0 ustar 00root root 0000000 0000000 // Accepts a gutter definition in the human-readable format. Converts it to the internal format,
// appends it to a list of gutter and returns the resulting list.
//
// Note that this function only returns a new list, it does not modify the source list.
//
// add-gutter($Gutter-definition, $append-to-list)
// - $gutter-definition : See documentation for syntax:
// https://github.com/Team-Sass/Singularity/wiki/Creating-Gutters
// - $append-to-list : [list] A list to append to.
// Defaults to $gutters if none is specified.
@function add-gutter($gutter-definition, $custom-map: false) {
$Parsed: parse-add($gutter-definition); // Parses Gutter definition to Gutter/breakpoint
$Gutter: nth($Parsed, 1); // E. g. `()`.
$Breakpoint: nth($Parsed, 2); // Either `()` or false.
$Mobile-First: sgs-get('mobile first');
$Gutter-Map: ();
// Determine if a custom map or the default maps should be used.
@if $custom-map {
$Gutter-Map: $custom-map;
}
@else {
@if sgs-has('gutters') {
$Gutter-Map: sgs-get('gutters');
}
}
$Gutter-Key-Length: length(map-keys($Gutter-Map));
// Check whether the definition will be the first one in the list
// and whether it has no breakpoint specified.
@if $Breakpoint == null {
// Returns the first item of the list, e. g. `()`
$Gutter-Map: map-merge($Gutter-Map, (-1px: $Gutter));
}
// IF the list is initiated with a list of Gutter columns need to start off
// a comma seprated list.
@else {
@if not (map-has-key($Gutter-Map, -1px)) {
$Gutter-Map: map-merge($Gutter-Map, map-get($Singularity-Settings, 'gutters'));
}
$Gutter-Map: map-merge($Gutter-Map, ($Breakpoint: $Gutter));
}
$Gutter-Map: sort-map($Gutter-Map, not $Mobile-First);
@return $Gutter-Map;
}
@mixin add-gutter($gutter-definition) {
$Add-Gutter: add-gutter($gutter-definition);
$HOLDER: sgs-set('gutters', $Add-Gutter);
} Singularity-1.8.0/stylesheets/singularitygs/gutters/_find.scss 0000664 0000000 0000000 00000001047 13077012456 0024772 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Find gutter
//
// Finds the gutter that you are on.
// From Singularity
// Must be using Breakpoint to work properly
//////////////////////////////
@function find-gutter($user-gutters: null) {
// We supply a default if the user hasn't set any gutters and hasn't passed in a custom column set
// The default supplied is based on original Susy options
$Gutters: sgs-get('gutters');
$Found: find-object($Gutters, $user-gutters);
@if length($Found) == 1 {
$Found: nth($Found, 1);
}
@return $Found;
} Singularity-1.8.0/stylesheets/singularitygs/helpers/ 0000775 0000000 0000000 00000000000 13077012456 0022761 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/helpers/_background-grid.scss 0000664 0000000 0000000 00000015100 13077012456 0027054 0 ustar 00root root 0000000 0000000 // -----------------------------------------------
// Grid Background
@mixin background-grid(
$columns: null,
$gutter: null,
$gutter-style: null,
$color: null
) {
$color: if($color != null, $color, sgs-get('background grid color'));
@if sgs-get('debug') != false {
$columns: if($columns != null, $columns, sgs-get('grids'));
$gutter: if($gutter != null, $gutter, sgs-get('gutters'));
$gutter-style: if($gutter-style != null, $gutter-style, sgs-get('gutter styles'));
@include background-build($columns, $gutter, $gutter-style, $color)
}
}
@function background-map($columns, $gutters, $gutter-styles) {
$Grids: ();
$Gutters: ();
$Styles: ();
@if $columns and type-of($columns) != 'map' {
$Grids: (-1px: $columns);
}
@else {
$Grids: sgs-get('grids');
}
@if $gutters and type-of($gutters) != 'map' {
$Gutters: (-1px: $gutters);
}
@else {
$Gutters: sgs-get('gutters');
}
@if $gutter-styles and type-of($gutter-styles) != 'map' {
$Styles: (-1px: $gutter-styles);
}
@else {
$Styles: sgs-get('gutter styles');
}
// Build 1st Depth Map
$Holder: ();
// Grids
@each $k, $v in $Grids {
$Holder: map-merge($Holder, ($k: ('grid': $v)));
}
// Gutters
@each $k, $v in $Gutters {
$Grid: map-get($Holder, $k);
$Map: ('gutter': $v);
@if $Grid != null {
$Grid: map-get($Grid, 'grid');
@if $Grid != null {
$Map: map-merge($Map, ('grid': $Grid));
}
}
$Holder: map-merge($Holder, ($k: $Map));
}
// Style
@each $k, $v in $Styles {
$Grid: map-get($Holder, $k);
$Gutter: map-get($Holder, $k);
$Map: ('style': $v);
@if $Grid != null {
$Grid: map-get($Grid, 'grid');
@if $Grid != null {
$Map: map-merge($Map, ('grid': $Grid));
}
}
@if $Gutter != null {
$Gutter: map-get($Gutter, 'gutter');
@if $Gutter != null {
$Map: map-merge($Map, ('gutter': $Gutter));
}
}
$Holder: map-merge($Holder, ($k: $Map));
}
$Holder: sort-map($Holder);
$Return: ();
// Build full stack for each breakpoint
@for $i from 1 through length($Holder) {
$Key: nth(nth($Holder, $i), 1);
$Value: nth(nth($Holder, $i), 2);
$Previous: ();
@if $i > 1 {
$Previous: nth(nth($Return, $i - 1), 2);
}
@if not map-has-key($Value, 'grid') {
$Sort-Grid: map-get($Previous, 'grid');
$Value: map-merge($Value, ('grid': $Sort-Grid));
}
@if not map-has-key($Value, 'gutter') {
$Sort-Gutter: map-get($Previous, 'gutter');
$Value: map-merge($Value, ('gutter': $Sort-Gutter));
}
@if not map-has-key($Value, 'style') {
$Sort-Style: map-get($Previous, 'style');
$Value: map-merge($Value, ('style': $Sort-Style));
}
$Return: map-merge($Return, ($Key: $Value));
}
@return $Return;
}
@mixin background-build($columns, $gutters, $gutter-styles, $color) {
$Background-Map: background-map($columns, $gutters, $gutter-styles);
$Display: true;
$Column-Color: $color;
$Inverse-Column-Color: mix(black, $color, 15%);
$Gutter-Color: mix(white, $color, 25%);
$Direction: named-direction(sgs-get('direction'));
$encodeMap:(
'%"':'%25%22',
'<':'%3C',
' ':'%20',
'=':'%3D',
'\"':'%22',
':':'%3A',
'/':'%2F',
'.':'%2E',
'>':'%3E',
'#':'%23',
'-':'%2D'
);
@each $bkpt, $def in $Background-Map {
$Grid: map-get($def, 'grid');
$Gutter: map-get($def, 'gutter');
$Style: map-get($def, 'style');
$Grid-Count: column-count($Grid);
$SVG: '';
$Gutter-Width: gutter-span($Gutter, $Grid, $Style);
@if unit($Gutter-Width) != '%' and unit($Gutter-Width) != '' {
$Gutter-Width: 0%;
}
@if $Style == 'fixed' {
$Gutter-Width: 0%;
}
$Counter-Width: 0%;
$holder: ();
@for $i from 1 through $Grid-Count {
$Holder-Gradient: ();
$Loop-Width: column-span(1, $i, $Grid, $Gutter, $Style);
@if index($Style, 'split') and $i == 1 {
$SVG: $SVG + ' ';
@each $char, $code in $encodeMap {
$index: str-index($SVG, $char);
@while $index {
$index: str-index($SVG, $char);
$SVG: str-slice($SVG, 1, $index - 1) + $code + str-slice($SVG, $index + str-length($char));
$index: str-index($SVG, $char);
}
}
@if $Display {
@if $bkpt != -1px {
@include breakpoint($bkpt) {
background-image: url('data:image/svg+xml,' + $SVG);
}
}
@else {
background-image: url('data:image/svg+xml,' + $SVG);
}
}
@else {
@warn 'Cannot generate a Background Grid for grid `#{$Grid}` with gutters `#{$Gutter}` and gutter style `#{$Style}`';
}
}
}
Singularity-1.8.0/stylesheets/singularitygs/helpers/_box-sizing.scss 0000664 0000000 0000000 00000001005 13077012456 0026102 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Box Sizing Mixin
//////////////////////////////
$box-sizing-extend: false !default;
@mixin box-sizing($value, $extend: $box-sizing-extend) {
@if $extend {
@extend %singularity-#{$value};
}
@else {
-moz-box-sizing: $value;
box-sizing: $value;
}
}
%singularity-content-box {
@include box-sizing(content-box, false);
}
%singularity-border-box {
@include box-sizing(border-box, false);
}
%singularity-padding-box {
@include box-sizing(padding-box, false);
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_clearfix.scss 0000664 0000000 0000000 00000000555 13077012456 0025617 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Clearfix Mixin
//////////////////////////////
$clearfix-extend: false !default;
@mixin clearfix($extend: $clearfix-extend) {
@if $extend {
@extend %singularity-clearfix;
}
@else {
&:after {
content: "";
display: table;
clear: both;
}
}
}
%singularity-clearfix {
@include clearfix(false);
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_columns.scss 0000664 0000000 0000000 00000000710 13077012456 0025473 0 ustar 00root root 0000000 0000000 @function end-row($span, $location, $columns) {
@if $location == 'last' or $location == 'omega' {
@return true;
}
@else {
@if $location + ($span - 1) == column-count($columns) {
@return true;
}
@else {
@return false;
}
}
}
@function start-row($location) {
@if $location == 'first' or $location == 'alpha' {
@return true;
}
@else if $location == 1 {
@return true;
}
@else {
@return false;
}
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_directions.scss 0000664 0000000 0000000 00000001570 13077012456 0026163 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Find Opposite Direction
//////////////////////////////
@function opposite-direction($dir) {
@if $dir == 'left' {
@return right;
}
@else if $dir == 'right' {
@return left;
}
@else if $dir == 'ltr' {
@return rtl;
}
@else if $dir == 'rtl' {
@return ltr;
}
@else if $dir == 'top' {
@return bottom;
}
@else if $dir == 'bottom' {
@return top;
}
@else {
@warn "#{$dir} is not a direction! Make sure your direction is all lowercase!";
@return false;
}
}
//////////////////////////////
// Find Direction Name
//////////////////////////////
@function named-direction($dir) {
@if $dir == 'ltr' {
@return left;
}
@else if $dir == 'rtl' {
@return right;
}
@else {
@warn "#{$dir} is not a valid HTML direction! Make sure you are using a valid HTML direction";
@return false;
}
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_find.scss 0000664 0000000 0000000 00000011147 13077012456 0024741 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Find Object Keys
//
// Returns
//////////////////////////////
@function find-object-keys($haystack) {
$Keys: map-keys($haystack);
$List: ();
@each $Key in $Keys {
@if $Key != -1px {
@if unit($Key) == 'em' {
$Key: $Key / 1em * 16px;
}
$List: append($List, $Key);
}
}
@return quicksort($List);
}
//////////////////////////////
// Find Object
//
// Finds relevant object
// Must be using Breakpoint to work properly
//////////////////////////////
@function find-object($haystack, $user-object: null) {
// If a user object has been passed in, bypass the whole function and just return that object.
@if $user-object != null and $user-object != false {
@return $user-object;
}
$Length: length($haystack);
$Mobile-First: sgs-get('mobile first');
// Haystack must be map
@if type-of($haystack) != 'map' {
@warn "DEPRECATION: In order to remove global variable naming conflicts, Singularity's settings have been moved into the single `$singularity` variable. Please refer to our documentation (https://github.com/Team-Sass/Singularity/wiki) on how to update your settings. In the next version of Singularity, this warning will be removed. #{nth($haystack, 1)} has been returned.";
@return nth($haystack, 1);
}
@if $Length > 1 {
// Grab Breakpoint Context
@if not function-exists(breakpoint-get-context) {
@warn "Responsive contexts require Breakpoint (https://github.com/Team-Sass/breakpoint). Please ensure that Breakpoint is imported and available for Singularity to use. First item used.";
@return map-get($haystack, -1px);
}
// Get Breakpoint Contexts
$Query-Min: breakpoint-get-context('min-width');
$Query-Max: breakpoint-get-context('max-width');
@if length($Query-Min) == 1 {
$Query-Min: nth($Query-Min, 1);
}
@else if length($Query-Min) > 1 {
@warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Default context is used.";
@return map-get($haystack, -1px);
}
@if length($Query-Max) == 1 {
$Query-Max: nth($Query-Max, 1);
}
@else if length($Query-Max) > 1 {
@warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Default context is used.";
@return map-get($haystack, -1px);
}
// If there is no min or max context, return first item
@if $Query-Min == false and $Query-Max == false {
$RETURN: map-get($haystack, -1px);
@return $RETURN;
}
// Convert to PX
@if $Query-Min != false and unit($Query-Min) == 'em' {
$Query-Min: $Query-Min / 1em * 16px;
}
@if $Query-Max != false and unit($Query-Max) == 'em' {
$Query-Max: $Query-Max / 1em * 16px;
}
$Find-Haystack: find-object-keys($haystack);
$Reverse-Haystack: reverse($Find-Haystack);
$Smallest: nth($Find-Haystack, 1);
$Largest: nth($Reverse-Haystack, 1);
$Context: $Query-Min;
@if not $Mobile-First {
$Context: $Query-Max;
}
// Loop over each item in Context to find if any of the items pass.
@each $Query-Context in $Context {
@if $Query-Context != false {
// If it's smallest than the smallest MQ, use the 1st grid
@if $Query-Context < $Smallest {
$RETURN: map-get($haystack, -1px);
@return $RETURN;
}
// If it's larger than or equal to the largest MQ, use the last grid
@else if $Query-Context >= $Largest {
$RETURN: map-get($haystack, $Largest);
@return $RETURN;
}
// If it's in between the smallest and largest, go run a check.
@else {
// Loop through each MQ.
@for $j from 1 through length($Reverse-Haystack) {
$Query: nth($Reverse-Haystack, $j);
// If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
@if ($Mobile-First) {
@if $Query-Context >= $Query {
$RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
@return $RETURN;
}
}
// If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
@else {
@if $Query-Context <= $Query {
$RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
@return $RETURN;
}
}
}
}
}
}
}
// All else fails, return the first item
@else {
$RETURN: map-get($haystack, -1px);
@return $RETURN;
}
}
Singularity-1.8.0/stylesheets/singularitygs/helpers/_layout.scss 0000664 0000000 0000000 00000006760 13077012456 0025343 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Wrapper mixin for overriding the global contexts as a block
//////////////////////////////
@mixin layout($grid: false, $gutter: false, $output-style: false, $gutter-style: false) {
@if type-of($grid) == 'map' {
$layout: $grid;
@if map-has-key($layout, 'grid') {
$grid: map-get($layout, 'grid');
}
@if map-has-key($layout, 'gutter') {
$gutter: map-get($layout, 'gutter');
}
@if map-has-key($layout, 'output style') {
$output-style: map-get($layout, 'output style');
}
@if map-has-key($layout, 'output') {
$output-style: map-get($layout, 'output');
}
@if map-has-key($layout, 'gutter style') {
$gutter-style: map-get($layout, 'gutter style');
}
}
// Private holder for current global context
$layout-private-grid-holder: sgs-get('grids');
$layout-private-gutter-holder: sgs-get('gutters');
$layout-private-output-holder: sgs-get('output');
$layout-private-gutter-style-holder: sgs-get('gutter styles');
// Overides current global contexts, but only if needed
@if $grid != false {
@include sgs-reset('grids');
@if type-of($grid) != 'map' {
@include sgs-change('grids', (-1px: $grid));
}
@else {
@include sgs-change('grids', $grid);
}
}
@if $gutter != false {
@include sgs-reset('gutters');
@if type-of($gutter) != 'map' {
@include sgs-change('gutters', (-1px: $gutter));
}
@else {
@include sgs-change('gutters', $gutter);
}
}
@if $output-style != false {
@include sgs-reset('output');
@include sgs-change('output', $output-style);
}
@if $gutter-style != false {
@include sgs-reset('gutter styles');
@if type-of($gutter-style) != 'map' {
@include sgs-change('gutter styles', (-1px: $gutter-style));
}
@else {
@include sgs-change('gutter styles', $gutter-style);
}
}
// All the things!
@content;
// REset ALL the settings
@include sgs-reset('grids');
@include sgs-reset('gutters');
@include sgs-reset('output');
@include sgs-reset('gutter styles');
// Resets global contexts
@include sgs-change('grids', $layout-private-grid-holder);
@include sgs-change('gutters', $layout-private-gutter-holder);
@include sgs-change('output', $layout-private-output-holder);
@include sgs-change('gutter styles', $layout-private-gutter-style-holder);
}
//////////////////////////////
// Layout At
// Wrapper mixin for a combined Breakpoint/Layout call
//////////////////////////////
@mixin layout-at($layout, $breakpoint) {
@include breakpoint($breakpoint) {
// If a single value is passed in, assume it's a grid
@if type-of($layout) != map {
@include layout($layout) {
@content;
}
}
// If it is a map, we've got key/values to work with
@else {
$grid: false;
$gutter: false;
$output-style: false;
$gutter-style: false;
@if map-has-key($layout, 'grid') {
$grid: map-get($layout, 'grid');
}
@if map-has-key($layout, 'gutter') {
$gutter: map-get($layout, 'gutter');
}
@if map-has-key($layout, 'output style') {
$output-style: map-get($layout, 'output style');
}
@if map-has-key($layout, 'output') {
$output-style: map-get($layout, 'output');
}
@if map-has-key($layout, 'gutter style') {
$gutter-style: map-get($layout, 'gutter style');
}
@include layout($grid, $gutter, $output-style, $gutter-style) {
@content;
}
}
}
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_sass-lists.scss 0000664 0000000 0000000 00000003125 13077012456 0026123 0 ustar 00root root 0000000 0000000 // ---------------------------------------------------------------------------
// Sass List Helpers
//
// - list-sum()
// - query-list()
// ---------------------------------------------------------------------------
// Functions
// Return the sum of all items in a list.
//
// list-sum($list)
// - $list :
@function list-sum($list) {
$sum: 0;
@each $item in $list {
$sum: $sum + $item;
}
@return $sum;
}
// Return list of index locations where a query appears in a list,
// including unit queries.
//
// query-list($list, $query [, $mode])
// - $list :
// - $query :
// - $mode : none | unit
// - "none" (default) runs a standard query.
// - "unit" finds all items with the same unit.
@function query-list(
$list,
$query,
$mode: none
) {
$return: ();
// loop through $list
@for $i from 1 through length($list) {
@if $mode == unit {
// if the list item matches the query, write where it is to the list.
@if unit(nth($list, $i)) == $query {
$return: append($return, $i);
}
}
@else {
// if the list item matches the query, write where it is to the list.
@if nth(nth($list, $i), 1) == $query {
$return: append($return, $i);
}
}
}
// if nothing matches then return false.
@if $return == () {
$return: false;
}
// return list.
@return $return;
}
// Reverses direction of a list
@function reverse($list) {
$length: length($list);
$return: ();
@for $i from 0 to $length {
$return: append($return, nth($list, $length - $i));
}
@return $return;
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_settings.scss 0000664 0000000 0000000 00000002745 13077012456 0025665 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Has Setting
//////////////////////////////
@function sgs-has($setting) {
@if map-has-key($singularity, $setting) {
@return true;
}
@else {
@return false;
}
}
//////////////////////////////
// Get Settings
//////////////////////////////
@function sgs-get($setting) {
@if sgs-has($setting) {
@return map-get($singularity, $setting);
}
@else {
@return map-get($Singularity-Settings, $setting);
}
}
//////////////////////////////
// Set Settings
//////////////////////////////
@function sgs-set($setting, $value) {
@if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null {
@warn "Words in Singularity settings should be spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed.";
}
$singularity: map-merge($singularity, ($setting: $value)) !global;
@return true;
}
@mixin sgs-change($setting, $value) {
$sgs-change: sgs-set($setting, $value);
}
@mixin sgs-set($setting, $value) {
@include sgs-change($setting, $value);
}
//////////////////////////////
// Remove Setting
//////////////////////////////
@function sgs-reset($settings...) {
@if length($settings) == 1 {
$settings: nth($settings, 1);
}
@each $setting in $settings {
$singularity: map-remove($singularity, $setting) !global;
}
@return true;
}
@mixin sgs-reset($settings...) {
$sgs-reset: sgs-reset($settings);
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_sort.scss 0000664 0000000 0000000 00000002303 13077012456 0025002 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Quicksort
// http://rosettacode.org/wiki/Sorting_algorithms/Quicksort
//////////////////////////////
@function quicksort($list) {
$QS-Less: ();
$QS-Equal: ();
$QS-Large: ();
$QS-Length: length($list);
$QS-Seed: round($QS-Length / 2);
@if $QS-Length > 1 {
$QS-Seed: nth($list, $QS-Seed);
@each $Item in $list {
@if $Item < $QS-Seed {
$QS-Less: append($QS-Less, $Item);
}
@else if $Item == $QS-Seed {
$QS-Equal: append($QS-Equal, $Item);
}
@else {
$QS-Large: append($QS-Large, $Item);
}
}
$QS-Less: quicksort($QS-Less);
$QS-Large: quicksort($QS-Large);
$QS-Return: join($QS-Less, $QS-Equal);
$QS-Return: join($QS-Return, $QS-Large);
@return $QS-Return;
}
@return $list;
}
//////////////////////////////
// Sort Map function
//////////////////////////////
@function sort-map($map, $reverse: false) {
$Sort-Map-Keys: quicksort(map-keys($map));
$Sort-Map-Map: ();
@if $reverse {
$Sort-Map-Keys: reverse($Sort-Map-Keys);
}
@each $key in $Sort-Map-Keys {
$Sort-Map-Map: map-merge($Sort-Map-Map, ($key: map-get($map, $key)));
}
@return $Sort-Map-Map;
} Singularity-1.8.0/stylesheets/singularitygs/helpers/_span-shared.scss 0000664 0000000 0000000 00000001015 13077012456 0026217 0 ustar 00root root 0000000 0000000 @mixin span-shared {
$include-border-box: sgs-get('include border box');
$include-clearfix: sgs-get('include clearfix');
@if $include-border-box {
@if mixin-exists(box-sizing) {
@include box-sizing(border-box);
}
@else {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
@if $include-clearfix {
@if mixin-exists(clearfix) {
@include clearfix;
}
@else {
&:after {
content: "";
display: table;
clear: both;
}
}
}
} Singularity-1.8.0/stylesheets/singularitygs/language/ 0000775 0000000 0000000 00000000000 13077012456 0023102 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/language/_parse-add.scss 0000664 0000000 0000000 00000003626 13077012456 0026005 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Parse add string
//
// Retrieve add and media query values from a definition
// parse-add($definition)
// $definition :
// - A list like: .25 at 300px
//
//////////////////////////////
@function parse-add($definition) {
$parse-find: ();
$parse-mq: null;
$parse-mq-find: false;
$Mobile-First: sgs-get('mobile first');
@each $item in $definition {
@if $item != 'at' and $parse-mq-find != true {
$parse-find: append($parse-find, $item, 'space');
}
@else if $item == 'at' {
$parse-mq-find: true;
}
@else {
$parse-mq: $item;
}
}
@if $parse-mq {
@if not function-exists(breakpoint) {
@warn "Responsive contexts require Breakpoint (https://github.com/Team-Sass/breakpoint). Please ensure that Breakpoint is imported and available for Singularity to use. Context set to -1px.";
$parse-mq: -1px;
}
@else {
$breakpoint-parse: breakpoint($parse-mq);
$breakpoint-parse: map-get($breakpoint-parse, 'context holder');
$breakpoint-mq: null;
@if $Mobile-First {
$breakpoint-mq: map-get($breakpoint-parse, 'min-width');
}
@else {
$breakpoint-mq: map-get($breakpoint-parse, 'max-width');
}
@if length($breakpoint-mq) > 1 {
@warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Context set to -1px.";
$parse-mq: -1px;
}
@else if length($breakpoint-mq) < 1 {
@warn "No " + if($Mobile-First, 'min-width', 'max-width') + ' context found. Please use a media query with the correct context. Context set to -1px.';
$parse-mq: -1px;
}
@else {
$parse-mq: nth($breakpoint-mq, 1);
}
}
}
@if $parse-mq and unit($parse-mq) == 'em' {
$parse-mq: $parse-mq / 1em * 16px;
}
@return ($parse-find $parse-mq);
}
Singularity-1.8.0/stylesheets/singularitygs/language/_parse-list.scss 0000664 0000000 0000000 00000002524 13077012456 0026224 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Parse natural language string
//
// Retrieve values from the natural language string.
// parse-string($var, $list)
// $var :
// - 'at'/'span'/'of' or any other keywords.
// - 'span' queries the unprefixed span declaration.
// - 'at' can also query first, last, alpha, and omega.
// - 'grid' will return the same as 'of'
// $list :
// - A list like this: last 2 of (1 1 2) push 1
//
//////////////////////////////
@function parse-span-list($var, $list) {
$found: false;
$grid: ();
// Loop through list.
@each $item in $list {
// if 'span' - return the first numeric.
// if keyword was found - return the following item.
@if (type-of($item) == number and $var == span and $found != 'grid') or $found == true {
// @if $found == true
@return $item;
}
// Special handling for Grids
@else if ($item == $var or $item == 'grid' or $item == 'of') and ($var == 'of' or $var == 'grid') {
$found: 'grid';
}
@else if $found == 'grid' {
@if type-of($item) == number {
$grid: append($grid, $item, 'space');
}
@else {
@return $grid;
}
}
// Any keyword - return the following value.
@else if $item == $var {
$found: true;
}
}
// Wasn't found.
@return false;
} Singularity-1.8.0/stylesheets/singularitygs/language/_span.scss 0000664 0000000 0000000 00000001034 13077012456 0025075 0 ustar 00root root 0000000 0000000 //////////////////////////////
// "Natural Language" Parsing
//
// Keywords:
// span: Column Span
// at: Column Location
// of: Context
// gutters: Gutters
// output: Output
//////////////////////////////
@mixin span($input) {
$span: nth($input, 1);
$location: parse-span-list('at', $input);
$context: parse-span-list('of', $input);
$gutter: parse-span-list('gutters', $input);
$output: parse-span-list('output', $input);
@include grid-span($span, $location, $context, $gutter, $output)
} Singularity-1.8.0/stylesheets/singularitygs/math/ 0000775 0000000 0000000 00000000000 13077012456 0022250 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/stylesheets/singularitygs/math/_columns.scss 0000664 0000000 0000000 00000005210 13077012456 0024762 0 ustar 00root root 0000000 0000000 //////////////////////////////
// Find width, in percentages, of the column span
//////////////////////////////
@function column-span($span, $location, $grid: null, $gutter: null, $gutter-style: null) {
// Find the grid and gutters
$grid: find-grid($grid);
$gutter: find-gutter($gutter);
$gutter-style: find-gutter-style($gutter-style);
@if fixed-gutter($grid, $gutter, $gutter-style) {
$gutter: 0;
}
// @debug $grid;
// @debug $gutter;
// Combine the grid and gutters
$grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
// @debug $grid-and-gutters;
// Equal width grid are easy! Deal with them!
@if type-of($grid) == 'number' or length($grid) == 1 {
$span-and-gutters: $span + $gutter * ($span - 1);
@return $span-and-gutters / $grid-and-gutters * 100%;
}
// Asymmetric lists are harder, so we're going to treat them as their own grid
@else if type-of($grid) == 'list' or length($grid) > 1 {
$span-and-gutters: 0;
@if $location == 1 and $span >= 1 {
@for $i from 1 through $span {
$span-and-gutters: $span-and-gutters + nth($grid, $i) + $gutter;
}
}
@else {
$total: $location + $span - 1;
@if $total != 0 {
@for $i from $location through $total {
$span-and-gutters: $span-and-gutters + nth($grid, $i) + $gutter;
}
}
}
$span-and-gutters: $span-and-gutters - $gutter;
@return $span-and-gutters / $grid-and-gutters * 100%;
}
@else {
@warn "Can't find a working set of grid! That's terrible!";
@return false;
}
}
//////////////////////////////
// Find the total sum of the grid
//////////////////////////////
@function column-sum($grid, $gutter, $gutter-style) {
$split: if(index($gutter-style, 'split'), true, false);
@if type-of($grid) == 'number' or length($grid) == 1 {
@if $split {
@return nth($grid, 1) + ((column-count(nth($grid, 1))) * nth($gutter, 1));
}
@else {
@return nth($grid, 1) + ((column-count(nth($grid, 1)) - 1) * nth($gutter, 1));
}
}
@else if type-of($grid) == 'list' {
$sum: 0;
@each $column in $grid {
$sum: $sum + nth($column, 1);
}
@if $split {
$sum: $sum + (column-count($grid)) * nth($gutter, 1);
}
@else {
$sum: $sum + (column-count($grid) - 1) * nth($gutter, 1);
}
@return $sum;
}
}
//////////////////////////////
// Find the number of grid
//////////////////////////////
@function column-count($grid) {
@if type-of($grid) == 'number' {
@return $grid;
}
@if type-of($grid) == 'list' {
@if length($grid) == 1 {
@return nth($grid, 1);
}
@else {
@return length($grid);
}
}
} Singularity-1.8.0/stylesheets/singularitygs/math/_context.scss 0000664 0000000 0000000 00000000125 13077012456 0024766 0 ustar 00root root 0000000 0000000 @function context($primary, $secondary) {
@return ($primary / $secondary) * 100%;
} Singularity-1.8.0/stylesheets/singularitygs/math/_grid.scss 0000664 0000000 0000000 00000000322 13077012456 0024226 0 ustar 00root root 0000000 0000000 @function grid-span($span, $location, $grid: false, $gutter: false, $gutter-style: false) {
@return column-span($span, $location, $grid, $gutter, $gutter-style) + gutter-span($gutter, $grid, $gutter-style);
} Singularity-1.8.0/stylesheets/singularitygs/math/_gutters.scss 0000664 0000000 0000000 00000000723 13077012456 0025003 0 ustar 00root root 0000000 0000000 @function gutter-span($gutter: false, $grid: false, $gutter-style: false) {
// Find the columns and gutters
$grid: find-grid($grid);
$gutter: find-gutter($gutter);
$gutter-style: find-gutter-style($gutter-style);
@if fixed-gutter($grid, $gutter, $gutter-style) {
@return nth($gutter, 1);
}
// Combine the columns and gutters
$grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
@return (nth($gutter, 1) / $grid-and-gutters) * 100%
} Singularity-1.8.0/tests/ 0000775 0000000 0000000 00000000000 13077012456 0015201 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/.unit_tests.rb 0000664 0000000 0000000 00000004056 13077012456 0020012 0 ustar 00root root 0000000 0000000 require 'compass'
require 'compass/exec'
require 'test/unit'
require 'diffy'
require 'colorize'
require 'pathname'
class TestCompassOutput < Test::Unit::TestCase
Compass.add_configuration 'config.rb'
Compass.configuration.project_path = Dir.pwd
# Remove all current Diff files
Dir.glob("#{Dir.pwd}/output/**/*.css.diff").each { |f| File.delete(f) }
Compass.compiler.sass_files.each do |sass_file|
test_name = File.basename(sass_file, '.*')
define_method "test_#{test_name}_compile " do
# Compiled CSS file path
test_file_pwd = Compass.compiler.corresponding_css_file(sass_file)
# Relative path of compiled CSS file from Tests directory
relative_pwd = Pathname.new(test_file_pwd).relative_path_from(Pathname.new("#{Dir.pwd}/output")).to_s
# Control files path
control_file_pwd = "#{Dir.pwd}/controls/" + relative_pwd
# The base path of the sub folders, making the folders if needed
base_pwd = relative_pwd.sub(File.basename(relative_pwd), '')
FileUtils.mkdir_p "#{Dir.pwd}/output/#{base_pwd}"
# Compiles Sass file
Compass.compiler.compile sass_file, test_file_pwd # Raises exception upon error
begin
# Assert that our test output matches our control output
passed = assert FileUtils.compare_file(test_file_pwd, control_file_pwd), "Compiled output for #{File.basename(sass_file)} does not match control output!".red
ensure
# If there is a failure, generate a diff of the files and put it with the compiled file
if !passed
test_file = File.open(test_file_pwd).read;
control_file = File.open(control_file_pwd).read;
diff_pwd = "#{Dir.pwd}/output/#{relative_pwd}.diff"
diff_content = Diffy::Diff.new(control_file, test_file, :include_diff_info => true)
File.open(diff_pwd, 'w') { |f| f.write(diff_content.to_s(:text)) }
puts "Control->Compiled diff output to ".yellow + " tests/output/#{relative_pwd}.diff ".colorize( :color => :blue, :background => :black)
end
end
end
end
end
Singularity-1.8.0/tests/config.rb 0000664 0000000 0000000 00000001237 13077012456 0016776 0 ustar 00root root 0000000 0000000 # Require any additional compass plugins here.]
require 'breakpoint'
# File system locations
sass_dir = 'tests'
css_dir = 'output'
# Import latest breakpoint library
add_import_path '../stylesheets'
# Set to true for easier debugging
line_comments = false
# preferred_syntax = :sass
# CSS output style - :nested, :expanded, :compact, or :compressed
output_style = :expanded
# Determine whether Compass asset helper functions generate relative
# or absolute paths
relative_assets = true
# Learn more:
# http://compass-style.org/docs/tutorials/configuration-reference/
sass_options = {:sourcemap => false} Singularity-1.8.0/tests/controls/ 0000775 0000000 0000000 00000000000 13077012456 0017044 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/controls/01-settings/ 0000775 0000000 0000000 00000000000 13077012456 0021122 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/controls/01-settings/01-settings.css 0000664 0000000 0000000 00000007740 13077012456 0023722 0 ustar 00root root 0000000 0000000 .setting-get {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_test: "sgs-get('output')";
_result: "isolation";
}
.setting-set {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_default: "ltr";
_test: "@include sgs-change('direction', 'rtl')";
_new: "rtl";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("direction": "rtl")';
}
.setting-has {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("direction": "rtl")';
_test: "sgs-has('output')";
_result: false;
_test: "sgs-has('direction')";
_result: true;
}
.setting-reset {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("direction": "rtl")';
_test: "@include sgs-reset('direction')";
_exists: false;
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
}
.setting-reset--multiple {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_test: "@include add-grid('2 4 6')";
_test: "@include add-gutter('.25')";
_test: "@include sgs-change('direction', 'rtl')";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: "2 4 6"), "gutters": (-1px: ".25"), "direction": "rtl")';
_test: "@include sgs-reset('grids', 'gutters')";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("direction": "rtl")';
}
Singularity-1.8.0/tests/controls/01-settings/02-grids.css 0000664 0000000 0000000 00000003550 13077012456 0023166 0 ustar 00root root 0000000 0000000 .add-grid-basic {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_grid: "@include add-grid(3)";
_grid: "@include add-grid(5 at 500px)";
_grid: "@include add-grid(1 3 5 at 700px)";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5))';
}
.add-grid-breakpoint {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_grid: "@include add-grid(3)";
_grid: "@include add-grid(5 at 500px min-resolution 1.5dppx)";
_grid: "@include add-grid(1 3 5 at 700px, no-query .no-mq)";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5))';
}
Singularity-1.8.0/tests/controls/01-settings/03-gutters.css 0000664 0000000 0000000 00000003634 13077012456 0023557 0 ustar 00root root 0000000 0000000 .add-gutter-basic {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_gutter: "@include add-gutter(0.25)";
_gutter: "@include add-gutter(0.35 at 500px)";
_gutter: "@include add-gutter(0.55 at 700px)";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55))';
}
.add-gutter-breakpoint {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_gutter: "@include add-gutter(0.25)";
_gutter: "@include add-gutter(0.35 at 500px min-resolution 1.5dppx)";
_gutter: "@include add-gutter(0.55 at 700px, no-query .no-mq)";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55))';
}
Singularity-1.8.0/tests/controls/01-settings/04-gutter-styles.css 0000664 0000000 0000000 00000004201 13077012456 0024705 0 ustar 00root root 0000000 0000000 .add-gutter-style-basic {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: "()";
_gutter-style: "@include add-gutter-style(split)";
_gutter-style: "@include add-gutter-style(fixed at 500px)";
_gutter-style: "@include add-gutter-style(opposite fixed at 700px)";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("gutter styles": (-1px: "split", 500px: "fixed", 700px: "opposite fixed"))';
}
.add-gutter-style-breakpoint {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("gutter styles": (-1px: "split", 500px: "fixed", 700px: "opposite fixed"))';
_gutter-style: "@include add-gutter-style(split)";
_gutter-style: "@include add-gutter-style(fixed at 500px min-resolution 1.5dppx)";
_gutter-style: "@include add-gutter-style(opposite fixed at 700px, no-query .no-mq)";
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("gutter styles": (-1px: "split", 500px: "fixed", 700px: "opposite fixed"))';
}
Singularity-1.8.0/tests/controls/02-helpers/ 0000775 0000000 0000000 00000000000 13077012456 0020725 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/controls/02-helpers/01-find.css 0000664 0000000 0000000 00000005756 13077012456 0022612 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5), "gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55), "gutter styles": (-1px: "split", 500px: "fixed", 700px: "opposite fixed"))';
}
.find-grid {
_grid: "(-1px: 3, 500px: 5, 700px: 1 3 5)";
_find-no-override: "3";
_find-override: "2 4 6";
}
@media (min-width: 499px) {
.find-grid {
_grid: "(-1px: 3, 500px: 5, 700px: 1 3 5)";
_find-no-override: "3";
_find-override: "2 4 6";
}
}
@media (min-width: 500px) {
.find-grid {
_grid: "(-1px: 3, 500px: 5, 700px: 1 3 5)";
_find-no-override: "5";
_find-override: "2 4 6";
}
}
@media (min-width: 699px) {
.find-grid {
_grid: "(-1px: 3, 500px: 5, 700px: 1 3 5)";
_find-no-override: "5";
_find-override: "2 4 6";
}
}
@media (min-width: 700px) {
.find-grid {
_grid: "(-1px: 3, 500px: 5, 700px: 1 3 5)";
_find-no-override: "1 3 5";
_find-override: "2 4 6";
}
}
.find-gutter {
_gutter: "(-1px: 0.25, 500px: 0.35, 700px: 0.55)";
_find-no-override: "0.25";
_find-override: "0.4";
}
@media (min-width: 499px) {
.find-gutter {
_gutter: "(-1px: 0.25, 500px: 0.35, 700px: 0.55)";
_find-no-override: "0.25";
_find-override: "0.4";
}
}
@media (min-width: 500px) {
.find-gutter {
_gutter: "(-1px: 0.25, 500px: 0.35, 700px: 0.55)";
_find-no-override: "0.35";
_find-override: "0.4";
}
}
@media (min-width: 699px) {
.find-gutter {
_gutter: "(-1px: 0.25, 500px: 0.35, 700px: 0.55)";
_find-no-override: "0.35";
_find-override: "0.4";
}
}
@media (min-width: 700px) {
.find-gutter {
_gutter: "(-1px: 0.25, 500px: 0.35, 700px: 0.55)";
_find-no-override: "0.55";
_find-override: "0.4";
}
}
.find-gutter-style {
_gutter-style: '(-1px: "split", 500px: "fixed", 700px: "opposite fixed")';
_find-no-override: "split";
_find-override: "split fixed";
}
@media (min-width: 499px) {
.find-gutter-style {
_gutter-style: '(-1px: "split", 500px: "fixed", 700px: "opposite fixed")';
_find-no-override: "split";
_find-override: "split fixed";
}
}
@media (min-width: 500px) {
.find-gutter-style {
_gutter-style: '(-1px: "split", 500px: "fixed", 700px: "opposite fixed")';
_find-no-override: "fixed";
_find-override: "split fixed";
}
}
@media (min-width: 699px) {
.find-gutter-style {
_gutter-style: '(-1px: "split", 500px: "fixed", 700px: "opposite fixed")';
_find-no-override: "fixed";
_find-override: "split fixed";
}
}
@media (min-width: 700px) {
.find-gutter-style {
_gutter-style: '(-1px: "split", 500px: "fixed", 700px: "opposite fixed")';
_find-no-override: "opposite fixed";
_find-override: "split fixed";
}
}
Singularity-1.8.0/tests/controls/02-helpers/02-layout.css 0000664 0000000 0000000 00000003757 13077012456 0023207 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5), "gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55), "gutter styles": (-1px: "split", 500px: "fixed", 700px: "opposite fixed"))';
_grid-override: 2 4 6;
_gutter-override: 0.4;
_gutter-style-override: "split fixed";
}
.find-grid {
_find: "3";
_find-layout: "2 4 6";
}
@media (min-width: 499px) {
.find-grid {
_find: "3";
_find-layout: "2 4 6";
}
}
@media (min-width: 500px) {
.find-grid {
_find: "5";
_find-layout: "2 4 6";
}
}
@media (min-width: 699px) {
.find-grid {
_find: "5";
_find-layout: "2 4 6";
}
}
@media (min-width: 700px) {
.find-grid {
_find: "1 3 5";
_find-layout: "2 4 6";
}
}
.find-gutter {
_find: "0.25";
_find-layout: "0.4";
}
@media (min-width: 499px) {
.find-gutter {
_find: "0.25";
_find-layout: "0.4";
}
}
@media (min-width: 500px) {
.find-gutter {
_find: "0.35";
_find-layout: "0.4";
}
}
@media (min-width: 699px) {
.find-gutter {
_find: "0.35";
_find-layout: "0.4";
}
}
@media (min-width: 700px) {
.find-gutter {
_find: "0.55";
_find-layout: "0.4";
}
}
.find-gutter-style {
_find: "split";
_find-layout: "split fixed";
}
@media (min-width: 499px) {
.find-gutter-style {
_find: "split";
_find-layout: "split fixed";
}
}
@media (min-width: 500px) {
.find-gutter-style {
_find: "fixed";
_find-layout: "split fixed";
}
}
@media (min-width: 699px) {
.find-gutter-style {
_find: "fixed";
_find-layout: "split fixed";
}
}
@media (min-width: 700px) {
.find-gutter-style {
_find: "opposite fixed";
_find-layout: "split fixed";
}
}
Singularity-1.8.0/tests/controls/02-helpers/03-background.css 0000664 0000000 0000000 00000016002 13077012456 0023775 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("debug": true, "grids": (-1px: 3, 500px: 5, 700px: 1 3 5), "gutters": (-1px: 0.25, 450px: 0.35, 650px: 1em), "gutter styles": (-1px: "split", 400px: "fixed", 600px: "opposite fixed"))';
}
.background {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23dd8f56%22%20width%3D%223%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%223%2E33333%25%22%20fill%3D%22chocolate%22%20width%3D%2226%2E66667%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2230%25%22%20fill%3D%22%23dd8f56%22%20width%3D%226%2E66667%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2236%2E66667%25%22%20fill%3D%22chocolate%22%20width%3D%2226%2E66667%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2263%2E33333%25%22%20fill%3D%22%23dd8f56%22%20width%3D%226%2E66667%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2270%25%22%20fill%3D%22chocolate%22%20width%3D%2226%2E66667%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2296%2E66667%25%22%20fill%3D%22%23dd8f56%22%20width%3D%223%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}
@media (min-width: 400px) {
.background {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22chocolate%22%20width%3D%2233%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2233%2E33333%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2233%2E58333%25%22%20fill%3D%22%23b3591a%22%20width%3D%2233%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2266%2E91667%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2267%2E16667%25%22%20fill%3D%22chocolate%22%20width%3D%2233%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 450px) {
.background {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22chocolate%22%20width%3D%2233%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2233%2E33333%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E35%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2233%2E68333%25%22%20fill%3D%22%23b3591a%22%20width%3D%2233%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2267%2E01667%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E35%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2267%2E36667%25%22%20fill%3D%22chocolate%22%20width%3D%2233%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 500px) {
.background {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22chocolate%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2220%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E35%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2220%2E35%25%22%20fill%3D%22%23b3591a%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2240%2E35%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E35%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2240%2E7%25%22%20fill%3D%22chocolate%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2260%2E7%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E35%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2261%2E05%25%22%20fill%3D%22%23b3591a%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2281%2E05%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%2E35%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2281%2E4%25%22%20fill%3D%22chocolate%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 600px) {
.background {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22chocolate%22%20width%3D%2215%2E625%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2215%2E625%25%22%20fill%3D%22%23dd8f56%22%20width%3D%225%2E46875%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2221%2E09375%25%22%20fill%3D%22chocolate%22%20width%3D%2215%2E625%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2236%2E71875%25%22%20fill%3D%22%23dd8f56%22%20width%3D%225%2E46875%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2242%2E1875%25%22%20fill%3D%22chocolate%22%20width%3D%2215%2E625%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2257%2E8125%25%22%20fill%3D%22%23dd8f56%22%20width%3D%225%2E46875%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2263%2E28125%25%22%20fill%3D%22chocolate%22%20width%3D%2215%2E625%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2278%2E90625%25%22%20fill%3D%22%23dd8f56%22%20width%3D%225%2E46875%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2284%2E375%25%22%20fill%3D%22chocolate%22%20width%3D%2215%2E625%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 650px) {
.background {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22chocolate%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2220%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2220%25%22%20fill%3D%22%23b3591a%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2240%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2240%25%22%20fill%3D%22chocolate%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2260%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2260%25%22%20fill%3D%22%23b3591a%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2280%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2280%25%22%20fill%3D%22chocolate%22%20width%3D%2220%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}
}
@media (min-width: 700px) {
.background {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22chocolate%22%20width%3D%2211%2E11111%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2211%2E11111%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2211%2E11111%25%22%20fill%3D%22%23b3591a%22%20width%3D%2233%2E33333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2244%2E44444%25%22%20fill%3D%22%23dd8f56%22%20width%3D%220%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2244%2E44444%25%22%20fill%3D%22chocolate%22%20width%3D%2255%2E55556%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}
}
Singularity-1.8.0/tests/controls/02-helpers/04-layout-at.css 0000664 0000000 0000000 00000004252 13077012456 0023602 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5), "gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55), "gutter styles": (-1px: "split", 500px: "fixed", 700px: "opposite fixed"))';
_grid-override: 2 4 6;
_gutter-override: 0.4;
_gutter-style-override: "split fixed";
}
.find-grid {
_map: 'false';
_find: "3";
_map: 'true';
_find: "3";
}
@media (min-width: 499px) {
.find-grid {
_map: 'false';
_find-layout: "2 4 6";
}
}
@media (min-width: 500px) {
.find-grid {
_map: 'false';
_find-layout: "2 4 6";
}
}
@media (min-width: 699px) {
.find-grid {
_map: 'false';
_find-layout: "2 4 6";
}
}
@media (min-width: 700px) {
.find-grid {
_map: 'false';
_find-layout: "2 4 6";
}
}
@media (min-width: 499px) {
.find-grid {
_map: 'true';
_find-layout: "2 4 6";
}
}
@media (min-width: 500px) {
.find-grid {
_map: 'true';
_find-layout: "2 4 6";
}
}
@media (min-width: 699px) {
.find-grid {
_map: 'true';
_find-layout: "2 4 6";
}
}
@media (min-width: 700px) {
.find-grid {
_map: 'true';
_find-layout: "2 4 6";
}
}
.find-gutter {
_find: "0.25";
}
@media (min-width: 499px) {
.find-gutter {
_find-layout: "0.4";
}
}
@media (min-width: 500px) {
.find-gutter {
_find-layout: "0.4";
}
}
@media (min-width: 699px) {
.find-gutter {
_find-layout: "0.4";
}
}
@media (min-width: 700px) {
.find-gutter {
_find-layout: "0.4";
}
}
.find-gutter-style {
_find: "split";
}
@media (min-width: 499px) {
.find-gutter-style {
_find-layout: "split fixed";
}
}
@media (min-width: 500px) {
.find-gutter-style {
_find-layout: "split fixed";
}
}
@media (min-width: 699px) {
.find-gutter-style {
_find-layout: "split fixed";
}
}
@media (min-width: 700px) {
.find-gutter-style {
_find-layout: "split fixed";
}
}
Singularity-1.8.0/tests/controls/02-helpers/05-layout--map.css 0000664 0000000 0000000 00000003757 13077012456 0024042 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5), "gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55), "gutter styles": (-1px: "split", 500px: "fixed", 700px: "opposite fixed"))';
_grid-override: 2 4 6;
_gutter-override: 0.4;
_gutter-style-override: "split fixed";
}
.find-grid {
_find: "3";
_find-layout: "2 4 6";
}
@media (min-width: 499px) {
.find-grid {
_find: "3";
_find-layout: "2 4 6";
}
}
@media (min-width: 500px) {
.find-grid {
_find: "5";
_find-layout: "2 4 6";
}
}
@media (min-width: 699px) {
.find-grid {
_find: "5";
_find-layout: "2 4 6";
}
}
@media (min-width: 700px) {
.find-grid {
_find: "1 3 5";
_find-layout: "2 4 6";
}
}
.find-gutter {
_find: "0.25";
_find-layout: "0.4";
}
@media (min-width: 499px) {
.find-gutter {
_find: "0.25";
_find-layout: "0.4";
}
}
@media (min-width: 500px) {
.find-gutter {
_find: "0.35";
_find-layout: "0.4";
}
}
@media (min-width: 699px) {
.find-gutter {
_find: "0.35";
_find-layout: "0.4";
}
}
@media (min-width: 700px) {
.find-gutter {
_find: "0.55";
_find-layout: "0.4";
}
}
.find-gutter-style {
_find: "split";
_find-layout: "split fixed";
}
@media (min-width: 499px) {
.find-gutter-style {
_find: "split";
_find-layout: "split fixed";
}
}
@media (min-width: 500px) {
.find-gutter-style {
_find: "fixed";
_find-layout: "split fixed";
}
}
@media (min-width: 699px) {
.find-gutter-style {
_find: "fixed";
_find-layout: "split fixed";
}
}
@media (min-width: 700px) {
.find-gutter-style {
_find: "opposite fixed";
_find-layout: "split fixed";
}
}
Singularity-1.8.0/tests/controls/03-spans/ 0000775 0000000 0000000 00000000000 13077012456 0020410 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/controls/03-spans/01-functions.css 0000664 0000000 0000000 00000011103 13077012456 0023344 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5 7), "gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55), "gutter styles": (-1px: "split", 500px: "split fixed", 700px: "opposite fixed"))';
}
/**
* Returns the percentage of columns plus inner gutters (if any)
**/
.column-span {
_grid: 3;
_column-start: "column-span(1, 1)";
_column-start: 26.66667%;
_column-end: "column-span(1, 3)";
_column-end: 26.66667%;
_column-multiple: "column-span(2, 1)";
_column-multiple: 60%;
}
@media (min-width: 499px) {
.column-span {
_grid: 3;
_column-start: "column-span(1, 1)";
_column-start: 26.66667%;
_column-end: "column-span(1, 3)";
_column-end: 26.66667%;
_column-multiple: "column-span(2, 2)";
_column-multiple: 60%;
}
}
@media (min-width: 500px) {
.column-span {
_grid: 5;
_column-start: "column-span(1, 1)";
_column-start: 15.625%;
_column-end: "column-span(1, 5)";
_column-end: 15.625%;
_column-multiple: "column-span(2, 2)";
_column-multiple: 36.71875%;
}
}
@media (min-width: 699px) {
.column-span {
_grid: 5;
_column-start: "column-span(1, 1)";
_column-start: 15.625%;
_column-end: "column-span(1, 5)";
_column-end: 15.625%;
_column-multiple: "column-span(2, 2)";
_column-multiple: 36.71875%;
}
}
@media (min-width: 700px) {
.column-span {
_grid: 1 3 5 7;
_column-start: "column-span(1, 1)";
_column-start: 5.66572%;
_column-end: "column-span(1, 4)";
_column-end: 39.66006%;
_column-multiple: "column-span(2, 2)";
_column-multiple: 48.44193%;
}
}
/**
* Returns the percentage of a single gutter
**/
.gutter-span {
_grid: 3;
_gutter-start: "gutter-span(1, 1)";
_gutter-start: 50%;
_gutter-end: "gutter-span(1, 3)";
_gutter-end: 16.66667%;
_gutter-multiple: "gutter-span(2, 1)";
_gutter-multiple: 66.66667%;
}
@media (min-width: 499px) {
.gutter-span {
_grid: 3;
_gutter-start: "gutter-span(1, 1)";
_gutter-start: 50%;
_gutter-end: "gutter-span(1, 3)";
_gutter-end: 16.66667%;
_gutter-multiple: "gutter-span(2, 2)";
_gutter-multiple: 33.33333%;
}
}
@media (min-width: 500px) {
.gutter-span {
_grid: 5;
_gutter-start: "gutter-span(1, 1)";
_gutter-start: 100%;
_gutter-end: "gutter-span(1, 5)";
_gutter-end: 11.11111%;
_gutter-multiple: "gutter-span(2, 2)";
_gutter-multiple: 50%;
}
}
@media (min-width: 699px) {
.gutter-span {
_grid: 5;
_gutter-start: "gutter-span(1, 1)";
_gutter-start: 100%;
_gutter-end: "gutter-span(1, 5)";
_gutter-end: 11.11111%;
_gutter-multiple: "gutter-span(2, 2)";
_gutter-multiple: 50%;
}
}
@media (min-width: 700px) {
.gutter-span {
_grid: 1 3 5 7;
_gutter-start: "gutter-span(1, 1)";
_gutter-start: 100%;
_gutter-end: "gutter-span(1, 4)";
_gutter-end: 14.28571%;
_gutter-multiple: "gutter-span(2, 2)";
_gutter-multiple: 50%;
}
}
/**
* Returns the percentage of columns plus inner gutters (if any) plus one additional gutter (if not the last item)
**/
.grid-span {
_grid: 3;
_grid-start: "grid-span(1, 1)";
_grid-start: 33.33333%;
_grid-end: "grid-span(1, 3)";
_grid-end: 33.33333%;
_grid-multiple: "grid-span(2, 1)";
_grid-multiple: 66.66667%;
}
@media (min-width: 499px) {
.grid-span {
_grid: 3;
_grid-start: "grid-span(1, 1)";
_grid-start: 33.33333%;
_grid-end: "grid-span(1, 3)";
_grid-end: 33.33333%;
_grid-multiple: "grid-span(2, 2)";
_grid-multiple: 66.66667%;
}
}
@media (min-width: 500px) {
.grid-span {
_grid: 5;
_grid-start: "grid-span(1, 1)";
_grid-start: 21.09375%;
_grid-end: "grid-span(1, 5)";
_grid-end: 21.09375%;
_grid-multiple: "grid-span(2, 2)";
_grid-multiple: 42.1875%;
}
}
@media (min-width: 699px) {
.grid-span {
_grid: 5;
_grid-start: "grid-span(1, 1)";
_grid-start: 21.09375%;
_grid-end: "grid-span(1, 5)";
_grid-end: 21.09375%;
_grid-multiple: "grid-span(2, 2)";
_grid-multiple: 42.1875%;
}
}
@media (min-width: 700px) {
.grid-span {
_grid: 1 3 5 7;
_grid-start: "grid-span(1, 1)";
_grid-start: 8.78187%;
_grid-end: "grid-span(1, 4)";
_grid-end: 42.7762%;
_grid-multiple: "grid-span(2, 2)";
_grid-multiple: 51.55807%;
}
}
Singularity-1.8.0/tests/controls/03-spans/02-grid-span.css 0000664 0000000 0000000 00000006731 13077012456 0023234 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5 7), "gutters": (-1px: 0.25, 500px: 10px, 700px: 1em), "gutter styles": (-1px: "split", 700px: "opposite"))';
}
.grid-span {
_grid: 3;
_gutter: 0.25;
_gutter-style: "split";
_grid-span-start: "@include grid-span(1, 1)";
width: 26.66667%;
float: left;
margin-right: -100%;
margin-left: 3.33333%;
clear: none;
_grid-span-end: "@include grid-span(1, 3)";
width: 26.66667%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
_grid-span-multiple: "@include grid-span(2, 2)";
width: 60%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
}
@media (min-width: 499px) {
.grid-span {
_grid: 3;
_gutter: 0.25;
_gutter-style: "split";
_grid-span-start: "@include grid-span(1, 1)";
width: 26.66667%;
float: left;
margin-right: -100%;
margin-left: 3.33333%;
clear: none;
_grid-span-end: "@include grid-span(1, 3)";
width: 26.66667%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
_grid-span-multiple: "@include grid-span(2, 2)";
width: 60%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
}
}
@media (min-width: 500px) {
.grid-span {
_grid: 5;
_gutter: 10px;
_gutter-style: "split";
_grid-span-start: "@include grid-span(1, 1)";
width: 20%;
float: left;
margin-right: -100%;
clear: none;
padding-left: 5px;
padding-right: 5px;
_grid-span-end: "@include grid-span(1, 5)";
width: 20%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-left: 5px;
padding-right: 5px;
_grid-span-multiple: "@include grid-span(2, 2)";
width: 40%;
float: left;
margin-right: -100%;
margin-left: 20%;
clear: none;
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 699px) {
.grid-span {
_grid: 5;
_gutter: 10px;
_gutter-style: "split";
_grid-span-start: "@include grid-span(1, 1)";
width: 20%;
float: left;
margin-right: -100%;
clear: none;
padding-left: 5px;
padding-right: 5px;
_grid-span-end: "@include grid-span(1, 5)";
width: 20%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-left: 5px;
padding-right: 5px;
_grid-span-multiple: "@include grid-span(2, 2)";
width: 40%;
float: left;
margin-right: -100%;
margin-left: 20%;
clear: none;
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 700px) {
.grid-span {
_grid: 1 3 5 7;
_gutter: 1em;
_gutter-style: "opposite";
_grid-span-start: "@include grid-span(1, 1)";
width: 6.25%;
float: left;
margin-right: -100%;
clear: none;
padding-right: 1em;
_grid-span-end: "@include grid-span(1, 4)";
width: 43.75%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-right: 0;
_grid-span-multiple: "@include grid-span(2, 2)";
width: 50%;
float: left;
margin-right: -100%;
margin-left: 6.25%;
clear: none;
padding-right: 1em;
}
}
Singularity-1.8.0/tests/controls/03-spans/03-float-span.css 0000664 0000000 0000000 00000006274 13077012456 0023417 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5 7), "gutters": (-1px: 0.25, 500px: 10px, 700px: 1em), "gutter styles": (-1px: "split", 700px: "opposite"))';
}
.float-span {
_grid: 3;
_gutter: 0.25;
_gutter-style: "split";
_float-span-start: "@include float-span(1, 1)";
width: 26.66667%;
clear: right;
float: left;
margin-left: 3.33333%;
margin-right: 3.33333%;
_float-span-end: "@include float-span(1, 3)";
width: 26.66667%;
clear: right;
float: right;
margin-left: 0;
margin-right: 3.33333%;
_float-span-multiple: "@include float-span(2, 2)";
width: 60%;
clear: right;
float: right;
margin-left: 0;
margin-right: 3.33333%;
}
@media (min-width: 499px) {
.float-span {
_grid: 3;
_gutter: 0.25;
_gutter-style: "split";
_float-span-start: "@include float-span(1, 1)";
width: 26.66667%;
clear: right;
float: left;
margin-left: 3.33333%;
margin-right: 3.33333%;
_float-span-end: "@include float-span(1, 3)";
width: 26.66667%;
clear: right;
float: right;
margin-left: 0;
margin-right: 3.33333%;
_float-span-multiple: "@include float-span(2, 2)";
width: 60%;
clear: right;
float: right;
margin-left: 0;
margin-right: 3.33333%;
}
}
@media (min-width: 500px) {
.float-span {
_grid: 5;
_gutter: 10px;
_gutter-style: "split";
_float-span-start: "@include float-span(1, 1)";
width: 20%;
clear: right;
float: left;
padding-left: 5px;
padding-right: 5px;
_float-span-end: "@include float-span(1, 5)";
width: 20%;
clear: right;
float: right;
padding-left: 5px;
padding-right: 5px;
_float-span-multiple: "@include float-span(2, 2)";
width: 40%;
clear: right;
float: left;
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 699px) {
.float-span {
_grid: 5;
_gutter: 10px;
_gutter-style: "split";
_float-span-start: "@include float-span(1, 1)";
width: 20%;
clear: right;
float: left;
padding-left: 5px;
padding-right: 5px;
_float-span-end: "@include float-span(1, 5)";
width: 20%;
clear: right;
float: right;
padding-left: 5px;
padding-right: 5px;
_float-span-multiple: "@include float-span(2, 2)";
width: 40%;
clear: right;
float: left;
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 700px) {
.float-span {
_grid: 1 3 5 7;
_gutter: 1em;
_gutter-style: "opposite";
_float-span-start: "@include float-span(1, 1)";
width: 6.25%;
clear: right;
float: left;
padding-right: 1em;
_float-span-end: "@include float-span(1, 4)";
width: 43.75%;
clear: right;
float: right;
padding-right: 0;
_float-span-multiple: "@include float-span(2, 2)";
width: 50%;
clear: right;
float: left;
padding-right: 1em;
}
}
Singularity-1.8.0/tests/controls/03-spans/04-isolation-span.css 0000664 0000000 0000000 00000007210 13077012456 0024303 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5 7), "gutters": (-1px: 0.25, 500px: 10px, 700px: 1em), "gutter styles": (-1px: "split", 700px: "opposite"))';
}
.isolation-span {
_grid: 3;
_gutter: 0.25;
_gutter-style: "split";
_isolation-span-start: "@include isolation-span(1, 1)";
width: 26.66667%;
float: left;
margin-right: -100%;
margin-left: 3.33333%;
clear: none;
_isolation-span-end: "@include isolation-span(1, 3)";
width: 26.66667%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
_isolation-span-multiple: "@include isolation-span(2, 2)";
width: 60%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
}
@media (min-width: 499px) {
.isolation-span {
_grid: 3;
_gutter: 0.25;
_gutter-style: "split";
_isolation-span-start: "@include isolation-span(1, 1)";
width: 26.66667%;
float: left;
margin-right: -100%;
margin-left: 3.33333%;
clear: none;
_isolation-span-end: "@include isolation-span(1, 3)";
width: 26.66667%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
_isolation-span-multiple: "@include isolation-span(2, 2)";
width: 60%;
float: right;
margin-left: 0;
margin-right: 3.33333%;
clear: none;
}
}
@media (min-width: 500px) {
.isolation-span {
_grid: 5;
_gutter: 10px;
_gutter-style: "split";
_isolation-span-start: "@include isolation-span(1, 1)";
width: 20%;
float: left;
margin-right: -100%;
clear: none;
padding-left: 5px;
padding-right: 5px;
_isolation-span-end: "@include isolation-span(1, 5)";
width: 20%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-left: 5px;
padding-right: 5px;
_isolation-span-multiple: "@include isolation-span(2, 2)";
width: 40%;
float: left;
margin-right: -100%;
margin-left: 20%;
clear: none;
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 699px) {
.isolation-span {
_grid: 5;
_gutter: 10px;
_gutter-style: "split";
_isolation-span-start: "@include isolation-span(1, 1)";
width: 20%;
float: left;
margin-right: -100%;
clear: none;
padding-left: 5px;
padding-right: 5px;
_isolation-span-end: "@include isolation-span(1, 5)";
width: 20%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-left: 5px;
padding-right: 5px;
_isolation-span-multiple: "@include isolation-span(2, 2)";
width: 40%;
float: left;
margin-right: -100%;
margin-left: 20%;
clear: none;
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 700px) {
.isolation-span {
_grid: 1 3 5 7;
_gutter: 1em;
_gutter-style: "opposite";
_isolation-span-start: "@include isolation-span(1, 1)";
width: 6.25%;
float: left;
margin-right: -100%;
clear: none;
padding-right: 1em;
_isolation-span-end: "@include isolation-span(1, 4)";
width: 43.75%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-right: 0;
_isolation-span-multiple: "@include isolation-span(2, 2)";
width: 50%;
float: left;
margin-right: -100%;
margin-left: 6.25%;
clear: none;
padding-right: 1em;
}
}
Singularity-1.8.0/tests/controls/03-spans/05-calc-span.css 0000664 0000000 0000000 00000011602 13077012456 0023205 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 300px 1 3, 500px: 2 100px 1 5 200px, 700px: 1 3 5 7), "gutters": (-1px: 10px, 500px: 1em, 700px: 3%), "gutter styles": (-1px: "split", 700px: "opposite"))';
}
.calc-span {
_grid: 300px 1 3;
_gutter: 10px;
_gutter-style: "split";
_calc-span-start: "@include calc-span(1, 1)";
width: 300px;
float: left;
margin-right: -100%;
margin-left: 5px;
_calc-span-end: "@include calc-span(1, 3)";
width: -webkit-calc((((100% - (300px + 30px)) / (4))) * 3);
width: calc((((100% - (300px + 30px)) / (4))) * 3);
float: right;
margin-left: 0;
margin-right: 5px;
_calc-span-multiple: "@include calc-span(2, 2)";
width: -webkit-calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
width: calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
float: right;
margin-left: 0;
margin-right: 5px;
}
@media (min-width: 499px) {
.calc-span {
_grid: 300px 1 3;
_gutter: 10px;
_gutter-style: "split";
_calc-span-start: "@include calc-span(1, 1)";
width: 300px;
float: left;
margin-right: -100%;
margin-left: 5px;
_calc-span-end: "@include calc-span(1, 3)";
width: -webkit-calc((((100% - (300px + 30px)) / (4))) * 3);
width: calc((((100% - (300px + 30px)) / (4))) * 3);
float: right;
margin-left: 0;
margin-right: 5px;
_calc-span-multiple: "@include calc-span(2, 2)";
width: -webkit-calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
width: calc((((100% - (300px + 30px)) / (4)) * 1 + 10px) + (((100% - (300px + 30px)) / (4)) * 3));
float: right;
margin-left: 0;
margin-right: 5px;
}
}
@media (min-width: 500px) {
.calc-span {
_grid: 2 100px 1 5 200px;
_gutter: 1em;
_gutter-style: "split";
_calc-span-start: "@include calc-span(1, 1)";
width: -webkit-calc((((100% - (300px + 5em)) / (8))) * 2);
width: calc((((100% - (300px + 5em)) / (8))) * 2);
float: left;
margin-right: -100%;
margin-left: 0.5em;
_calc-span-end: "@include calc-span(1, 5)";
width: 200px;
float: right;
margin-left: 0;
margin-right: 0.5em;
_calc-span-multiple: "@include calc-span(2, 2)";
min-width: -webkit-calc((100px + 1em - 1em));
min-width: calc((100px + 1em - 1em));
width: -webkit-calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
width: calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
float: left;
margin-right: -100%;
margin-left: -webkit-calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em));
margin-left: calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em));
}
}
@media (min-width: 699px) {
.calc-span {
_grid: 2 100px 1 5 200px;
_gutter: 1em;
_gutter-style: "split";
_calc-span-start: "@include calc-span(1, 1)";
width: -webkit-calc((((100% - (300px + 5em)) / (8))) * 2);
width: calc((((100% - (300px + 5em)) / (8))) * 2);
float: left;
margin-right: -100%;
margin-left: 0.5em;
_calc-span-end: "@include calc-span(1, 5)";
width: 200px;
float: right;
margin-left: 0;
margin-right: 0.5em;
_calc-span-multiple: "@include calc-span(2, 2)";
min-width: -webkit-calc((100px + 1em - 1em));
min-width: calc((100px + 1em - 1em));
width: -webkit-calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
width: calc((100px + 1em) + (((100% - (300px + 5em)) / (8)) * 1));
float: left;
margin-right: -100%;
margin-left: -webkit-calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em));
margin-left: calc(0.5em + (((100% - (300px + 5em)) / (8)) * 2 + 1em));
}
}
@media (min-width: 700px) {
.calc-span {
_grid: 1 3 5 7;
_gutter: 3%;
_gutter-style: "opposite";
_calc-span-start: "@include calc-span(1, 1)";
width: -webkit-calc((((100% - (9%)) / (16))) * 1);
width: calc((((100% - (9%)) / (16))) * 1);
float: left;
margin-right: -100%;
margin-left: 0;
_calc-span-end: "@include calc-span(1, 4)";
width: -webkit-calc((((100% - (9%)) / (16))) * 7);
width: calc((((100% - (9%)) / (16))) * 7);
float: right;
margin-left: 0;
margin-right: 0;
_calc-span-multiple: "@include calc-span(2, 2)";
width: -webkit-calc((((100% - (9%)) / (16)) * 3 + 3%) + (((100% - (9%)) / (16)) * 5));
width: calc((((100% - (9%)) / (16)) * 3 + 3%) + (((100% - (9%)) / (16)) * 5));
float: left;
margin-right: -100%;
margin-left: -webkit-calc((((100% - (9%)) / (16)) * 1 + 3%));
margin-left: calc((((100% - (9%)) / (16)) * 1 + 3%));
}
}
Singularity-1.8.0/tests/controls/04-css-grids/ 0000775 0000000 0000000 00000000000 13077012456 0021163 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/controls/04-css-grids/01-container.css 0000664 0000000 0000000 00000003212 13077012456 0024073 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5 7, 900px: 300px 2 1), "gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55, 900px: 1em), "gutter styles": (-1px: "split", 500px: "split fixed", 700px: "opposite fixed", 900px: "split"))';
}
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.25fr;
padding-left: 0.125fr;
padding-right: 0.125fr;
}
@media (min-width: 500px) {
.container {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 700px) {
.container {
grid-template-columns: 1fr 3fr 5fr 7fr;
}
}
@media (min-width: 900px) {
.container {
grid-template-columns: 300px 2fr 1fr;
}
}
@media (min-width: 500px) {
.container {
grid-gap: 0.35fr;
}
}
@media (min-width: 700px) {
.container {
grid-gap: 0.55fr;
}
}
@media (min-width: 900px) {
.container {
grid-gap: 1em;
}
}
@media (min-width: 500px) {
.container {
padding-left: 0.175fr;
padding-right: 0.175fr;
}
}
@media (min-width: 700px) {
.container {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 900px) {
.container {
padding-left: 0.5em;
padding-right: 0.5em;
}
}
}
Singularity-1.8.0/tests/controls/04-css-grids/02-css-grid-span.css 0000664 0000000 0000000 00000003214 13077012456 0024566 0 ustar 00root root 0000000 0000000 .settings {
_default-settings: '("grids": (-1px: 12), "gutters": (-1px: 0.25), "gutter styles": (-1px: "opposite"), "output": "isolation", "direction": "ltr", "mobile first": true, "include border box": false, "include clearfix": false, "background grid color": chocolate, "asymmetric output": "isolation", "calc include min-width": true, "debug": false)';
_user-settings: '("grids": (-1px: 3, 500px: 5, 700px: 1 3 5 7, 900px: 300px 2 1), "gutters": (-1px: 0.25, 500px: 0.35, 700px: 0.55, 900px: 1em), "gutter styles": (-1px: "split", 500px: "split fixed", 700px: "opposite fixed", 900px: "split"))';
}
.item {
width: 60%;
clear: right;
float: left;
margin-left: 3.33333%;
margin-right: 3.33333%;
}
@supports (display: grid) {
.item {
grid-columns: span 2;
}
}
@media (min-width: 550px) {
.item {
width: 57.8125%;
float: left;
margin-right: -100%;
margin-left: 21.09375%;
clear: none;
}
@supports (display: grid) {
.item {
grid-columns: 2/span 3;
}
}
}
@media (min-width: 750px) {
.item {
width: 39.66006%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
@supports (display: grid) {
.item {
grid-columns: 4/span 1;
}
}
}
@media (min-width: 900px) {
.item {
min-width: -webkit-calc((300px + 1em - 1em));
min-width: calc((300px + 1em - 1em));
width: -webkit-calc((300px + 1em) + (((100% - (300px + 3em)) / (3)) * 2));
width: calc((300px + 1em) + (((100% - (300px + 3em)) / (3)) * 2));
float: left;
margin-right: -100%;
margin-left: 0.5em;
}
@supports (display: grid) {
.item {
grid-columns: 1/span 2;
}
}
}
Singularity-1.8.0/tests/index.js 0000664 0000000 0000000 00000003422 13077012456 0016647 0 ustar 00root root 0000000 0000000 var sass = require('node-sass'),
jsdiff = require('diff'),
fs = require('fs-extra'),
i = 0,
glob = require('glob');
glob('./tests/**/*.scss', function (err, files) {
if (err) throw err;
files.forEach(function (file) {
if (file.charAt(0) !== '_') {
sass.render({
file: file,
outputStyle: 'expanded',
includePaths: [
'../stylesheets/',
'../vendor/ruby/2.0.0/gems/sassy-maps-0.4.0/sass/',
'../vendor/ruby/2.0.0/gems/breakpoint-2.5.0/stylesheets/'
]
}, function(err, result) {
if (err) throw err;
// console.log(result);
var file = result.stats.entry.replace(process.cwd() + '/tests/', '');
file = file.replace('.scss', '.css');
if (file.charAt(0) !== '_') {
fs.readFile('./controls/' + file, function (ctrlErr, ctrlFile) {
var diff = jsdiff.diffCss(ctrlFile.toString(), result.css.toString()),
diffCount = 0;
diff.forEach(function(part){
// green for additions, red for deletions
// grey for common parts
var color = part.added ? 'green' :
part.removed ? 'red' : 'grey';
if (color !== 'grey') {
diffCount++;
}
});
if (diffCount) {
console.log(file);
diff = jsdiff.createPatch(file, ctrlFile.toString(), result.css.toString());
fs.outputFile('./diff/' + file + '.diff', diff, function (writeErr, writePatch) {
if (writeErr) throw writeErr;
// throw 'Diff in output for ' + file;
});
}
});
}
});
}
});
});
Singularity-1.8.0/tests/tests/ 0000775 0000000 0000000 00000000000 13077012456 0016343 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/tests/01-settings/ 0000775 0000000 0000000 00000000000 13077012456 0020421 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/tests/01-settings/01-settings.scss 0000664 0000000 0000000 00000002205 13077012456 0023373 0 ustar 00root root 0000000 0000000 @import "../shared";
.setting-get {
@include show-settings;
_test: "sgs-get('output')";
_result: sgs-get('output');
}
.setting-set {
@include show-settings;
_default: sgs-get('direction');
_test: "@include sgs-change('direction', 'rtl')";
@include sgs-change('direction', 'rtl');
_new: sgs-get('direction');
@include show-settings;
}
.setting-has {
@include show-settings;
_test: "sgs-has('output')";
_result: sgs-has('output');
_test: "sgs-has('direction')";
_result: sgs-has('direction');
}
.setting-reset {
@include show-settings;
_test: "@include sgs-reset('direction')";
@include sgs-reset('direction');
_exists: sgs-has('direction');
@include show-settings;
&--multiple {
@include show-settings;
_test: "@include add-grid('2 4 6')";
@include add-grid('2 4 6');
_test: "@include add-gutter('.25')";
@include add-gutter('.25');
_test: "@include sgs-change('direction', 'rtl')";
@include sgs-change('direction', 'rtl');
@include show-settings;
_test: "@include sgs-reset('grids', 'gutters')";
@include sgs-reset('grids', 'gutters');
@include show-settings;
}
} Singularity-1.8.0/tests/tests/01-settings/02-grids.scss 0000664 0000000 0000000 00000001106 13077012456 0022643 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-grid: 3, 5 at 500px, 1 3 5 at 700px;
.add-grid-basic {
@include show-settings;
@each $grid in $add-grid {
@include add-grid($grid);
_grid: '@include add-grid(#{$grid})';
}
@include show-settings;
}
@include sgs-reset('grids');
$bkpt-1: 500px ('min-resolution' 1.5dppx);
$bkpt-2: 700px, 'no-query' '.no-mq';
$add-grid: 3, 5 at $bkpt-1, 1 3 5 at $bkpt-2;
.add-grid-breakpoint {
@include show-settings;
@each $grid in $add-grid {
@include add-grid($grid);
_grid: '@include add-grid(#{$grid})';
}
@include show-settings;
} Singularity-1.8.0/tests/tests/01-settings/03-gutters.scss 0000664 0000000 0000000 00000001160 13077012456 0023231 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-gutter: .25, .35 at 500px, .55 at 700px;
.add-gutter-basic {
@include show-settings;
@each $gutter in $add-gutter {
@include add-gutter($gutter);
_gutter: '@include add-gutter(#{$gutter})';
}
@include show-settings;
}
@include sgs-reset('gutters');
$bkpt-1: 500px ('min-resolution' 1.5dppx);
$bkpt-2: 700px, 'no-query' '.no-mq';
$add-gutter: .25, .35 at $bkpt-1, .55 at $bkpt-2;
.add-gutter-breakpoint {
@include show-settings;
@each $gutter in $add-gutter {
@include add-gutter($gutter);
_gutter: '@include add-gutter(#{$gutter})';
}
@include show-settings;
} Singularity-1.8.0/tests/tests/01-settings/04-gutter-styles.scss 0000664 0000000 0000000 00000001414 13077012456 0024372 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-gutter-style: 'split', 'fixed' at 500px, 'opposite fixed' at 700px;
.add-gutter-style-basic {
@include show-settings;
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
_gutter-style: '@include add-gutter-style(#{$gutter-style})';
}
@include show-settings;
}
@include sgs-reset('gutter-styles');
$bkpt-1: 500px ('min-resolution' 1.5dppx);
$bkpt-2: 700px, 'no-query' '.no-mq';
$add-gutter-style: 'split', 'fixed' at $bkpt-1, 'opposite fixed' at $bkpt-2;
.add-gutter-style-breakpoint {
@include show-settings;
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
_gutter-style: '@include add-gutter-style(#{$gutter-style})';
}
@include show-settings;
} Singularity-1.8.0/tests/tests/02-helpers/ 0000775 0000000 0000000 00000000000 13077012456 0020224 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/tests/02-helpers/01-find.scss 0000664 0000000 0000000 00000002255 13077012456 0022263 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-grid: 3, 5 at 500px, 1 3 5 at 700px;
$add-gutter: .25, .35 at 500px, .55 at 700px;
$add-gutter-style: 'split', 'fixed' at 500px, 'opposite fixed' at 700px;
$bkpts: 499px, 500px, 699px, 700px;
@each $grid in $add-grid {
@include add-grid($grid);
}
@each $gutter in $add-gutter {
@include add-gutter($gutter);
}
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
}
@mixin find-stuff($func, $override) {
$name: "find-#{$func}";
$funcname: $func;
@if $funcname == 'gutter-style' {
$funcname: 'gutter style';
}
$funcname: "#{$funcname}s";
_#{$func}: "#{inspect(sgs-get($funcname))}";
_find-no-override: "#{call($name)}";
_find-override: "#{call($name, $override)}";
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
_#{$func}: "#{inspect(sgs-get($funcname))}";
_find-no-override: "#{call($name)}";
_find-override: "#{call($name, $override)}";
}
}
}
.settings {
@include show-settings;
}
.find-grid {
@include find-stuff('grid', 2 4 6);
}
.find-gutter {
@include find-stuff('gutter', .4);
}
.find-gutter-style {
@include find-stuff('gutter-style', 'split fixed');
} Singularity-1.8.0/tests/tests/02-helpers/02-layout.scss 0000664 0000000 0000000 00000003307 13077012456 0022660 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-grid: 3, 5 at 500px, 1 3 5 at 700px;
$add-gutter: .25, .35 at 500px, .55 at 700px;
$add-gutter-style: 'split', 'fixed' at 500px, 'opposite fixed' at 700px;
$bkpts: 499px, 500px, 699px, 700px;
$grid-override: 2 4 6;
$gutter-override: .4;
$gutter-style-override: 'split fixed';
@each $grid in $add-grid {
@include add-grid($grid);
}
@each $gutter in $add-gutter {
@include add-gutter($gutter);
}
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
}
@mixin layout-grid($override) {
_find: "#{call('find-grid')}";
@include layout($grid: $override) {
_find-layout: "#{call('find-grid')}";
}
}
@mixin layout-gutter($override) {
_find: "#{call('find-gutter')}";
@include layout($gutter: $override) {
_find-layout: "#{call('find-gutter')}";
}
}
@mixin layout-gutter-style($override) {
_find: "#{call('find-gutter-style')}";
@include layout($gutter-style: $override) {
_find-layout: "#{call('find-gutter-style')}";
}
}
.settings {
@include show-settings;
_grid-override: $grid-override;
_gutter-override: $gutter-override;
_gutter-style-override: $gutter-style-override;
}
.find-grid {
@include layout-grid($grid-override);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
@include layout-grid($grid-override);
}
}
}
.find-gutter {
@include layout-gutter($gutter-override);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
@include layout-gutter($gutter-override);
}
}
}
.find-gutter-style {
@include layout-gutter-style($gutter-style-override);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
@include layout-gutter-style($gutter-style-override);
}
}
} Singularity-1.8.0/tests/tests/02-helpers/03-background.scss 0000664 0000000 0000000 00000001007 13077012456 0023456 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-grid: 3, 5 at 500px, 1 3 5 at 700px;
$add-gutter: .25, .35 at 450px, 1em at 650px;
$add-gutter-style: 'split', 'fixed' at 400px, 'opposite fixed' at 600px;
@include sgs-change('debug', true);
@each $grid in $add-grid {
@include add-grid($grid);
}
@each $gutter in $add-gutter {
@include add-gutter($gutter);
}
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
}
.settings {
@include show-settings;
}
.background {
@include background-grid;
} Singularity-1.8.0/tests/tests/02-helpers/04-layout-at.scss 0000664 0000000 0000000 00000003744 13077012456 0023271 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-grid: 3, 5 at 500px, 1 3 5 at 700px;
$add-gutter: .25, .35 at 500px, .55 at 700px;
$add-gutter-style: 'split', 'fixed' at 500px, 'opposite fixed' at 700px;
$bkpts: 499px, 500px, 699px, 700px;
$grid-override: 2 4 6;
$gutter-override: .4;
$gutter-style-override: 'split fixed';
@each $grid in $add-grid {
@include add-grid($grid);
}
@each $gutter in $add-gutter {
@include add-gutter($gutter);
}
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
}
// @mixin layout-grid($override) {
// _find: "#{call('find-grid')}";
// @include layout($grid: $override) {
// _find-layout: "#{call('find-grid')}";
// }
// }
@mixin layout-grid-no-map($override) {
_map: 'false';
_find: "#{call('find-grid')}";
@each $bkpt in $bkpts {
@include layout-at($override, $bkpt) {
_map: 'false';
_find-layout: "#{call('find-grid')}";
}
}
}
@mixin layout-grid-map($override) {
_map: 'true';
_find: "#{call('find-grid')}";
@each $bkpt in $bkpts {
@include layout-at(('grid': $override), $bkpt) {
_map: 'true';
_find-layout: "#{call('find-grid')}";
}
}
}
@mixin layout-gutter($override) {
_find: "#{call('find-gutter')}";
@each $bkpt in $bkpts {
@include layout-at(('gutter': $override), $bkpt) {
_find-layout: "#{call('find-gutter')}";
}
}
}
@mixin layout-gutter-style($override) {
_find: "#{call('find-gutter-style')}";
@each $bkpt in $bkpts {
@include layout-at(('gutter style': $override), $bkpt) {
_find-layout: "#{call('find-gutter-style')}";
}
}
}
.settings {
@include show-settings;
_grid-override: $grid-override;
_gutter-override: $gutter-override;
_gutter-style-override: $gutter-style-override;
}
.find-grid {
@include layout-grid-no-map($grid-override);
@include layout-grid-map($grid-override);
}
.find-gutter {
@include layout-gutter($gutter-override);
}
.find-gutter-style {
@include layout-gutter-style($gutter-style-override);
} Singularity-1.8.0/tests/tests/02-helpers/05-layout--map.scss 0000664 0000000 0000000 00000003320 13077012456 0023506 0 ustar 00root root 0000000 0000000 @import "../shared";
$add-grid: 3, 5 at 500px, 1 3 5 at 700px;
$add-gutter: .25, .35 at 500px, .55 at 700px;
$add-gutter-style: 'split', 'fixed' at 500px, 'opposite fixed' at 700px;
$bkpts: 499px, 500px, 699px, 700px;
$grid-override: 2 4 6;
$gutter-override: .4;
$gutter-style-override: 'split fixed';
@each $grid in $add-grid {
@include add-grid($grid);
}
@each $gutter in $add-gutter {
@include add-gutter($gutter);
}
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
}
@mixin layout-grid($override) {
_find: "#{call('find-grid')}";
@include layout(('grid': $override)) {
_find-layout: "#{call('find-grid')}";
}
}
@mixin layout-gutter($override) {
_find: "#{call('find-gutter')}";
@include layout(('gutter': $override)) {
_find-layout: "#{call('find-gutter')}";
}
}
@mixin layout-gutter-style($override) {
_find: "#{call('find-gutter-style')}";
@include layout(('gutter style': $override)) {
_find-layout: "#{call('find-gutter-style')}";
}
}
.settings {
@include show-settings;
_grid-override: $grid-override;
_gutter-override: $gutter-override;
_gutter-style-override: $gutter-style-override;
}
.find-grid {
@include layout-grid($grid-override);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
@include layout-grid($grid-override);
}
}
}
.find-gutter {
@include layout-gutter($gutter-override);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
@include layout-gutter($gutter-override);
}
}
}
.find-gutter-style {
@include layout-gutter-style($gutter-style-override);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
@include layout-gutter-style($gutter-style-override);
}
}
} Singularity-1.8.0/tests/tests/03-spans/ 0000775 0000000 0000000 00000000000 13077012456 0017707 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/tests/03-spans/01-functions.scss 0000664 0000000 0000000 00000002640 13077012456 0023034 0 ustar 00root root 0000000 0000000 $basic-settings: true;
$add-grid: 3, 5 at 500px, 1 3 5 7 at 700px;
$add-gutter: .25, .35 at 500px, .55 at 700px;
$add-gutter-style: 'split', 'split fixed' at 500px, 'opposite fixed' at 700px;
@import "../shared";
@mixin span-stuff($func) {
$name: "#{$func}-span";
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_#{$func}-start: "#{$name}(1, 1)";
_#{$func}-start: call($name, 1, 1);
_#{$func}-end: "#{$name}(1, #{$column-count})";
_#{$func}-end: call($name, 1, $column-count);
_#{$func}-multiple: "#{$name}(2, 1)";
_#{$func}-multiple: call($name, 2, 1);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_#{$func}-start: "#{$name}(1, 1)";
_#{$func}-start: call($name, 1, 1);
_#{$func}-end: "#{$name}(1, #{$column-count})";
_#{$func}-end: call($name, 1, $column-count);
_#{$func}-multiple: "#{$name}(2, 2)";
_#{$func}-multiple: call($name, 2, 2);
}
}
}
/**
* Returns the percentage of columns plus inner gutters (if any)
**/
.column-span {
@include span-stuff('column');
}
/**
* Returns the percentage of a single gutter
**/
.gutter-span {
@include span-stuff('gutter');
}
/**
* Returns the percentage of columns plus inner gutters (if any) plus one additional gutter (if not the last item)
**/
.grid-span {
@include span-stuff('grid');
} Singularity-1.8.0/tests/tests/03-spans/02-grid-span.scss 0000664 0000000 0000000 00000001713 13077012456 0022711 0 ustar 00root root 0000000 0000000 $basic-settings: true;
@import "../shared";
.grid-span {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_grid-span-start: "@include grid-span(1, 1)";
@include grid-span(1, 1);
_grid-span-end: "@include grid-span(1, #{$column-count})";
@include grid-span(1, $column-count);
_grid-span-multiple: "@include grid-span(2, 2)";
@include grid-span(2, 2);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_grid-span-start: "@include grid-span(1, 1)";
@include grid-span(1, 1);
_grid-span-end: "@include grid-span(1, #{$column-count})";
@include grid-span(1, $column-count);
_grid-span-multiple: "@include grid-span(2, 2)";
@include grid-span(2, 2);
}
}
} Singularity-1.8.0/tests/tests/03-spans/03-float-span.scss 0000664 0000000 0000000 00000001736 13077012456 0023077 0 ustar 00root root 0000000 0000000 $basic-settings: true;
@import "../shared";
.float-span {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_float-span-start: "@include float-span(1, 1)";
@include float-span(1, 1);
_float-span-end: "@include float-span(1, #{$column-count})";
@include float-span(1, $column-count);
_float-span-multiple: "@include float-span(2, 2)";
@include float-span(2, 2);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_float-span-start: "@include float-span(1, 1)";
@include float-span(1, 1);
_float-span-end: "@include float-span(1, #{$column-count})";
@include float-span(1, $column-count);
_float-span-multiple: "@include float-span(2, 2)";
@include float-span(2, 2);
}
}
} Singularity-1.8.0/tests/tests/03-spans/04-isolation-span.scss 0000664 0000000 0000000 00000002052 13077012456 0023764 0 ustar 00root root 0000000 0000000 $basic-settings: true;
@import "../shared";
.isolation-span {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_isolation-span-start: "@include isolation-span(1, 1)";
@include isolation-span(1, 1);
_isolation-span-end: "@include isolation-span(1, #{$column-count})";
@include isolation-span(1, $column-count);
_isolation-span-multiple: "@include isolation-span(2, 2)";
@include isolation-span(2, 2);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_isolation-span-start: "@include isolation-span(1, 1)";
@include isolation-span(1, 1);
_isolation-span-end: "@include isolation-span(1, #{$column-count})";
@include isolation-span(1, $column-count);
_isolation-span-multiple: "@include isolation-span(2, 2)";
@include isolation-span(2, 2);
}
}
} Singularity-1.8.0/tests/tests/03-spans/05-calc-span.scss 0000664 0000000 0000000 00000002075 13077012456 0022673 0 ustar 00root root 0000000 0000000 $basic-settings: true;
$add-grid: 300px 1 3, 2 100px 1 5 200px at 500px, 1 3 5 7 at 700px;
$add-gutter: 10px, 1em at 500px, 3% at 700px;
@import "../shared";
.calc-span {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_calc-span-start: "@include calc-span(1, 1)";
@include calc-span(1, 1);
_calc-span-end: "@include calc-span(1, #{$column-count})";
@include calc-span(1, $column-count);
_calc-span-multiple: "@include calc-span(2, 2)";
@include calc-span(2, 2);
@each $bkpt in $bkpts {
@include breakpoint($bkpt) {
$grid: find-grid();
$column-count: column-count($grid);
_grid: $grid;
_gutter: find-gutter();
_gutter-style: find-gutter-style();
_calc-span-start: "@include calc-span(1, 1)";
@include calc-span(1, 1);
_calc-span-end: "@include calc-span(1, #{$column-count})";
@include calc-span(1, $column-count);
_calc-span-multiple: "@include calc-span(2, 2)";
@include calc-span(2, 2);
}
}
} Singularity-1.8.0/tests/tests/04-css-grids/ 0000775 0000000 0000000 00000000000 13077012456 0020462 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/tests/tests/04-css-grids/01-container.scss 0000664 0000000 0000000 00000000553 13077012456 0023562 0 ustar 00root root 0000000 0000000 $basic-settings: true;
$add-grid: 3, 5 at 500px, 1 3 5 7 at 700px, 300px 2 1 at 900px;
$add-gutter: .25, .35 at 500px, .55 at 700px, 1em at 900px;
$add-gutter-style: 'split', 'split fixed' at 500px, 'opposite fixed' at 700px, 'split' at 900px;
@import "../shared";
@import "../../stylesheets/singularitygs/css-grid";
.container {
@include grid-container();
} Singularity-1.8.0/tests/tests/04-css-grids/02-css-grid-span.scss 0000664 0000000 0000000 00000001040 13077012456 0024243 0 ustar 00root root 0000000 0000000 $basic-settings: true;
$add-grid: 3, 5 at 500px, 1 3 5 7 at 700px, 300px 2 1 at 900px;
$add-gutter: .25, .35 at 500px, .55 at 700px, 1em at 900px;
$add-gutter-style: 'split', 'split fixed' at 500px, 'opposite fixed' at 700px, 'split' at 900px;
@import "../shared";
@import "../../stylesheets/singularitygs/css-grid";
.item {
@include css-grid-span(2);
@include mq(550px) {
@include css-grid-span(3, 2);
}
@include mq(750px) {
@include css-grid-span(1, 4);
}
@include mq(900px) {
@include css-grid-span(2, 1);
}
} Singularity-1.8.0/tests/tests/_shared.scss 0000664 0000000 0000000 00000001507 13077012456 0020650 0 ustar 00root root 0000000 0000000 @import "breakpoint";
@import "singularitygs";
$basic-settings: false !default;
$add-grid: 3, 5 at 500px, 1 3 5 7 at 700px !default;
$add-gutter: .25, 10px at 500px, 1em at 700px !default;
$add-gutter-style: 'split', 'opposite' at 700px !default;
$bkpts: 499px, 500px, 699px, 700px !default;
$grid-override: 2 4 6 !default;
$gutter-override: .4 !default;
$gutter-style-override: 'split fixed' !default;
@mixin show-settings {
_default-settings: "#{inspect($Singularity-Settings)}";
_user-settings: "#{inspect($singularity)}";
}
@if $basic-settings {
@each $grid in $add-grid {
@include add-grid($grid);
}
@each $gutter in $add-gutter {
@include add-gutter($gutter);
}
@each $gutter-style in $add-gutter-style {
@include add-gutter-style($gutter-style);
}
.settings {
@include show-settings;
}
} Singularity-1.8.0/working/ 0000775 0000000 0000000 00000000000 13077012456 0015517 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/working/config.rb 0000664 0000000 0000000 00000001166 13077012456 0017315 0 ustar 00root root 0000000 0000000 # Require any additional compass plugins here.]
require 'breakpoint'
# File system locations
sass_dir = 'sass'
css_dir = 'css'
# Import latest breakpoint library
add_import_path '../stylesheets'
# Set to true for easier debugging
line_comments = false
# preferred_syntax = :sass
# CSS output style - :nested, :expanded, :compact, or :compressed
output_style = :expanded
# Determine whether Compass asset helper functions generate relative
# or absolute paths
relative_assets = true
# Learn more:
# http://compass-style.org/docs/tutorials/configuration-reference/ Singularity-1.8.0/working/css/ 0000775 0000000 0000000 00000000000 13077012456 0016307 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/working/css/compile.css 0000664 0000000 0000000 00000024703 13077012456 0020457 0 ustar 00root root 0000000 0000000 .span1 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span2 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span3 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span4 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span5 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span6 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span7 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span8 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span9 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span10 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span11 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span12 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span13 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span14 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span15 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span16 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span17 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span18 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span19 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span20 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span21 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span22 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span23 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span24 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span25 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span26 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span27 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span28 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span29 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span30 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span31 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span32 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span33 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span34 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span35 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span36 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span37 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span38 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span39 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span40 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span41 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span42 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span43 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span44 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span45 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span46 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span47 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span48 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span49 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span50 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span51 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span52 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span53 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span54 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span55 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span56 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span57 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span58 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span59 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span60 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span61 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span62 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span63 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span64 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span65 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span66 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span67 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span68 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span69 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span70 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span71 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span72 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span73 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span74 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span75 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span76 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span77 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span78 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span79 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span80 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span81 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span82 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span83 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span84 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span85 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span86 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span87 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span88 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span89 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span90 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span91 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span92 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span93 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span94 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span95 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span96 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span97 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span98 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span99 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
.span100 {
width: 6.77966%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.69492%;
}
Singularity-1.8.0/working/css/style.css 0000664 0000000 0000000 00000010245 13077012456 0020163 0 ustar 00root root 0000000 0000000 body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.one {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 12, "gutter": 0.33333, "style": "split", "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": (null: null));
width: 6.25%;
float: left;
margin-right: -100%;
margin-left: 9.375%;
clear: none;
background: rgba(255, 0, 0, 0.5);
}
.two {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 12, "gutter": 0.33333, "style": "split", "start row": false, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": (null: null));
width: 6.25%;
float: left;
margin-right: -100%;
margin-left: 17.70833%;
clear: none;
background: rgba(0, 0, 255, 0.5);
}
.three {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 12, "gutter": 0.33333, "style": "split", "start row": true, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": (null: null));
width: 6.25%;
float: left;
margin-right: -100%;
margin-left: 1.04167%;
clear: none;
background: rgba(255, 255, 0, 0.5);
}
.container {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23dd8e56%22%20width%3D%221%2E04167%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%221%2E04167%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%227%2E29167%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%229%2E375%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2215%2E625%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2217%2E70833%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2223%2E95833%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2226%2E04167%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2232%2E29167%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2234%2E375%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2240%2E625%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2242%2E70833%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2248%2E95833%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2251%2E04167%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2257%2E29167%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2259%2E375%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2265%2E625%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2267%2E70833%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2273%2E95833%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2276%2E04167%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2282%2E29167%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2284%2E375%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2290%2E625%25%22%20fill%3D%22%23dd8e56%22%20width%3D%222%2E08333%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2292%2E70833%25%22%20fill%3D%22chocolate%22%20width%3D%226%2E25%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2298%2E95833%25%22%20fill%3D%22%23dd8e56%22%20width%3D%221%2E04167%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
height: 100vh;
width: 100vw;
}
.container div {
height: 50vh;
}
Singularity-1.8.0/working/sass/ 0000775 0000000 0000000 00000000000 13077012456 0016470 5 ustar 00root root 0000000 0000000 Singularity-1.8.0/working/sass/compile.scss 0000664 0000000 0000000 00000000246 13077012456 0021017 0 ustar 00root root 0000000 0000000 @import "breakpoint";
@import "singularitygs";
@include sgs-change('output', 'float');
@for $i from 1 through 100 {
.span#{$i} {
@include float-span(1);
}
} Singularity-1.8.0/working/sass/style.scss 0000664 0000000 0000000 00000002012 13077012456 0020520 0 ustar 00root root 0000000 0000000 @import "compass";
@import "breakpoint";
@import "singularitygs";
// // $singularity: (
// // 'output': 'float'
// // );
// .container {
// max-width: 90%;
// background: red;
// margin: 0 auto;
// @include clearfix();
// }
// .thumbnail {
// min-height: 45vh;
// background: blue;
// margin-bottom: 5vh;
// }
@include add-grid(12);
@include add-gutter(1/3);
@include add-gutter-style('split');
@include sgs-change('debug', true);
// .thumbnail {
// @for $i from 1 through 5 {
// &:nth-of-type(5n + #{$i}) {
// @include grid-span(1, $i);
// @if $i == 1 {
// clear: both;
// }
// }
// }
// }
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.one {
@include grid-span(1, 2);
background: rgba(red, .5);
}
.two {
@include grid-span(1, 3);
background: rgba(blue, .5);
}
.three {
@include grid-span(1, 1);
background: rgba(yellow, .5);
}
.container {
@include background-grid;
height: 100vh;
width: 100vw;
div {
height: 50vh;
}
} Singularity-1.8.0/working/test.html 0000664 0000000 0000000 00000001426 13077012456 0017367 0 ustar 00root root 0000000 0000000
Test