Posts tagged ‘CSS’

CSS Primer for Lightning Developers: CSS Units for Length Measurement

CSS supports an assortment of units for measuring length. Some units are absolute, some are relative to the length of other values.

Length is expressed as a number value followed by a unit of measurement, an example of an absolute value being 16px, or a relative value being 1em.

Absolute Length Units

Absolute length CSS units are used to represent fixed, physical lengths. Some units, such as the px and pt unit, are relative to physical lengths. The px unit can also be relative to the output device, where 1px can equal one device pixel. The pica, or pc unit, is relative to pt units even though it is considered an absolute length.

Absolute lengths are great to use when you know the exact dimensions of where your content will be output, such as a printer, but for Lightning Components and Applications, you will be better suited to use relative units more times than not.

This is because there is no way to anticipate the pixel density of the devices that will be interacting with your components, and your goal as a Lightning developer is to create responsive applications that are agnostic to the device in which they are displayed.

Absolute lengths can be measured by the following units:

  • mm – One millimeter
  • cm – One centimeter (equivalent to 10mm)
  • in – One inch (equivalent to 2.54cm)
  • px – One pixel (equivalent to 1/96 of an inch)
  • pt – One point (equivalent to 1/72 of an inch)
  • pc – One pica (equivalent to 12 points)

Relative Length Units

Relative length CSS units are used to represent lengths relative to other length values. This allows you to easily make elements smaller or larger than reference elements without having to hardcode specific length values.

Relative length units, for all intents and purposes, break down into two categories – units that are relative to a font size, and units that are relative to the viewport size.

Units Relative to Font Size

The most commonly used relative units calculate length based on the font size of an element. Other more esoteric units calculate length based on the size of specific characters within a font.

The units relative to font size include:

  • em – This is the most common relative unit and the one you should become most familiar with, as it will help you create the most scalable layouts for your components. For any property other than the font-size property itself, em is a multiple of the font-size of the current element, with 1em being equivalent to the font-size of the current element. For example, if the font-size of an element is 10px, then 1em would equal 10px, 0.5em would equal 5px, 2em would equal 20px, and so on. If no font size is specified, 1em is equal to 16px, or 12pt.
  • rem – Very similar to em, the rem unit is also a multiple of font-size, but instead of being relative to the current element (or the parent element in the case of the font-size property itself), rem calculates length relative to the root element of the HTML document. If you prefer to have everything in your components scale perfectly from a single value rather than from cascading values, rem may be a better option for you than em.
  • ex – This is one of the esoteric units mentioned above, and it is not commonly used. Known as a typographic measurement, ex is relative to the x-height of the current font – literally the height of the “x” character contained in the font. If there is no “x” character, ex defaults to 0.5em.
  • ch – Another fairly esoteric unit that is not commonly used, ch is similar to ex in that it is a typographic measurement, but in this case it is based on the width of the “0” (zero) character of a font.

If an em unit is used on the actual font-size property, the value is calculated based on the inherited font-size of the parent element.

Units Relative to Viewport

While having units relative to the percentage of the viewport (the visible area of a document in a browser) makes logical sense for specifying length values for elements that make up the layout of a page, in practical terms these units have not been widely adopted and I am only going to give them a brief mention for the sake of reference:

  • vw – The “viewport width” unit. 1vw is the equivalent of 1% of the viewport width
  • vh – The “viewport height” unit. 1vw is the equivalent of 1% of the viewport height
  • vmin – The smaller of the vw or vh values
  • vmax – The larger of the vw or vh values

CSS Primer for Lightning Developers: Background Properties

There are a number of CSS properties that you can use to style Lightning Components by filling the background of HTML elements with colors or images.

A background consists of the total size of the element, which includes any padding and border spacing, but not margin spacing.

Background properties include:

  • background-color
  • background-image
  • background-position
  • background-attachment
  • background-repeat

background-color

The background-color property specifies the color that is used for the background of an element.

Possible values include:

  • A supported color name such as red, green, or blue
  • An RGB value such as rgb(255,0,0), rgb(0,255,0), or rgb(0,0,255)
  • A hexadecimal value such as #ff0000, #00ff00, or #0000ff
  • transparent – Sets the background color to transparent. This is the default value.
  • inherit – Inherits the background-color value from the parent element
  • initial – Sets the background-color value to its default

background-image

The background-image property specifies one or more images to be used for the background of an element.

When a background-image is specified, it is placed at the top-left corner of the element and repeated vertically and horizontally by default. You can use the background-position and background-repeat properties to change this behavior.

Possible values for background-image include:

  • url – A comma-separated list of URLs for images to be used for the background of an element
  • none – No background image will be used. This is the default value.
  • inherit – Inherits the background-image value from the parent element
  • initial – Sets the background-image value to its default

background-position

When a background-image is specified, it is placed at the top-left corner of the element by default. The background-position property overrides this default value and specifies the starting position of the background image in relation to the containing element.

Values for the background-position property are defined in relation to the horizontal position and the vertical position of the background image.

Possible values for background-position include:

  • left top – Left horizontal position / top vertical position
  • left center – Left horizontal position / center vertical position
  • left bottom – Left horizontal position / bottom vertical position
  • center top – Center horizontal position / top vertical position
  • center center – Center horizontal position / center vertical position
  • center bottom – Center horizontal position / bottom vertical position
  • right top – Right horizontal position / top vertical position
  • right center – Right horizontal position / center vertical position
  • right bottom – Right horizontal position / bottom vertical position

If only one value is specified, the other will default to “center.”

x y – The horizontal and vertical position expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The position is measured from the top left corner, which is represented by the value 0 0.

It is possible to mix position values and percentage values.

x% y% – The horizontal and vertical position expressed as a percentage of the horizontal or vertical size of the containing element. The position is measured from the top left corner, which is represented by the value 0% 0%. The bottom right corner is represented by the value 100% 100%.

If only one value is specified, the other will default to 50%.

  • inherit – Inherits the background-position value from the parent element
  • initial – Sets the background-position value to its default

background-attachment

The background-attachment property specifies whether a background image should have a fixed position, or if it should scroll within a containing element.

Possible values for background-attachment include:

  • fixed – The background image is fixed and will not scroll with the element
  • scroll – The background image scrolls with the element. This is the default value.
  • local – The background image scrolls with the contents of the element
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

background-repeat

The background-repeat property specifies whether a background image will be repeated.

Possible values for background-repeat include:

  • repeat – The background image will be repeated horizontally and vertically. This is the default value.
  • repeat-x – The background image will be repeated horizontally
  • repeat-y – The background image will be repeated vertically
  • no-repeat – The background image will not be repeated
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

CSS Primer for Lightning Developers: Font and Text Properties for Typography

There are a number of properties that you can use to apply styling to the type and appearance of text in your Lightning Components and Applications.

Font properties can be used to define the typeface, boldness, size and other attributes of the text that you display to your users.

Text properties focus on aspects of styling such as text alignment, spacing and color.

Font Properties

The most common font properties include:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

font-style

For all intents and purposes, the font-style property is primarily used to specify whether or not text should be displayed in italics.

The possible values for the font-style property include:

  • italic – Displays the text in italics
  • oblique – Displays the text in a leaning manner – similar to italic, but not as widely used
  • normal – Displays the text normally
  • inherit – Inherits the font-style value from the parent element

font-variant

Similar to font-style, the font-variant property is narrow in scope and is used to specify whether or not text should be displayed in small-caps.

The possible values for the font-variant property include:

  • small-caps – Converts all lowercase letters to uppercase letters, but in a smaller font size than any letters that were originally capitalized
  • normal – Displays the text normally
  • inherit – Inherits the font-variant value from the parent element

font-weight

Another property with a narrow scope, font-weight is used to specify whether or not text should be displayed using a bold weighting.

Unlike font-style or font-variant, however, font-weight is an interesting property in that its possible values correspond to a scale to which is applied to the text weighting.

The font-weight property is also dependent on the specific typeface used, as some typefaces only support a limited number of values.

The possible values for the font-wight property include:

  • 100, 200, 300, 400, 500, 600, 700, 800, 900 – Numeric font weights for typefaces that support more values than the standard bold or normal
  • bold – Displays the text in a bold font weight – equivalent to the numeric value of 400
  • normal – Displays the text using a normal font weight – equivalent to the numeric value of 400
  • inherit – Inherits the font-weight value from the parent element
  • bolder – Selects the next higher available font-weight value for a typeface than its parent element
  • lighter – Selects the next lower available font-weight value for a typeface than its parent element

font-size

The font-size property is used to manage the size of text, an important aspect of defining the styling of your Lightning Components and Applications.

The font-size property can be defined with values that are expressed as either absolute or relative units of measure. CSS measurement units are covered in another post.

If a font-size is not specified, the default size for text in browsers is 16px, or 1em.

font-family

There are two types of font families that can be used as values for the font-family property: generic font families and specific font family names.

Generic font families include:

  • Serif – fonts that include a small line at the end of a stroke in the letter
  • Sans-Serif – fonts that do not include a serif at the end of strokes
  • Monospace – each letter in the font takes up the same amount of horizontal space
  • Cursive – fonts with connected letters or strokes that sometimes resemble handwriting more than print typography
  • Fantasy – Decorative fonts that typically have a playful element to them

Examples of common specific font family names (grouped by their corresponding generic font family) include:

  • Times New Roman, Georgia, Century, Lucid and Trajan (Serif)
  • Arial, Helvetica, Verdana, Droid Sans and Tahoma (Sans-Serif)
  • Courier, Consolas, Andale Mono, Lucida Console and Monaco (Monospace)
  • Comic Sans MS, Lucida Handwriting and Zapf Chancery (Cursive)
  • Copperplate Gothic Bold, Haettenschweiler and Playbill (Fantasy)

If multiple fonts are specified for the font-family property using a comma-separated list, a browser will read the values from left-to-right and apply the first font that it supports.

Always start with the font you most want to use, and then follow with increasingly generic substitute options to ensure that the browser will be able to find a font that it supports.

If a font name consists of multiple words, such as Times New Roman, you must wrap the font name in quotes.

For example:


p {

    font-family: "Times New Roman", serif;

}

font shorthand

While some of the above properties (font-variant in particular) may seem slightly esoteric, there is method to the madness of including them with other commonly used font properties.

The reason why it’s important to know about these individual font properties is that there is a shorthand property simply called font that enables you to consolidate a number of properties into a single property, and it requires values for all of the properties we just talked about.

The properties that can be set using the font shorthand property, in order and separated by whitespace, include: font-style, font-variant, font-weight, font-size/line-height, and font-family. The font-size and font-family properties are required, all others will simply apply default values if they are not explicitly defined.

An example of using the font shorthand property:


p {

    font: italic bold 12px Helvetica, Tahoma, sans-serif;

}

Text Properties

Common text properties include:

  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • line-height
  • letter-spacing
  • word-spacing

text-align

The text-align property can be used to horizontally align text in an element. Possible values include:

  • right – Horizontally align text to the right of a container
  • center – Horizontally center text in a container
  • left – Horizontally align text to the left of a container
  • justify – Stretch text to fill all of the available space in a container so that all lines are of equal width, similar to columns in a newspaper
  • inherit – Inherits the text-align value from the parent element
  • initial – Sets the text-align value to its default

While it is primarily used for aligning text, the text-align property can apply to any inline content that is contained in a block element such as a span or div.

text-decoration

The text-decoration property applies decoration to text, typically in the form of a line below, above or through the text.

Possible values include:

  • underline – Draws a line under text
  • overline – Draws a line over text
  • line-through – Draws a line through the center of text (i.e. a strikethrough)
  • none – Does not apply decoration to text (the default value)
  • inherit – Inherits the text-decoration value from the parent element
  • initial – Sets the text- decoration value to its default

text-transform

The text-transform property is used to control the capitalization of text.

Possible values include:

  • uppercase – Converts all characters to uppercase
  • lowercase – Converts all characters to lowercase
  • capitalize – Capitalizes the first character in each word
  • none – Does not transform text and leaves it as-is (the default value)
  • inherit – Inherits the text-transform value from the parent element
  • initial – Sets the text-transform value to its default

text-indent

The text-indent property is used to specify the indentation of the first line of text contained in an element.

Possible values include:

  • Length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The default length is 0.
  • % – A value expressed in terms of the percentage of the containing element
  • inherit – Inherits the text-indent value from the parent element
  • initial – Sets the text-indent value to its default

Negative values are allowed for length – the first line of text would simply be indented to the left.

line-height

The line-height property specifies the height of each line of text contained in an element, which determines whether lines appear closer together or farther apart from each other.

Possible values include:

  • Length – A numeric value that represents a fixed line height, expressed as an absolute measurement unit such as px or pt
  • Number – A numeric value that represents a multiple of the current font size
  • % – A value expressed in terms of the percentage of the current font size
  • normal – Applies a normal line height. This is the default value.
  • inherit – Inherits the line-height value from the parent element
  • initial – Sets the line-height value to its default

letter-spacing

The letter-spacing property specifies the amount of spacing between characters in a line of text.

Possible values include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The default length is 0.
  • normal – Does not add space between characters. This is the default value.
  • inherit – Inherits the letter-spacing value from the parent element
  • initial – Sets the letter-spacing value to its default

Negative values are allowed for letter-spacing – characters would simply overlap if a negative value was applied.

word-spacing

The word-spacing property specifies the amount of spacing between words in a line of text.

Possible values include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem. The default length is 0.
  • normal – Does not add space between characters. This is the default value.
  • inherit – Inherits the letter-spacing value from the parent element
  • initial – Sets the letter-spacing value to its default

Negative values are allowed for word-spacing – words would simply overlap if a negative value was applied.

CSS Primer for Lightning Developers: Display and Visibility Properties for Showing and Hiding HTML Elements

The display and visibility CSS properties serve a number of purposes, but we are going to focus on a key use case for these properties: Hiding HTML elements on a page without having to use JavaScript to remove the elements from the Document Object Model (DOM).

Both display and visibility can be used to hide HTML elements, but the way in which they achieve this end is fundamentally different and can have an impact on the layout of your Lightning Components and Applications.

display:none and visibility:hidden

A common decision that developers have to make when using CSS to hide HTML elements is whether to use display:none or visibility:hidden.

What’s the difference between the two? Using the display:none declaration will hide an element from the page, and the page will remove the space that the element would have occupied if it was displayed. It’s as if the element never existed in the first place.

On the other hand, using visibility:hidden will also hide an element, but the space that the element takes up is preserved, leaving the layout of the page unchanged despite the fact that the element is not visible.

For example, to hide a <div> element from a component and collapse the space that it would have occupied in the layout:


div.hidden {

    display: none;

}

To hide the same <div> without collapsing the space that it would have occupied:


div.hidden {

    visibility: hidden;

}

Dynamically Showing or Hiding HTML Elements Using CSS and JavaScript

A common trick in Lightning development is to use JavaScript to add or remove CSS classes from HTML elements to show or hide them, which is why it is important to understand the difference between display:none and visibility:hidden.

In Lightning you would achieve this using one of three methods in the $A.Util class from the JavaScript API in your component Controller or Helper resource:

  • $A.Util.toggleClass – If a given CSS class is present, it is removed. If it is not present, it is added.
  • $A.Util.addClass – The specified CSS class is added to the HTML element; if the ‘class’ attribute is not already present on the HTML element, it is also added.
  • $A.Util.removeClass – Removes the specific CSS class from the HTML element.

You can also use the display:block property and value to override display:none, and you can use visibility:visible to override visibility:hidden.

slds-hide and slds-hidden

As an alternative to creating custom CSS rule sets, you can use the slds-hide and slds-hidden utility classes from the Salesforce Lightning Design System (SLDS).

The slds-hidden class selector applies visibility:hidden, and the slds-hide class selector applies display:none as illustrated here:


.slds-hidden {visibility:hidden}
.slds-visible {visibility:visible}
.slds-hide {display:none}
.slds-show {display:block}

CSS Primer for Lightning Developers: CSS Box Model with Padding, Margin and Border Properties

There are literally hundreds of properties that can be applied to the styling of HTML elements. For the sake of helping you get started with styling Lightning Components and Applications, we will focus on the most common properties and their variants to help you hit the ground running with CSS styling.

CSS Box Model

While the CSS box model is not itself a property, knowing how the box model works is essential to understanding how many CSS properties are applied to the styling of HTML elements.

In a nutshell, you can think of each HTML element as a rectangular box. Most of our focus with CSS properties is to define how large the box is, where it is positioned on the page, and how it is formatted.

The box model consists of four distinct parts:

  • Content – The area containing the actual content of an HTML element.
  • Padding – A transparent area that creates space around the content but within the border of the element.
  • Border – The boundary lines of the element that surround the content and its padding.
  • Margin – A transparent area that creates space outside of the border that separates an element from other elements around it.
CSS Box Model
CSS Box Model

Width and Height

There are a number of properties related to defining the width and height of elements.

Properties related to width include:

  • width – Specifies the width of an element
  • max-width – Specifies the maximum width of an element
  • min-width – Specifies the minimum width of an element
  • line-width – Specifies the line width of an element

Properties related to height include:

  • height – Specifies the height of an element
  • max-height – Specifies the maximum height of an element
  • min-height – Specifies the minimum height of an element
  • line-height – Specifies the line height of an element

Width and height properties are defined by values expressed as either absolute or relative units of measure. CSS measurement units are covered in another post.

Padding and Margin

Padding and margin properties are similar in that they are used to create spacing between elements, but how they apply that spacing is fundamentally different.

Padding properties create space around an element, serving as a buffer between the content and the border of the element. Margin properties affect the spacing outside of the border, determining the space between the element and its neighbors in the HTML document.

Padding

Thinking in terms of the CSS box model, padding creates empty space around your content, within the border of an element.

There are CSS properties for setting the padding of each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
CSS Box Model - Padding
CSS Box Model – Padding

Padding properties can be defined with one of three value types:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem
  • % – A value expressed in terms of the percentage of the containing element
  • inherit – The padding will be inherited from the parent of this element

For example, to set the padding on all four sides of a <div> element:


div {

    padding-top: 50px;

    padding-right: 25px;

    padding-bottom: 50px;

    padding-left: 25px;

}

There is also a shorthand property called padding that consolidates all four of the individual padding properties into one.

The padding property is dynamic and can take one, two, three or four values.

When four values are specified for padding, the values are applied to each side of an element clockwise from the top. Each value is separated by a space.

For example, if we use the following shorthand:


div {

    padding: 10px 20px 30px 40px;

}

The padding will be applied as follows:

  • Top (12:00) – The top padding will be 10px
  • Right (3:00) – The right padding will be 20px
  • Bottom (6:00) – The bottom padding will be 30px
  • Left (9:00) – The left padding will be 40px

If three values are specified for padding, the second value specifies both the right and left padding.

For example, if we use the following three values:


div {

    padding: 10px 20px 30px;

}

The padding will be applied as follows:

  • The top padding will be 10px
  • The right and left padding will be 20px
  • The bottom padding will be 30px

If two values are specified for padding, the first value specifies the top and bottom padding, and the second value specifies the right and left padding.

For example, if we use the following two values:


div {

    padding: 10px 20px;

}

The padding will be applied as follows:

  • The top and bottom padding will be 10px
  • The right and left padding will be 20px

If only one value is specified for padding, the value is applied equally to all four sides of the element.

For example, if we use the following value:


div {

    padding: 10px;

}

The padding will be applied as follows:

  • The top padding will be 10px
  • The right padding will be 10px
  • The bottom padding will be 10px
  • The left padding will be 10px

Margin

While padding creates empty space around content but within the border of an element, the margin creates empty space outside of the border.

Margin is used to apply spacing between elements, separating neighboring elements from each other.

Similar to padding, there are also CSS properties for setting the margin of each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
CSS Box Model - Margin
CSS Box Model – Margin

Margin properties can be defined with one of four value types:

  • auto – The browser is responsible for calculating the margin
  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem
  • % – A value expressed in terms of the percentage of the containing element
  • inherit – The margin will be inherited from the parent of this element

If you set the margin-right and margin-left properties to auto, the browser will calculate the space remaining to the right and left and horizontally align an element within its container!

Unlike padding, the margin property accepts negative values for length.

For example, to set the margin on all four sides of a <p> element:


p {

    margin-top: 5px;

    margin-right: 10px;

    margin-bottom: 15px;

    margin-left: 10px;

}

As was the case with padding, there is also a shorthand property for margin that works in the same manner. Using the single margin property can be used to apply top, right, bottom and left margin, and the values are applied clockwise from the top.

For example, if we use the following shorthand:


p {

    margin: 5px 10px 15px 20px;

}

The margin will be applied as follows:

  • Top (12:00) – The top margin will be 5px
  • Right (3:00) – The right margin will be 10px
  • Bottom (6:00) – The bottom margin will be 15px
  • Left (9:00) – The left margin will be 20px

If three values are specified for margin, the second value consolidates the right and left margin.

For example, if we use the following three values:


p {

    margin: 5px 10px 15px;

}

The margin will be applied as follows:

  • The top margin will be 5px
  • The right and left margin will be 10px
  • The bottom margin will be 15px

If two values are specified for padding, the first value consolidates the top and bottom margin, and the second value consolidates the right and left margin.

For example, if we use the following two values:


p {

    padding: 5px 10px;

}

The margin will be applied as follows:

  • The top and bottom margin will be 5px
  • The right and left margin will be 10px

And like padding, if a single value is provided for margin it will be applied to all four sides of the element. For example:


p {

    margin: 5px;

}

The margin will be applied as follows:

  • The top margin will be 5px
  • The right margin will be 5px
  • The bottom margin will be 5px
  • The left margin will be 5px

Borders

There are a number of properties that you can use to style the border of an HTML element.

CSS Box Model - Border
CSS Box Model – Border

Border properties include:

  • border-style
  • border-color
  • border-width
  • border-radius

border-style

The border-style property specifies the type of border to be displayed on one or more sides of an element.

Possible values for border-style include:

  • solid – Displays a solid border
  • double – Displays a double border
  • dashed – Displays a dashed border
  • dotted – Displays a dotted border
  • ridge – Displays a ridged 3D border
  • groove – Displays a grooved 3D border
  • inset – Displays an inset 3D border
  • outset – Displays an outset 3D border
  • hidden – Defines a border, but the display is hidden
  • none – Specifies that no border is defined
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

border-color

The border-color property specifies the color of a border. This property will not be applied unless a value for the border-style property has been defined.

Possible values for border-color include:

  • A supported color name such as red, green, or blue
  • An RGB value such as rgb(255,0,0), rgb(0,255,0), or rgb(0,0,255)
  • A hexadecimal value such as #ff0000, #00ff00, or #0000ff
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

border-width

The border-width property specifies the width of a border. This property will not be applied unless a value for the border-style property has been defined.

Possible values for border-width include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem.
  • thin – Displays a thin border
  • medium – Displays a medium border. This is the default value.
  • thick – Displays a thick border
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

border-radius

The border-radius property was introduced in CSS3 and is can be used to specify the amount of rounding to apply to the corners of an element.

Possible values for border-radius include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem.
  • % – A percentage value
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default