There are no h1 elements used across the magazine. The only h1 wraps the logo in the header. All other text levels start at level 2.
This is a h2 element. Text elements having a class name .h2 also get the same styles. The same class names are available for other heading levels (3, 4, 5 and 6) too.
Headings in articles come with an internal/hash link icon. The icon is wrapped in an <a> tag carrying a class name of heading-hash.
Paragraph styles, including inline code, emphasis, etc. are shown below.
The drop caps are made up of two images, stacked on top of each other. These two images (letter & illustration) need to have the same dimensions. The sizing and positioning of these images relatve to each other and relative to the text is available in the .drop-caps class in the CSS typography partial.
Eaque tempore nam, quam ipsa ducimus dolores quibusdam sint! Voluptate nobis nesciunt aspernatur alias expedita excepturi culpa atque dicta corrupti sed vitae deleniti labore nam cum, maiores dolorum amet sint veritatis, facilis iure dignissimos officia. Magni facilis amet blanditiis, laborum consectetur corrupti quia odit nobis minima maxime natus, quibusdam veritatis nostrum aut voluptates possimus vero ab! Fugiat.
Eaque tempore nam, quam ipsa ducimus dolores quibusdam sint! Voluptate nobis nesciunt aspernatur alias expedita excepturi culpa atque dicta corrupti sed vitae deleniti labore nam cum, maiores dolorum amet sint veritatis, facilis iure dignissimos officia. Magni facilis amet blanditiis, laborum consectetur corrupti quia odit nobis minima maxime natus, quibusdam veritatis nostrum aut voluptates possimus vero ab! Fugiat.
Or you can make your own lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quo nihil architecto, qui modi at, accusantium optio laudantium consequuntur delectus facere non alias natus perspiciatis esse officiis eum hic nam tenetur enim ratione reiciendis eos quam. Facere minima porro, modigly assumenda est inventore. This is sara@smashing.com.
Eaque tempore nam, quam ipsa ducimus dolores quibusdam sint! Voluptate nobis nesciunt aspernatur alias expedita excepturi culpa atque dicta corrupti sed vitae deleniti labore nam cum, maiores dolorum amet sint veritatis, facilis iure dignissimos officia. Magni facilis amet blanditiis, laborum consectetur corrupti quia odit nobis minima maxime natus, quibusdam veritatis nostrum aut voluptates possimus vero ab! Fugiat.
The width of the author avatar depends on the wrapping container's width. For example, the following avatar is wrapped in a div that has a class name .col-2, which means it extends to two columns of the grid.
Author avatar with desciption. In addition to the .author class name, this component figure gets a class of .author--full which is to say that it has full author information, including a bio description.
Sara Soueidan is a freelance front-end web developer, consultant, author and speaker from Lebanon — focusing on HTML5, SVG, CSS, and JavaScript. She’s a … More about Sara…
The article__header header component: contains article meta information + title + tags.
Important note: whenever a time element is used to display time, you need to set the datetime attribute and make sure the date format in the generated attribute syntax is of the format YYYY-MM-DD, otherwise the syntax will be considered invalid.
Article summary is a paragraph that has the class name article__summary. The "SUMMARY" title above the summary is generated automatically in the CSS using a pseudo-element.
This is an article summarys. As browsers constantly improve their graphical rendering capabilities, the ability to truly design within them is becoming more of a reality. A few lines of code can now have quick and dramatic visual impact, and allow for consistency without a lot of effort. And as with most things in Web development, there are often many ways to achieve the same effect.
A "featured" job board component. This component is present in articles as part of the content, and is "pulled out" into a "sidebar" on larger screens.
A "featured" list of related posts component. This component is present in articles as part of the content, and is "pulled out" into a "sidebar" on larger screens.
The Smashing team signature, present in articles written by the editorial team. The content of this component is wrapped in a container with a class of .signature.
(vl, ms, cm)
Code blocks are styled using Lea Verou's Prism syntax highlighter. Every code block is a <pre> element, containing a <code> element that has a class name of language-*, where the asterisk is replaced with the language used—for example CSS or markup.
.row:after {
content: "#";
display: table;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Smashing Rocks!</title>
<link rel="stylesheet" href="style.css" />
Unordered lists have or need no class names. Styles are automatically applied and reset to default wherever they shouldn't be applied. Unordered list bullets are an SVG image, whereas ordered lists use CSS Counters to provide the counters as pseudo-elements.
Block quotes are figures having a class name of block-quote. Each figure contains the block quote content wrapped in a blockquote element with a class name of block-quote__content, and a figcaption element of class block-quote__cite, which contains the cite information for the quote.
This is a block quote. It is marked up using a figure element. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quo nihil architecto, qui modi at, accusantium optio laudantium consequuntur delectus facere non alias natus perspiciatis esse officiis eum hic nam tenetur enim ratione reiciendis eos quam.
This is a second paragraph inside the block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quo nihil architecto, qui modi at, accusantium optio laudantium consequuntur delectus facere non alias natus perspiciatis esse officiis eum hic nam tenetur enim ratione reiciendis eos quam.
Animated pull quotes require extra care: the line height is fixed and used to generate the "covers"—the empty elements used to cover each line of the text. Each cover is then animated by sliding to the right when the pull quote is in the visible viewport (but only the first time). This animation effect on the pull quotes can be recreated for other components but is different for each one depending on the line height used. Flexible line heights break the effect because the heights of the covers will no longer be calculated correctly.
Images inside articles are figures having a class name of article__image. The image inside each figure is NOT stretched to fill the width of the container by default. In order to stretch the image to fill the width of the container, *add* (don't *replace* the default) a class name of article__image--full-width to the figure.
To make an image break out of the content and become 100% the width of the article *container*—that is, 100% viewport with with margin on either side (not touching the edges of the viewport because no images inside articles are meant to do so), add a class name of .break-out to the figure.
Membership Card Buttons:
Button with lines on both sides:
div that has a class name of btn--lined. Unlike other buttons, the class name is applied to the wrapping div, not to the button itself.
Every table element, in order to be responsive, must have the attribute data-tablesaw-mode="swipe" on it. This attribute is required by the Tablesaw plugin from Filament Group to make the table responsive.
Additionally, add data-tablesaw-priority="persist" to every column (usually the first one) you want to always be visible regardless of screen size. The rest of the columns will be hidden depending on available space, and can be "scrolled to" using the left and right buttons on the top right corner above the table.
Moreover, it is necessary that the table have a thead for the plugin to work—even if the cells in it are empty. The data-tablesaw-priority="persist" would then be added to the cells in the thead as well, regardless of whether they contain anything or not.
| Column | Col | Col | Col |
|---|---|---|---|
|
Some possible title
#654589 |
$499 | Declined | |
| #654589 | $499 | In Progress | |
| #654589 | $499 | Fulfilled | |
| #654589 | $499 | Fulfilled | |
| #654589 | $499 | Fulfilled | |
| #654589 | $499 | Fulfilled | |
| #654589 | $499 | Fulfilled | |
| #654589 | $499 | Fulfilled |
Pagination. This pagination is used in the dashboard user area beneath the tables in each section.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven rules.
Live sessions exploring how experts design, build, debug and think. With Dan Mall, Lea Verou, Sara Soueidan, Seb Lee-Delisle etc. A different kind of conference. It doesn’t get more practical than that.
Explore all speakers and topics →
Jakub Mikita wrote
Jakub Mikita wrote
Jakub Mikita wrote
Jakub Mikita wrote
Jakub Mikita wrote
Jakub Mikita wrote
Jakub Mikita wrote
Jakub Mikita wrote
Performance matters. Not only from a technical perspective but also when it comes to how your users perceive your website. Here’s everything you need to know to cater for fast response times and smooth experiences.
Good plugin development and support lead to more downloads. More downloads mean more money and a better reputation. Read on to learn how you can develop good-quality products with these golden seven ... Read More…
Blocking ads? We use ad blockers as well, you know. We gotta keep those servers running, though. Join our member’s club for discounts on Smashing books and conferences and more exclusive content—from only €4/month.
Become a member!
Books, webinars, conferences and networking — with hefty discounts.
Starting from $3 a month. You can cancel any time.
Need a custom plan?
Just want to support Smashing? That's your option!
A perfect package for independent designers and developers.
Great for agencies and organizations that care about being up-to-date.
