Documentation

Documentation for the Core section, Scally core is the foundation of a project’s UI build.

Core

Table Of ContentsAnchor to section "Table of contents"

  1. What Is It?
  2. The Breakdown
  3. normalize.css
  4. Reset
  5. Specificity
  6. Base
    1. Sensible Styles
    2. Normalize-esque Styles
    3. Other Noteworthy Parts Of Base
      1. Responsive Images
      2. Print
      3. Root
      4. Forms
    4. Demos
      1. Abbreviation
      2. Details
      3. Forms
      4. Headings
      5. Horizontal Rule
      6. Links
      7. Media
      8. Paragraphs
  7. Functions
    1. Convert Pixels To em Or rem Units
    2. Maths Helpers
    3. String Replace
    4. Strip Unit
    5. Tint & Shade

What Is It?Anchor to section "What Is It?"

Scally Core is the foundation of a project’s UI build providing things like:

  • Sensible global styles.
  • Global settings (Sass variables).
  • Handy Sass functions and mixins.
  • Global Sass silent placeholder selectors.
  • A powerful reset, and normalize.css.

Without Core Scally won’t work. It is the only mandatory part of the framework.

The BreakdownAnchor to section "The Breakdown"

Core is broken down into the following sections:

And a few things not sectioned:

normalize.cssAnchor to section "normalize.css"

normalize.css is a third party solution. Scally always makes sure it’s using the latest version.

ResetAnchor to section "Reset"

In addition to normalize.css Scally also provides a powerful reset, resetting things like:

  • margin, padding, and border to zero, for ALL HTML elements.
  • box-sizing to the more friendly border-box value.
  • No bullets for unordered (ul) and ordered (ol) lists.

SpecificityAnchor to section "Specificity"

Scally Core is the foundation of the framework therefore it sits right at the bottom when it comes to specificity (CSS’ first C; the cascade) as any styles defined in Core need to be easily overridden.

That’s why Core is declared first when pulling in the Scally framework via your master stylesheet so it’s compiled before everything else.

BaseAnchor to section "Base"

The Base section provides very basic styling that most UI’s will need. These styles are applied at the most global level, with most being applied via element selectors, e.g.

abbr[title] {
  cursor: help;
}

Everything in Base needs to be easily overridden which is really easy to do as everything in Base sits right at the bottom in terms of Scally’s specificity (CSS’ first C; the cascade) and any of the more opinionated styles sit behind a toggle setting, e.g.

$apply-paragraph-bottom-margin: true !default;

@if $apply-paragraph-bottom-margin {
  p {
    @extend %bottom-spacing;
  }
}

Sensible StylesAnchor to section "Sensible Styles"

Base styles try to be as unopinionated as possible—like most things in Scally—with most applying sensible styles that you’d expect to find in a user agent stylesheet, like:

  • Applying cursor: help to abbreviations (abbr) that have a title attribute.
  • Applying cursor: pointer to summary and label elements.
  • Removing the gap between media elements (img, video, audio, etc) and the bottom of their containers.
  • Applying a bottom margin to all paragraphs (p) of text.

Normalize-esque StylesAnchor to section "Normalize-esque Styles"

Base also provides normalize.css-esque styles like:

  • Remove rounded corners from iOS search inputs and input buttons.
  • Remove the top inner shadow from iOS inputs.
  • Set the default behaviour for touch-based browsing in IE 10 on devices running Windows 8.
  • Hide the close button generated by IE 10+ for inputs.

Some of the above are optional via a toggle setting.

Other Noteworthy Parts Of BaseAnchor to section "Other Noteworthy Parts Of Base"

Responsive ImagesAnchor to section "Responsive Images"

Scally—being a responsive-ready framework—sets all image elements (img) to be responsive by default, e.g.

img {
  @if $responsive-images {
    max-width: 100%;
    height: auto;
  }
}

However this is optional via a toggle setting.

PrintAnchor to section "Print"

Scally provides some sensible global print styles, with most taken from the HTML5 Boilerplate print styles.

All print styles that aren’t defined at this global base level will live in their relevant Sass partial.

RootAnchor to section "Root"

Root defines styles for the html element. It mainly focuses on typography styles, e.g., setting font size, font family, line height, etc. Root also defines the global foreground colour which is inherited by all HTML elements, and the background colour of the html element itself.

FormsAnchor to section "Forms"

Scally provides quite a few Base form styles. Most are concerned with applying sensible styles and normalize-esque styles.

The other two main parts of forms are concerned with providing styles for text inputs—including textarea—and select lists, and a disabled state for ALL HTML form elements. These styles—being fairly opinionated—are all optional behind toggle settings.

DemosAnchor to section "Demos"

Abbreviation Anchor to section "Abbreviation"

Apply cursor: help; when an abbreviation is expanded via the title attribute.

UI
<abbr title="User Interface">UI</abbr>
Details Anchor to section "Details"

Apply cursor: pointer; to the summary element with the option to remove the browser default summary arrow.

Some details

More info about the details.

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>
Forms Anchor to section "Forms"

Apply cursor: pointer; to the label element to indicate that it will shift focus to its associated input element.

<label for="some-input">Label</label>
<input type="text" id="some-input" class="text-input">

Disable horizontal resizing of textareas.

<textarea rows="4"></textarea>

Override content-box from normalize.css for search inputs.

<input type="search" class="text-input">

Remove rounded corners from iOS search inputs by overriding appearance: textfield from normalize.css, see.

<input type="search" class="text-input">

Remove rounded corners that iOS applies to all input buttons, see. And certain browsers, e.g. Chrome, apply rounded corners to select lists, so if we haven’t opted in for rounded corners via the $apply-text-input-and-select-styles and $apply-text-input-and-select-rounded-corners settings then turn them off.









<input type="submit" value="Submit">
<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="image" src="/img/placeholders/100x30.jpg" alt="Bill Murrary placeholder image">
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Fix for IE and old versions of some other browsers not wrapping text within a legend.

Purus pid dignissim ac, nascetur porttitor phasellus aenean. Nisi tristique ac. Placerat porta et scelerisque etiam ac aliquet tristique nunc natoque vel est.
<form action="">
  <legend>Purus pid dignissim ac, nascetur porttitor phasellus aenean.
  Nisi tristique ac. Placerat porta et scelerisque etiam ac aliquet
  tristique nunc natoque vel est.</legend>
</form>

Set bottom spacing for legends via a class, we use padding over margin as padding is the most cross-browser compatible.

A form legend
<form action="">
  <legend class="form-heading">A form legend</legend>
</form>

Apply a disabled state via the disabled attribute and the is-disabled class.















































<button disabled>Button</button>
<input disabled type="submit" value="Submit">
<input disabled type="button" value="Button">
<input disabled type="reset" value="Reset">
<input disabled type="image" src="/img/placeholders/100x30.jpg" alt="Bill Murrary placeholder image">
<input disabled type="checkbox">
<input disabled type="radio">
<input disabled type="color">
<input disabled type="file">
<input disabled type="range">
<input disabled type="date" class="text-input">
<input disabled type="datetime" class="text-input">
<input disabled type="datetime-local" class="text-input">
<input disabled type="month" class="text-input">
<input disabled type="week" class="text-input">
<input disabled type="number" class="text-input">
<input disabled type="email" class="text-input">
<input disabled type="password" class="text-input">
<input disabled type="search" class="text-input">
<input disabled type="tel" class="text-input">
<input disabled type="text" class="text-input">
<input disabled type="url" class="text-input">
<textarea disabled rows="4"></textarea>
<select disabled>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Required field indicator (asterisk).

<label for="">A label <em class="required-field">*</em></label>

Style text inputs via the .text-input class, and apply to textareas and select lists.





<input type="text" class="text-input">
<textarea rows="4"></textarea>
<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Text input placeholder colour which uses the text-input-placeholder-color() mixin.

<input type="text" class="text-input" placeholder="Some placeholder text">

Remove the top inner shadow from iOS inputs. N.B. this needs to be isolated to iOS devices so user-agent sniffing needs to happen and the most robust implementation of this is to apply the hook to the html element e.g. .ios.



<input type="text" class="text-input">
<textarea rows="4"></textarea>

Hide the close button generated by IE 10+ for inputs.

<input type="text" class="text-input">
Headings Anchor to section "Headings"

Set font sizes and optional bottom spacing for all the six heading elements, the bottom spacing is handled via the Bottom Spacing placeholder. And each heading element selector also comes with a class selector e.g. h1, .h1 {} allowing say a 〈h2〉 to be styled like a 〈h1〉.

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5
Heading 5
Heading 6
Heading 6
<h1>Heading 1</h1>
<h1 class="h2">Heading 1</h1>
<h2>Heading 2</h2>
<h2 class="h3">Heading 2</h2>
<h3>Heading 3</h3>
<h3 class="h4">Heading 3</h3>
<h4>Heading 4</h4>
<h4 class="h4">Heading 4</h4>
<h5>Heading 5</h5>
<h5 class="h5">Heading 5</h5>
<h6>Heading 6</h6>
<h6 class="h6">Heading 6</h6>
Horizontal Rule Anchor to section "Horizontal Rule"

Apply bottom spacing and use border-top to apply the horizontal rule, with the border-color, border-style, and border-width all being configurable. The bottom spacing is handled via the Bottom Spacing placeholder


<hr>
Media Anchor to section "Media"

Remove the gap between media elements and the bottom of their containers by applying vertical-align: middle.






<audio src="" controls></audio>
<canvas width="100" height="30" style="background: url(/img/placeholders/200x60.jpg);"></canvas>
<iframe src="/img/placeholders/200x60.jpg" width="100" height="30"></iframe>
<img src="/img/placeholders/100x30.jpg" srcset="/img/placeholders/100x30.jpg 1x, /img/placeholders/200x60.jpg 2x" alt="" width="100" height="30">
<svg viewBox="0 0 251 92" width="125" height="46">
  <use xlink:href="/img/logo.svg#scally"></use>
</svg>
<video src="" controls style="background: #f2f2f2;"></video>

Make images responsive (optional). If responsive images are turned off by default but you need to apply this behaviour to some images then use the img-responsive class, the reverse of that situation is to use the img-not-responsive class. We also style alt text so that it’s visually offset if images don’t load.



Some alt text
<img src="/img/placeholders/700x300.jpg" srcset="/img/placeholders/700x300.jpg 1x, /img/placeholders/1400x600.jpg 2x" alt="">
<img src="" alt="Some alt text">
Paragraphs Anchor to section "Paragraphs"

Apply optional bottom spacing to all paragraphs via the Bottom Spacing placeholder.

Nisi tristique ac. Placerat porta et scelerisque etiam ac aliquet tristique nunc natoque vel est.

<p>Nisi tristique ac. Placerat porta et scelerisque etiam ac aliquet tristique nunc natoque vel est.</p>

The following Base items cannot be demo’d, follow their links to see the source code:

FunctionsAnchor to section "Functions"

Scally features a bunch of handy Sass functions to keep the framework more readable and DRY, by abstracting any common reusable logic.

Convert Pixels To em Or rem Units Anchor to section "Convert Pixels To em Or rem Units"

This is the most used and powerful function and does what it says on the tin: converts pixels to either em or rem units. There is also a Convert Pixels To em Or rem Units mixin. The conversion to em function accepts an optional 2nd parameter which is the font size of the parent element, if empty it defaults to the root font size set on the 〈html〉 element. You can include the pixel unit if you wish as the function will strip it out.

.selector {
   margin-left: to-em(8, 20);
 }

 .selector {
   padding: to-rem(8px) 0;
 }

Maths Helpers Anchor to section "Maths Helpers"

A few simple maths helper functions used to decrease or increase a number by a fraction amount e.g. quarter, halve, double—returning rounded integers. You can include the pixel unit if you wish as the function will strip it out.

.selector {
  padding: halve(3.2px);
}

.selector {
  margin: triple(42);
}

String Replace Anchor to section "String Replace"

A string helper function which replaces a set of characters in a string. Credit goes to Hugo Giraudel.

.selector {
  $string: "The answer to life the universe and everything is 42.";
  content: str-replace($string, "e", "xoxo");
}

// Output
.selector {
  content: "Thxoxo answxoxor to lifxoxo thxoxo univxoxorsxoxo and xoxovxoxorything is 42.";
}

Strip Unit Anchor to section "Strip Unit"

A function that strips a unit from a number. This function is heavily used in Scally’s functions and mixins. Credit goes to Hugo Giraudel.

$length: 42px;
$value: strip-unit($length);
// -> 42

Tint & Shade Anchor to section "Tint & Shade"

Two simple functions that slightly lighten or darken a colour by using the mix function. Sass has built in lighten and darken functions however these functions often do not provide the expected result. Credit goes to Hugo Giraudel—he explains why this function is a better solution compared to Sass’s native lighten and darken functions.

.selector {
   color: tint(red, 10%);
 }

 .selector {
   background-color: shade(#f2f2f2, 10%);
 }

MixinsAnchor to section "Mixins"

Scally features a bunch of handy Sass mixins. These mixins underpin many parts of the Scally framework and are required for many parts of the framework to work.

Convert Pixels To em Or rem Units Anchor to section "Convert Pixels To em Or rem Units"

A mixin—just like the function—that converts pixels to either em or rem units, without the function this mixin won’t work. The difference between them is that the mixin will work for multiple properties or values or both. It accepts a list of lists (instead a list of values) for properties that accept multiple lists of values. The conversion to em mixin accepts an optional 3rd argument which is the font size of the parent element, if empty it defaults to the root font size set on the 〈html〉 element. Both these mixins allow you to specify the !important keyword and you can include the pixel unit if you wish as the mixin will strip it out.

.selector {
   @include to-em(width height, 125px);
 }

 .selector {
   @include to-rem(padding, 0 25);
 }

 .selector {
   @include to-em(text-shadow, (#0d6e28 1 1) (#777 0 0 2), 16);
 }

 .selector {
   @include to-rem(box-shadow, (inset 0 0 0 1 #2a9022) (inset 0 0 3 #459966));
 }

 .selector {
   @include to-em(padding margin, $spacing-base, false, true);
 }

 .selector {
   @include to-rem(padding margin, $spacing-base, true);
 }