Commit 7bfb4f31 authored by xezrxxse's avatar xezrxxse

Изменение сетки на lost

parent 7506c7ba
node-modules
node_modules
css/*
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var livereload = require('gulp-livereload');
var sassGlob = require('gulp-sass-glob');
var lost = require('lost');
gulp.task('sass', function () {
gulp.src('scss/styles.scss')
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass())
.pipe(postcss([lost()]))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
......
This diff is collapsed.
......@@ -11,9 +11,11 @@
"license": "MIT",
"dependencies": {
"gulp": "*",
"gulp-sass": "*",
"gulp-autoprefixer": "*",
"gulp-livereload": "*",
"gulp-postcss": "^7.0.0",
"gulp-sass": "*",
"gulp-sourcemaps": "*",
"gulp-livereload": "*"
"lost": "^8.2.0"
}
}
@import "vendor/susy/sass/susy";
@import "vendor/shevy/core/shevy";
@import "vendor/font-awesome/scss/font-awesome";
@import "styles/variables";
@import "styles/layout";
@import "styles/typography";
@import "styles/main";
@import "styles/elements/**";
@import "styles/pages/**";
\ No newline at end of file
/* enable: @import 'vendor/susy/sass/plugins/svg-grid';
* and add to grid container: background: susy-svg-grid() no-repeat scroll;
*/
@import 'vendor/susy/sass/plugins/svg-grid';
$pc: 1170px;
$phone: 480px;
$tablet: 740px;
* { box-sizing: border-box; }
$susy: (
'columns': susy-repeat(12),
'gutters': 30px,
'spread': 'narrow',
'container-spread': 'narrow',
);
@media screen and (min-width: $phone) {
.layout-container {
max-width: $pc;
min-width: $tablet;
margin: 0 auto;
background: susy-svg-grid() no-repeat scroll;
}
header {
clear: both;
#block-sitebranding {
width: span(3);
float: left;
}
#block-mainnavigation {
width: span(9);
float: right;
}
}
main {
clear: both;
.layout-sidebar-first {
width: span(3);
float: left;
}
.layout-content {
width: span(9);
float: right;
}
}
footer {
clear: both;
}
}
node_modules/
.sass-cache/
demo/css/style.css.map
*.gem
\ No newline at end of file
source 'https://rubygems.org'
# Specify your gem's dependencies in shevy.gemspec
gemspec
The MIT License (MIT)
Copyright (c) 2016 Kyle Shevlin
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.
\ No newline at end of file
# Shevy
A simple, configurable Sass library for typography with perfect vertical rhythm.
## Demo
[Check out the demo](http://kyleshevlin.github.io/shevy/)
## Installation
Shevy is a Sass library, and thus requires Sass to be installed on your machine and and some means of compiling Sass down to CSS. I leave the details of that setup to you.
### Copy From Source
One way to add Shevy to your project is to copy from source. If you want to add this to a project, copy the `core/` directory into the appropriate location in your app.
```
$ cp -R core/ path/to/your/project
```
Then `@import` the `_shevy.scss` file into your project.
```scss
@import 'core/shevy';
```
Be sure to place this _before_ any call to Shevy mixins and functions so that the Sass compiles without error.
### NPM
You can install Shevy as an NPM module with:
```
npm install --save shevy
```
Once installed, you can proceed to include the `core/_shevy.scss` file in your project. It will likely be nested a directory or so deeper than directly copying from source, so be sure you get your path correct. Something like this:
```scss
@import '../../node_modules/shevy/core/shevy';
```
At this time (October 2016), I have not attempted to use Shevy with any JS-to-CSS configuration such as requiring it in a Webpack module. Thus, I have no recommendations for how to use it in that way... yet.
### Bower
You can install Shevy as a Bower component:
```
bower install --save shevy
```
Similar to the NPM installation, this will install the project in another directory, so be sure to get your path correct when trying to import it.
```scss
@import '../../bower_components/shevy/core/shevy';
```
### Ruby on Rails
If you are using Ruby on Rails and would like to add Shevy to your project, you're in luck. Shevy is also a [Ruby Gem](https://rubygems.org/gems/shevy). In your `Gemfile` add:
```ruby
gem 'shevy'
```
Then run:
```
$ bundle install
```
Once the gem is installed, add Shevy to your project by adding:
```scss
@import 'shevy';
```
Once again, be sure to place this _before_ any call to Shevy mixins or functions so that the Sass compiles without error.
## Usage
Shevy comes packaged with default settings. So the simplest usage of Shevy is to call a few mixins.
```scss
@include headings;
@include body;
@include content;
```
This will output styles for all headings (`h1` to `h6`), several content tags (`p`, `ol`, `ul`, and `pre`), and set font-size and line-height for the `body` tag. However, you may find that the default settings don't suit your project. Shevy allows you to configure settings globally and/or at the component level. Here's how:
### Global
Shevy mixins take a Sass map as one of the arguments. The default map is the `$shevy` map (`$shevy` is always defined, even if you don't define your own). Thus, to make global changes to your configuration, simply define your own `$shevy` map to override the default settings. Like so:
```scss
$shevy: (
base-font-size: 14px,
base-line-height: 1.5,
base-font-scale: (2.5, 2.1, 1.8, 1.5, 1.25, 1),
margin-bottom: true,
proximity: false,
proximity-factor: .85
);
```
Then, `@include` the `headings`, `body`, and `content` mixins in your code
```scss
@include headings;
@include body;
@include content;
```
Now marvel at your beautiful typography. Assuming you've put something on the page. You have put something on the page, haven't you?
### Component Level
You can also pass a custom map into the `headings` and `paragraph` mixin. This should enable you to make custom typography per module or responsive typography per breakpoint.
Define a new Shevy map:
```scss
$shevy-small: (
base-font-size: 12px,
base-line-height: 1.3,
base-font-scale: (2, 1.8, 1.6, 1.4, 1.2, 1)
);
```
Then call the any of the mixins, passing your new settings map as an argument:
```scss
.my_component {
@include headings($shevy-small);
@include content($shevy-small);
}
```
## Defaults
```scss
$shevy: (
base-font-size: 1em,
base-line-height: 1.5,
base-font-scale: (3, 2.5, 2, 1.5, 1.25, 1),
margin-bottom: true,
proximity: false,
proximity-factor: .85
);
```
### base-font-size
The `base-font-size` key is intended to be the standard font-size for the project. `font-scale` multiplies its value against the `base-font-size`.
### base-line-height
The `base-line-height` is the standard line-height. If this is set in pixels, this will be the base-spacing value for Shevy. If it is provided as a factor, such as `1.5`, it will be multiplied by the `base-font-size` to generate the base-spacing value.
### base-font-scale
This is a Sass list of factors to multiply by the `base-font-size` to generate the font-sizes for headings and paragraphs (if a `paragraph-scale` is not provided).
### margin-bottom
By default, margin bottoms are added to all typography to maintain the vertical rhythm. However, you may wish to remove these. In that case, setting `margin-bottom: false` in your map will set the `margin-bottom` property to `0` for each element.
### proximity
In design, there is a phenomenon known as the proximity effect where our minds group things together that are close in spatial relation. Turning on proximity will enable you to apply a proximity factor to the margin-bottoms and base-spacing outputs, in effect, drawing content closer together. You might find this more aesthetically pleasing than strictly following the baseline.
### proximity-factor
Proximity factor is a factor with which to adjust the base spacing of your typography without affecting the line-height spacing. This value will be multiplied against the calculated base-spacing value, _if_ `proximity` is set to `true` in your settings map.
## Functions
There are several public functions available to the developer to use as they please. Here is a list of them:
* `base-font-size()`, with alias `bsf()`
* `base-font-unit()`, with alias `bfu()`
* `base-line-height()`, with alias `blh()`
* `line-height-spacing()`, with alias `lhs()`
* `base-spacing()`, with alias `bs()`
* `settings()`
### base-font-size
`base-font-size()` will return the `base-font-size` setting in the $shevy map, or the map passed to the function as an argument.
### base-font-unit
`base-font-unit()` will determine whether the measurements have been defined in `px`, `em`, or `rem` and return the correct unit type. A map can be passed to the function as an argument.
### base-line-height
`base-line-height()` will return the `base-line-height` setting in the $shevy map, or the map passed to the function as an argument.
### line-height-spacing
`line-height-spacing()` calculates the line-height spacing of the vertical rhythm by multiplying the base font size by the base line-height. A factor may be passed to the argument to return multiples or dividends of the line-height spacing.
### base-spacing
`base-spacing()` calculates the base spacing of the vertical rhythm by multiplying the base font size by the base line-height, _with the additional math to handle proximity_, thus differentiating it from the `line-height-spacing()` function. A factor may be passed to the argument to return multiples or dividends of the base-spacing.
Example:
```scss
.button {
padding: bs(.5) bs(2);
}
```
A map of settings can be passed as the second argument to adjust the output.
### settings
`settings()` is a function utilized by Shevy to merge a map with the `$shevy-defaults` map. This ensures that the current map has all the settings it should. The user can use this to create new maps on the fly if they desire, though there isn't much of a purpose for that just yet.
## Support
Currently, Shevy supports `px`, `em`, and `rem` usage. Additional support for other measurement units may be added in the future.
## License
The MIT License (MIT)
Copyright (c) 2016 Kyle Shevlin
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.
require "bundler/gem_tasks"
task :default => :spec
#!/usr/bin/env ruby
require "bundler/setup"
require "shevy"
# You can add fixtures and/or initialization code here to make experimenting
# with your gem easier. You can also use a different console, if you like.
# (If you use this, don't forget to add pry to your Gemfile!)
# require "pry"
# Pry.start
require "irb"
IRB.start
#!/usr/bin/env bash
set -euo pipefail
IFS=$'\n\t'
set -vx
bundle install
# Do any other automated setup that you need to do here
{
"authors": [
"Kyle Shevlin <kyle.a.shevlin@gmail.com>"
],
"description": "A simple, configurable Sass library for typography with perfect vertical rhythm.",
"homepage": "https://kyleshevlin.github.io/shevy",
"ignore": [
"**/.*",
"demo",
"Gruntfile.js",
"package.json",
"sache.json",
"shevy.gemspec",
"Rakefile",
"Gemfile",
"lib/",
"bin/"
],
"keywords": [
"css",
"mixins",
"sass",
"scss",
"typography",
"rhythm"
],
"license": "MIT",
"main": "core/_shevy.scss",
"name": "shevy",
"repository": {
"type": "git",
"url": "https://github.com/kyleshevlin/shevy.git"
},
"version": "2.1.0"
}
////
/// Shevy
/// @author Kyle Shevlin
////
@import
'shevy/variables',
'shevy/functions',
'shevy/mixins'
;
///
/// Returns the font scale value at a given position in the list
/// @access private
/// @param {Number} $position Position of scale value to retrieve
/// @param {Map} $map [$shevy] Map from which to retrieve font scale value
/// @return {Number} Font scale value at given position
///
@function get-font-scale-value($position, $map: $shevy) {
$settings: settings($map);
@return nth(map-get($settings, 'base-font-scale'), $position);
}
///
/// Returns the base font size of current settings
/// @access public
/// @param {Map} $map [$shevy] Map of settings
/// @return {Value} Value of base-font-size setting
///
@function base-font-size($map: $shevy) {
$settings: settings($map);
@return map-get($settings, 'base-font-size');
}
///
/// @alias base-font-size
///
@function bsf($map: $shevy) {
@return base-font-size($map);
}
///
/// Returns the base font unit of the current settings
/// @access public
/// @param {Map} $map [$shevy] Map of settings
/// @return {String} Unit value of base font size
///
@function base-font-unit($map: $shevy) {
$settings: settings($map);
@return unit(map-get($settings, 'base-font-size'));
}
///
/// @alias base-font-unit
///
@function bfu($map: $shevy) {
@return base-font-unit($map);
}
///
/// Returns the base line-height of the current settings
/// @access public
/// @param {Map} $map [$shevy] Map of settings
/// @return {Number} Current base-line-height setting
///
@function base-line-height($map: $shevy) {
$settings: settings($map);
@return map-get($settings, 'base-line-height');
}
///
/// @alias base-line-height
///
@function blh($map: $shevy) {
@return base-line-height($map);
}
///
/// Returns the line-height spacing, which is unaffected by proximity-factor
/// @access public
/// @param {Number} $factor [1] A factor with which to multiply the base-spacing value
/// @param {Map} $map [$shevy] Map of settings
/// @return {Value} Value of the calculated line-height
///
@function line-height-spacing($factor: 1, $map: $shevy) {
$settings: settings($map);
$line-height-spacing: line-height-spacing-math($settings);
@return $line-height-spacing * $factor;
}
///
/// @alias line-height-spacing
///
@function lhs($factor: 1, $map: $shevy) {
@return line-height-spacing($factor, $map);
}
///
/// Returns the line-height spacing, which is unaffected by proximity-factor
/// @access private
/// @param {Map} $map [$shevy] Map of settings
/// @return {Value} Value of base-font-size multiplied by base-line-height
///
@function line-height-spacing-math($map: $shevy) {
$settings: settings($map);
$base-font-size: base-font-size($settings);
$base-line-height: base-line-height($settings);
@return $base-font-size * $base-line-height;
}
///
/// Takes a factor, multiplies it with the current settings base spacing to output values that are multiples or dividends of the current vertical rhythm
/// @access public
/// @param {Number} $factor [1] A factor with which to multiply the base-spacing value
/// @param {Map} $map [$shevy] Map of settings
/// @return {Value} Value of base-spacing multiplied by the factor provided
///
@function base-spacing($factor: 1, $map: $shevy) {
$settings: settings($map);
$base-spacing: base-spacing-math($settings);
@return $base-spacing * $factor;
}
///
/// @alias base-spacing
///
@function bs($factor: 1, $map: $shevy) {
@return base-spacing($factor, $map);
}
///
/// Calculates base spacing
/// @access private
/// @param {Map} $map [$shevy] Map of settings
/// @return {Value} Value of base-font-size multiplied by base-line-height, additionally multiplied by proximity factor if proximity is true
///
@function base-spacing-math($map: $shevy) {
$settings: settings($map);
$base-font-size: base-font-size($settings);
$base-line-height: base-line-height($settings);
$proximity-bool: map-get($settings, proximity);
$proximity-factor: map-get($settings, proximity-factor);
$base-spacing: $base-font-size * $base-line-height;
@if $proximity-bool {
$base-spacing: $base-spacing * $proximity-factor;
}
@return $base-spacing;
}
///
/// Creates a value equivalent to 1 of the base unit, i.e. if base unit is pixels, returns 1px
/// @access private
/// @param {String} $unit String of unit type. Options are: 'px', 'em', or 'rem'
/// @return {Value} a value of 1 in the given unit type
///
@function base-unit-multiplier($unit) {
@if $unit == 'px' {
@return 1px;
} @else if $unit == 'em' {
@return 1em;
} @else if $unit == 'rem' {
@return 1rem;
} @else {
@warn "Sorry, but that is not a supported unit of measure.";
}
}
///
/// Merge current settings map with Shevy defaults
/// @access public
/// @param {Map} $map [$shevy] Map of settings
/// @return {Map} Map of merged settings
///
@function settings($map: $shevy) {
@return map-merge($shevy-defaults, $map);
}
///
/// Output the headings (h1, h2...) with the calculated settings
/// @access public
/// @param {Map} $map [$shevy]
/// @output Headings with calculated settings
///
@mixin headings($map: $shevy) {
$settings: settings($map);
$base-font-unit: base-font-unit($settings);
$base-unit-multiplier: base-unit-multiplier($base-font-unit);
$base-font-size: base-font-size($settings);
$base-line-height: base-line-height($settings);
$line-height-spacing: line-height-spacing(1, $settings);
$base-spacing: base-spacing(1, $settings);
$font-scale-length: length(map-get($settings, 'base-font-scale'));
$font-unit-ems-bool: if($base-font-unit == 'em', true, false);
$margin-bottom-bool: map-get($settings, 'margin-bottom');
@for $i from 1 through $font-scale-length {
$font-scale-value: get-font-scale-value($i, $settings);
$font-size: $base-font-size * $font-scale-value;
$line-height: 0;
$margin-bottom: 0;
// Line Height Calculation
@if $font-size <= $line-height-spacing {
$line-height: $line-height-spacing;
} @else {
$increment: 1.5;
// Use half increments, while technically breaking the baseline, they are more aesthetically pleasing and still mathematically sound
@while line-height-spacing($increment, $settings) <= $font-size {
$increment: $increment + .5;
}
@if $font-unit-ems-bool {
$line-height: line-height-spacing($increment, $settings) / $font-size;
} @else {
$line-height: line-height-spacing($increment, $settings);
}
}
// Margin Bottom Calculation
@if $margin-bottom-bool {
@if $font-unit-ems-bool {
$margin-bottom: $base-spacing / $font-size * $base-unit-multiplier;
} @else {
$margin-bottom: $base-spacing;
}
}
// Headings Output
h#{$i} {
font-size: $font-size;