Add button grid, custom spacing

css/ebi-global.css

@@ -810,6 +810,11 @@ a.no-underline {
 .related ul li a:after {
   content: " >"; }
 
+/* button grid */
+.button-grid a.button.columns {
+  margin-bottom: 1px;
+  border-right: 1px solid #fff; }
+
 /* read more */
 a.read-more:after,
 a.readmore:after,
@@ -818,6 +823,151 @@ a.more:after {
   font-family: "EBI-Functional";
   font-size: .85em; }
 
+/* custom spacing */
+.margin-top-none {
+  margin-top: none; }
+
+.margin-top-xsmall {
+  margin-top: .1rem; }
+
+.margin-top-small {
+  margin-top: .25rem; }
+
+.margin-top-medium {
+  margin-top: .5rem; }
+
+.margin-top-large {
+  margin-top: 1rem; }
+
+.margin-top-xlarge {
+  margin-top: 1.5rem; }
+
+.margin-left-none {
+  margin-left: none; }
+
+.margin-left-xsmall {
+  margin-left: .1rem; }
+
+.margin-left-small {
+  margin-left: .25rem; }
+
+.margin-left-medium {
+  margin-left: .5rem; }
+
+.margin-left-large {
+  margin-left: 1rem; }
+
+.margin-left-xlarge {
+  margin-left: 1.5rem; }
+
+.margin-right-none {
+  margin-right: none; }
+
+.margin-right-xsmall {
+  margin-right: .1rem; }
+
+.margin-right-small {
+  margin-right: .25rem; }
+
+.margin-right-medium {
+  margin-right: .5rem; }
+
+.margin-right-large {
+  margin-right: 1rem; }
+
+.margin-right-xlarge {
+  margin-right: 1.5rem; }
+
+.margin-bottom-none {
+  margin-bottom: none; }
+
+.margin-bottom-xsmall {
+  margin-bottom: .1rem; }
+
+.margin-bottom-small {
+  margin-bottom: .25rem; }
+
+.margin-bottom-medium {
+  margin-bottom: .5rem; }
+
+.margin-bottom-large {
+  margin-bottom: 1rem; }
+
+.margin-bottom-xlarge {
+  margin-bottom: 1.5rem; }
+
+.padding-top-none {
+  padding-top: none; }
+
+.padding-top-xsmall {
+  padding-top: .1rem; }
+
+.padding-top-small {
+  padding-top: .25rem; }
+
+.padding-top-medium {
+  padding-top: .5rem; }
+
+.padding-top-large {
+  padding-top: 1rem; }
+
+.padding-top-xlarge {
+  padding-top: 1.5rem; }
+
+.padding-left-none {
+  padding-left: none; }
+
+.padding-left-xsmall {
+  padding-left: .1rem; }
+
+.padding-left-small {
+  padding-left: .25rem; }
+
+.padding-left-medium {
+  padding-left: .5rem; }
+
+.padding-left-large {
+  padding-left: 1rem; }
+
+.padding-left-xlarge {
+  padding-left: 1.5rem; }
+
+.padding-right-none {
+  padding-right: none; }
+
+.padding-right-xsmall {
+  padding-right: .1rem; }
+
+.padding-right-small {
+  padding-right: .25rem; }
+
+.padding-right-medium {
+  padding-right: .5rem; }
+
+.padding-right-large {
+  padding-right: 1rem; }
+
+.padding-right-xlarge {
+  padding-right: 1.5rem; }
+
+.padding-bottom-none {
+  padding-bottom: none; }
+
+.padding-bottom-xsmall {
+  padding-bottom: .1rem; }
+
+.padding-bottom-small {
+  padding-bottom: .25rem; }
+
+.padding-bottom-medium {
+  padding-bottom: .5rem; }
+
+.padding-bottom-large {
+  padding-bottom: 1rem; }
+
+.padding-bottom-xlarge {
+  padding-bottom: 1.5rem; }
+
 /* icon to indicate link is a PDF file */
 /* print styles */
 @media print {

css/ebi-global.scss

@@ -720,6 +720,12 @@ a.no-underline { border-bottom: none; text-decoration: none; }
 .related ul li a:hover { border-bottom: 1px dotted #fff; }
 .related ul li a:after { content: " >"; }
 
+/* button grid */
+// Wrap a groupd of a.button.columns with div.button-grid to make a, you guessed it: grid
+.button-grid a.button.columns {
+  margin-bottom: 1px; border-right: 1px solid #fff;
+}
+
 /* read more */
 a.read-more:after,
 a.readmore:after,
@@ -729,6 +735,63 @@ a.more:after {
   font-size: .85em;
 }
 
+/* custom spacing */
+.margin-top-none { margin-top: none; }
+.margin-top-xsmall { margin-top: .1rem; }
+.margin-top-small { margin-top: .25rem; }
+.margin-top-medium { margin-top: .5rem; }
+.margin-top-large { margin-top: 1rem; }
+.margin-top-xlarge { margin-top: 1.5rem; }
+
+.margin-left-none { margin-left: none; }
+.margin-left-xsmall { margin-left: .1rem; }
+.margin-left-small { margin-left: .25rem; }
+.margin-left-medium { margin-left: .5rem; }
+.margin-left-large { margin-left: 1rem; }
+.margin-left-xlarge { margin-left: 1.5rem; }
+
+.margin-right-none { margin-right: none; }
+.margin-right-xsmall { margin-right: .1rem; }
+.margin-right-small { margin-right: .25rem; }
+.margin-right-medium { margin-right: .5rem; }
+.margin-right-large { margin-right: 1rem; }
+.margin-right-xlarge { margin-right: 1.5rem; }
+
+.margin-bottom-none { margin-bottom: none; }
+.margin-bottom-xsmall { margin-bottom: .1rem; }
+.margin-bottom-small { margin-bottom: .25rem; }
+.margin-bottom-medium { margin-bottom: .5rem; }
+.margin-bottom-large { margin-bottom: 1rem; }
+.margin-bottom-xlarge { margin-bottom: 1.5rem; }
+
+.padding-top-none { padding-top: none; }
+.padding-top-xsmall { padding-top: .1rem; }
+.padding-top-small { padding-top: .25rem; }
+.padding-top-medium { padding-top: .5rem; }
+.padding-top-large { padding-top: 1rem; }
+.padding-top-xlarge { padding-top: 1.5rem; }
+
+.padding-left-none { padding-left: none; }
+.padding-left-xsmall { padding-left: .1rem; }
+.padding-left-small { padding-left: .25rem; }
+.padding-left-medium { padding-left: .5rem; }
+.padding-left-large { padding-left: 1rem; }
+.padding-left-xlarge { padding-left: 1.5rem; }
+
+.padding-right-none { padding-right: none; }
+.padding-right-xsmall { padding-right: .1rem; }
+.padding-right-small { padding-right: .25rem; }
+.padding-right-medium { padding-right: .5rem; }
+.padding-right-large { padding-right: 1rem; }
+.padding-right-xlarge { padding-right: 1.5rem; }
+
+.padding-bottom-none { padding-bottom: none; }
+.padding-bottom-xsmall { padding-bottom: .1rem; }
+.padding-bottom-small { padding-bottom: .25rem; }
+.padding-bottom-medium { padding-bottom: .5rem; }
+.padding-bottom-large { padding-bottom: 1rem; }
+.padding-bottom-xlarge { padding-bottom: 1.5rem; }
+
 /* icon to indicate link is a PDF file */
 // a span.link-pdf { background: url(http://www.ebi.ac.uk/inc/images/icon_pdf.gif) right center no-repeat; padding: 0 18px 0 0; }
 // h1 a span.link-pdf,