CSS Style Testing

2024-05-15

This post is meant to be a test-bed for my personal SASS library that I plan on sharing across my personal sites. I plan on posting information on how it's supposed to work in a separate post (or maybe series of posts).

A hesitant shout-out to a recent article I read, You Don't Need a CSS Framework. I don't agree with several points made in the article, but the author's reference site, starterapp.style, is really well laid out for showcasing how a stylesheet will render.

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some
List
Items

Some
List
Items

Buttons

Forms

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output 100

Tables

	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Overflow?	Overflow?
Row	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Overflow Cell	Overflow Cell
Row	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Overflow Cell	Overflow Cell
Row	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Overflow Cell	Overflow Cell
Total	Total	Total	Total	Total	Total	Total	Total	Total	Total	Total	Total	Total	Total	Total	Overflow Total	Overflow Total

Modals

Tooltips

Hover over me to see a tooltip.

Hover over me to see a tooltip with a ton of text.

Abbreviations

The <abbr> element receives basic styling to make it stand out amongst paragraph text. You can pair this with Tooltips to customize the popup.

The HTML abbreviation element.

Cards

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat, enim id efficitur porta, diam sem porta sapien, ut dignissim velit erat quis sapien. Nullam vulputate enim placerat tortor consequat, vulputate blandit nunc tempor. Integer purus augue, fringilla eu molestie in, consequat at turpis.

Orci varius

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus vel pulvinar orci, ac auctor urna. Nulla aliquam enim rutrum, auctor urna at, facilisis metus. Vivamus euismod arcu ut leo tincidunt auctor. Vestibulum auctor neque leo, vitae dignissim tellus lobortis vitae. Fusce vestibulum eleifend tortor et convallis. Aliquam congue nec ipsum id accumsan. Ut et sagittis velit. Vestibulum lacinia, diam vitae sodales euismod, nulla diam molestie velit, vitae iaculis neque nisl sit amet metus. Cras vehicula auctor fermentum.

Mauris felis

Mauris felis lorem, condimentum vel lobortis et, condimentum eu libero. Fusce eget iaculis metus. Pellentesque quis ligula eget sem bibendum ultrices. Maecenas et ante id ex ultrices sagittis. Suspendisse malesuada eleifend arcu congue tempus. Pellentesque sed dictum ex. Pellentesque orci mi, vestibulum quis enim at, posuere iaculis neque.

Code

Code can be displayed inline with the <code> tag, or in a block

like this,
with <pre> and <code>

Toggles

Toggles should be used for actions that take effect on click, as opposed to checkboxes, which should be used for actions that take effect when a form is submitted.

Turn it up to eleven

Accordions

If a group of <details> elements all have the same name attribute, most browsers will only allow one of them to be open at a time. Firefox doesn't support this, but it's supported by most other browsers, and degrades relatively gracefully.

This is an accordion summary

This is another accordion summary

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus vel pulvinar orci, ac auctor urna.
Nulla aliquam enim rutrum, auctor urna at, facilisis metus.