Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update master #20

Merged
merged 6 commits into from
Sep 9, 2016
Merged

update master #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1d03f0f
#16 update to readme file
pdsantos-dev Aug 26, 2016
ac49fd7
Merge pull request #17 from marzeelabs/feature/#16_readme_update
jolidog Aug 26, 2016
e5610bd
chmod files
jolidog Sep 9, 2016
7d9f5a1
Merge branch 'develop' of github.com:marzeelabs/ritmo into develop
jolidog Sep 9, 2016
e7d1fea
#18 Removed border styles. Renamed variables and functions where rhyt…
jolidog Sep 9, 2016
6f9378a
Merge pull request #19 from marzeelabs/feature/#18_cleanup
jolidog Sep 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified .gitignore
100644 → 100755
View file
Open in desktop
Empty file.
Empty file modified LICENSE.md
100644 → 100755
View file
Open in desktop
Empty file.
4 changes: 1 addition & 3 deletions README.md
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
# Ritmo

![Ritmo - A vertical rhythm sass toolkit](http://ritmo.marzeelabs.org/images/logo-small.jpg "Ritmo")

**RITMO** is a fork from Compass vertical-rhythm. It rules the vertical rhythm of the site based on the initial font size, managing the vertical margins, paddings and line-height.<br><br> It keeps your site organized and structured on a coherent baseline grid. It uses **rem** unit by default but it can also use **em** or **px** values for measurement.

The only dependency is SASS. We also provide an <a href="https://www.npmjs.com/package/ritmo">npm</a> package.

Find all the documentation at [ritmo.marzeelabs.org](http://ritmo.marzeelabs.org).
Find all the documentation at [ritmo.marzeelabs.org](http://ritmo.marzeelabs.org).
14 changes: 6 additions & 8 deletions _ritmo.scss
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,13 @@ $base-line-multi: 5 !default;
// Supported values: px, em, rem. Percent units can't be used since they
// make calculating padding and margins impractical, and percentage borders are
// not valid or supported in css.
$rhythm-unit: 'rem' !default;
$ritmo-unit: 'rem' !default;

// Whether to output fallback values in px when using rem as the rhythm-unit.
// Whether to output fallback values in px when using rem as the $ritmo-unit.
$rem-with-px-fallback: false !default;

// Default values for rhythm borders properties.
// Supports style alone eg. `solid` or list of style and color eg. `solid #aaa`;
$default-rhythm-border-width: 1px !default;
$default-rhythm-border-style: solid !default;
$ritmo-border-width: 1px !default;

// Allows the `ritmo-font-size` mixin and the `lines-for-font-size` function
// to round the line height to the nearest half line height instead of the
Expand All @@ -35,19 +33,19 @@ $round-to-nearest-half-line: false !default;
$min-line-padding: 2px !default;

// @private Whether the rhythm output is in absolute units (px) or not (em, rem)
$relative-font-sizing: if($rhythm-unit == px, false, true);
$relative-font-sizing: if($ritmo-unit == px, false, true);

// Import the partials
@import "logic/functions",
"logic/units",
"logic/mixins";


// Helper variables
// Constant variables

// The leader is the amount of whitespace in a line.
// It might be useful in your calculations.
$base-leader: convert-length(($base-line-unit * $base-line-multi) - $base-font-size, $rhythm-unit, $base-font-size);
$base-leader: convert-length(($base-line-unit * $base-line-multi) - $base-font-size, $ritmo-unit, $base-font-size);

// The half-leader is the amount of whitespace above and below a line.
// It might be useful in your calculations.
Expand Down
10 changes: 5 additions & 5 deletions logic/_functions.scss
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,11 +144,11 @@

// Calculate rhythm units.
@function ritmo($lines: 1, $font-size: $base-font-size, $offset: 0) {
$rhythm: convert-length($lines * $base-line-unit - $offset, $rhythm-unit, $font-size);
@if unit($rhythm) == px {
$rhythm: floor($rhythm);
$ritmo: convert-length($lines * $base-line-unit - $offset, $ritmo-unit, $font-size);
@if unit($ritmo) == px {
$ritmo: floor($ritmo);
}
@return $rhythm;
@return $ritmo;
}

// Calculate the minimum multiple of rhythm units needed to contain the font-size.
Expand All @@ -161,4 +161,4 @@
$lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
}
@return $lines;
}
}
47 changes: 19 additions & 28 deletions logic/_mixins.scss
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @private Outputs rhythm values. For rem units, outputs pixel fallbacks
// by default.
@mixin output-ritmo($property, $values) {
@if $rhythm-unit == rem and $rem-with-px-fallback {
@if $ritmo-unit == rem and $rem-with-px-fallback {
@include rem($property, $values);
}
@else {
Expand All @@ -28,7 +28,7 @@

// Webkit has a bug that prevents line-height being set in rem on <html>;
// To work around this and simplify output, we can set initial line-height
// in ems for all relative rhythm units, even when $rhythm-unit is `rem`.
// in ems for all relative rhythm units, even when $ritmo-unit is `rem`.
@if $relative-font-sizing {
line-height: convert-length($base-line-unit * $base-line-multi, em);
}
Expand All @@ -48,7 +48,7 @@
@if $lines == auto {
$lines: lines-for-font-size($to-size);
}
@include output-ritmo(font-size, convert-length($to-size, $rhythm-unit, $from-size));
@include output-ritmo(font-size, convert-length($to-size, $ritmo-unit, $from-size));
@include ritmo-leading($lines, $to-size);
}

Expand Down Expand Up @@ -128,60 +128,51 @@
// rhythm. The whitespace must be greater than the width of the border.
@mixin ritmo-side-border(
$side,
$width: $default-rhythm-border-width,
$width: $ritmo-border-width,
$lines: 1,
$font-size: $base-font-size,
$border-style: $default-rhythm-border-style
$font-size: $base-font-size
) {
// If applying borders to all sides, use shorthand properties
$border-prop: if($side == all, border, border-#{$side});
@include output-ritmo(#{$border-prop}-width, convert-length($width, $rhythm-unit, $font-size));
#{$border-prop}-style: nth($border-style, 1);
@if type-of($border-style) == list and length($border-style) > 1 {
#{$border-prop}-color: nth($border-style, 2);
}
@include output-ritmo(#{$border-prop}-width, convert-length($width, $ritmo-unit, $font-size));
$padding-prop: if($side == all, padding, padding-#{$side});
@include output-ritmo(#{$padding-prop}, ritmo($lines, $font-size, $offset: $width));
}

// Apply a leading border.
// $border-style and $width are deprecated and will be removed in a future version of Compass.
@mixin ritmo-top-border(
$width: $default-rhythm-border-width,
$width: $ritmo-border-width,
$lines: 1,
$font-size: $base-font-size,
$border-style: $default-rhythm-border-style
$font-size: $base-font-size
) {
@include ritmo-side-border(top, $width, $lines, $font-size, $border-style);
@include ritmo-side-border(top, $width, $lines, $font-size);
}

// Apply a trailing border.
@mixin ritmo-bottom-border(
$width: $default-rhythm-border-width,
$width: $ritmo-border-width,
$lines: 1,
$font-size: $base-font-size,
$border-style: $default-rhythm-border-style
$font-size: $base-font-size
) {
@include ritmo-side-border(bottom, $width, $lines, $font-size, $border-style);
@include ritmo-side-border(bottom, $width, $lines, $font-size);
}

// Apply both leading and trailing borders.
@mixin ritmo-horizontal-borders(
$width: $default-rhythm-border-width,
$width: $ritmo-border-width,
$lines: 1,
$font-size: $base-font-size,
$border-style: $default-rhythm-border-style
$font-size: $base-font-size
) {
@include ritmo-top-border($width, $lines, $font-size, $border-style);
@include ritmo-bottom-border($width, $lines, $font-size, $border-style);
@include ritmo-top-border($width, $lines, $font-size);
@include ritmo-bottom-border($width, $lines, $font-size);
}

// Apply borders and whitespace equally to all sides.
@mixin ritmo-borders(
$width: $default-rhythm-border-width,
$width: $ritmo-border-width,
$lines: 1,
$font-size: $base-font-size,
$border-style: $default-rhythm-border-style
$font-size: $base-font-size
) {
@include ritmo-side-border(all, $width, $lines, $font-size, $border-style);
@include ritmo-side-border(all, $width, $lines, $font-size);
}
4 changes: 2 additions & 2 deletions logic/_units.scss
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Validate units
@if unit($base-font-size) != 'px' { @warn "$base-font-size must resolve to a pixel unit."; }
@if unit($base-line-unit) != 'px' { @warn "$base-line-unit must resolve to a pixel unit."; }
@if $rhythm-unit != 'px' and $rhythm-unit != 'em' and $rhythm-unit != 'rem' {
@warn "$rhythm-unit must be `px`, `em` or `rem`.";
@if $ritmo-unit != 'px' and $ritmo-unit != 'em' and $ritmo-unit != 'rem' {
@warn "$ritmo-unit must be `px`, `em` or `rem`.";
}

// Output a given style rule containing rem values along with an (optional)
Expand Down
Empty file modified package.json
100644 → 100755
View file
Open in desktop
Empty file.