Coder Social home page Coder Social logo

Comments (4)

heyalbert avatar heyalbert commented on August 20, 2024

I have the same issue.

from compass-mixins.

minneapolisdan avatar minneapolisdan commented on August 20, 2024

I don't know if this project is still active or abandoned? But I had the same problem as above, as I tried to port my Ruby-powered Compass over to this, while keeping some of my vertical rhythm code in the theme. By hacking over the _vertical_rhythm.scss code from my original Compass project into this, I got it working again. (and stopped that error message)

from compass-mixins.

alex-shamshurin avatar alex-shamshurin commented on August 20, 2024

I think it's not mainained. I use another stylus mixin lib for VR.

from compass-mixins.

alex-shamshurin avatar alex-shamshurin commented on August 20, 2024
/*
// Vertical Rhythm
// -------------------------------------------------- */


/* Variables
 * -------------------------------------------
 * Put your custom variables here. If you use bootstrap, use those
 * and add your own for vertical rhythm
 */

$font-size-base =       $base-font-size;   //это из variables.styl
$line-height-base =     $base-line-height; //это из variables.styl


/* TYPOGRAPHY BASE
 * -------------------------------------------
 * First, we establish a baseline to normalize typography.
 * Credit: this BASE section is based on Twitter Bootstrap's type.less
 * but with everything that isn't related to rhythm removed.
 */



/* Headings
 * -------------------------------------------
 * normalize baselines for headings, remove
 * this block if you use Twitter Bootstrap
 */

h1, h2, h3, h4, h5, h6 {
  margin: ($line-height-base / 2) 0;
  line-height: $line-height-base;
  small {
    line-height: 1;
  }
}

h1, h2 {
  margin-top: $line-height-base;
  margin-bottom: ($line-height-base / 2);
  line-height: ($line-height-base * 2);
}
h3, h4, h5, h6 {
  margin-top: ($line-height-base / 2);
  margin-bottom: ($line-height-base / 2);
}

h1 { font-size: $font-size-base * 2.75; font-size: 4rem; } // ~38px
h2 { font-size: $font-size-base * 2.25; font-size: 3rem; } // ~32px
h3 { font-size: $font-size-base * 1.75; font-size: 2.5rem; } // ~24px
h4 { font-size: $font-size-base * 1.25; font-size: 2rem; } // ~18px
h5 { font-size: $font-size-base; font-size: 1.6rem; }
h6 { font-size: $font-size-base * 0.85; font-size: 1.2rem; } // ~12px

h1 small { font-size: $font-size-base * 1.75; } // ~24px
h2 small { font-size: $font-size-base * 1.25; } // ~18px
h3 small { font-size: $font-size-base; }
h4 small { font-size: $font-size-base; }


/* Lists
 * -------------------------------------------
 */

// Unordered and Ordered lists
ul, ol {
  padding: 0;
  margin: 0 0 ($line-height-base / 2) 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
  line-height: $line-height-base;
}

// Description Lists
dl {
  margin-bottom: $line-height-base;
}
dt, dd {
  line-height: $line-height-base;
}
dd {
  margin-left: ($line-height-base / 2);
}


// MISC
// ----

// Horizontal rules
hr {
  margin: $line-height-base 0;
  border: 0;
  border-top: 1px solid $hr-border;
  border-bottom: 1px solid #fff;
}



/* VERTICAL RHYTHM
 * -------------------------------------------
 * Add .rhythm to parent elements when you
 * wish to apply vertical rhythm to child elements
 */


/* Body text & Misc
 * -------------------------------------------
 */

.rhythm {
  p, ul, ol, blockquote, address, pre, form {
    margin-bottom: $line-height-base;

    // And remove margin from last element
    &:last-child {
      margin-bottom: 0;
    }
  }
}



/* Headings & paragraphs
 * -------------------------------------------
 * Here we apply special spacing to certain
 * typographical patterns. It is impossible to
 * predict the patterns you require for your
 * project, so this is only a starting point.
 */

.rhythm {
  h1, h2, h3 {
    margin-bottom: ($line-height-base / 4);
  }
  h1 + h2 {
    margin-top: $line-height-base;
  }
  h4 {
    margin-bottom: ($line-height-base / 6);
  }
  h1 + p,
  p + h4 {
    margin-top: ($line-height-base * 1.5);
  }
  h2 + h3,
  h2 + h4 {
    margin-top: $line-height-base;
  }
  h2 + p,
  h3 + p {
    margin-top: ($line-height-base / 2);
  }
  p + h2 {
    margin-top: ($line-height-base * 3);
  }
  h3 + h4 {
    margin-top: ($line-height-base * 2);
  }
}

/* Lists
 * -------------------------------------------
 * Special classes for numbered, bulleted,
 * and alpha lists.
 */

.rhythm {

  //
  h3 + ul.bullet-list,
  h3 + ul.numbered-list,
  h3 + ul.alpha-list,
  h3 + ol.numbered-list {
    margin-top: ($line-height-base / 2);
  }


  ul.bullet-list + h3,
  ul.numbered-list + h3,
  ul.alpha-list + h3 {
    margin-top: ($line-height-base * 2);
  }
  h4 + ul.bullet-list,
  h4 + ul.numbered-list,
  h4 + ul.alpha-list,
  h4 + ol.numbered-list {
    margin-top: ($line-height-base / 2);
  }
  .bullet-list {
    list-style-type: disc; // bullets
    padding-left: 1.25em;
  }
  .numbered-list {
    list-style-type: decimal; // numbers
    padding-left: 1.5em;
  }
  .alpha-list {
    list-style-type: lower-alpha; // letters
    padding-left: 1.5em;
  }
  .bullet-list li,
  .numbered-list li,
  .alpha-list li {
    margin-bottom: ($line-height-base / 2);
  }
  .condensed-list li {
    margin-bottom: 0;
  }
  .flush-list li {
    padding-left: 0;
  }
}


/* Blockquotes
 * -------------------------------------------
 */

.rhythm blockquote {
  padding: $line-height-base $line-height-base 0;
}

from compass-mixins.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.