A design system by Ezequiel Bruni, for Ezequiel Bruni.
Introduction
NewFolder is a lightweight, minimalist design system / CSS framework, created to give users an easy reading experience. It was made to be used with blogs, wikis, and knowledge-base style sites.
But really, it's a hodge-podge of styles that I've either written myself, or borrowed from elsewhere over the years. It's meant to be easy to customize in terms of color and typography, though I'll be sticking with the type I am using here.
All layouts must be created by the user. I like to use CSS Grid for that, myself.
Requirements
A working knowledge of HTML, CSS, and SCSS.
A willingness to interpret my somewhat minimal code-commenting style.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs & General Text Styling
API: A system whereby enterprising young developers make money from your users’ data. Remember that you can always destroy them by “tweaking” the API for “performance” because you “hate chronological timelines”.
Comments (in Code): In-jokes and clever insights that only total nerds will ever see. One day, someone will achieve true enlightenment, and the secret will written down as a code comment, and lost to an obscure GitHub repository.
Blockquote
Front end: The part of a website where you tell users what you think they want to hear, based on research, surveys, and indiscriminate guessing.
- Me
Unordered List
Uordered lists have been lightly customized with the ::marker pseudo-element.
Item One
Item Two
Item Three
Ordered List
Ordered lists have been lightly customized with the ::marker pseudo-element.
The small tag allows you to make any text a bit smaller than it otherwise would be.
Colors
Colors are set up via SASS variables, to make it easy to change the whole look of your design system at once. Primary text colors are set with var(--text-color-1) and var(--text-color-2).
The color for text links on hover is set with var(--link-hover).
Here are a few more color variables you'll need to know and/or change.
var(--primary-color)
var(--secondary-color)
var(--tertiary-color)
var(--background-color-1)
var(--background-color-2)
Content Components
Images
Basic Images
Focused Images
These images are designed to go a little bit out of bounds.
Captioned Images
Images courtesy of LoremFlickr.
Floating Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique risus nec feugiat in fermentum. Cursus in hac habitasse platea. Vestibulum mattis ullamcorper velit sed. Integer vitae justo eget magna fermentum iaculis eu.
Nec tincidunt praesent semper feugiat nibh sed. Viverra justo nec ultrices dui sapien eget mi proin. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Mauris vitae ultricies leo integer malesuada nunc. Sed ullamcorper morbi tincidunt ornare. Neque laoreet suspendisse interdum consectetur libero id. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Morbi tristique senectus et netus et. Eu consequat ac felis donec et odio. Adipiscing bibendum est ultricies integer quis auctor elit.
Sed euismod nisi porta lorem mollis aliquam ut. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Feugiat in ante metus dictum at tempor commodo. Sapien et ligula ullamcorper malesuada proin libero. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Enim ut tellus elementum sagittis. In nisl nisi scelerisque eu ultrices vitae. Enim diam vulputate ut pharetra sit amet aliquam id diam. Nunc pulvinar sapien et ligula ullamcorper. Tempor id eu nisl nunc mi ipsum faucibus. Iaculis eu non diam phasellus vestibulum. Sed odio morbi quis commodo odio. Sodales ut etiam sit amet nisl. Tellus in metus vulputate eu scelerisque. Gravida arcu ac tortor dignissim convallis aenean et.
Preformatted text
Hello!
World!
This is preformatted text!
Definition Lists
This is a definition term
This is a description or definition of that of that term.
This is a second description of that term.
This is a second term
Everyone seems to want one of those for some reason.
Code
Here's a tiny bit of code wrapped up in a paragraph element. Hello world! The text in the <code> element is made to look a bit smaller for the sake of contrast. The monospaced typeface should keep it legible.
Alert Boxes
General Information
This is some general information.
Yeah, so this is some stuff you should probably know. It's not urgent, no action is required on the part of the user, other than to relax and read the information presented here.
Mild Warning
This box is for important information.
This is for important information, things a user might need to know before taking their next step. The information is important, but still requires no immediate action on the part of the user.
Success Alert
This means everything is going great!
Hell, it's better than great! It's AWESOME! It's the kind of alert someopne might generate if they've just successfully used a form, or taken their dog for walkies.
Warning Alert
Strong Warning / Error Message
Something has clearly gone very wrong. This alert box may provide options to the user via links, or possibly a form.
Floating Alert Boxes
This is some general information.
Yeah, so this is some stuff you should probably know. It's not urgent, no action is required on the part of the user, other than to relax and read the information presented here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique risus nec feugiat in fermentum. Cursus in hac habitasse platea. Vestibulum mattis ullamcorper velit sed. Integer vitae justo eget magna fermentum iaculis eu. Nec tincidunt praesent semper feugiat nibh sed. Viverra justo nec ultrices dui sapien eget mi proin. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Mauris vitae ultricies leo integer malesuada nunc. Sed ullamcorper morbi tincidunt ornare. Neque laoreet suspendisse interdum consectetur libero id. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Morbi tristique senectus et netus et. Eu consequat ac felis donec et odio. Adipiscing bibendum est ultricies integer quis auctor elit.
This is some general information.
This box also uses the .float-hard class to make the box go a bit out of bounds. Nifty, huh?
Sed euismod nisi porta lorem mollis aliquam ut. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Feugiat in ante metus dictum at tempor commodo. Sapien et ligula ullamcorper malesuada proin libero. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Enim ut tellus elementum sagittis. In nisl nisi scelerisque eu ultrices vitae. Enim diam vulputate ut pharetra sit amet aliquam id diam. Nunc pulvinar sapien et ligula ullamcorper. Tempor id eu nisl nunc mi ipsum faucibus. Iaculis eu non diam phasellus vestibulum. Sed odio morbi quis commodo odio. Sodales ut etiam sit amet nisl. Tellus in metus vulputate eu scelerisque. Gravida arcu ac tortor dignissim convallis aenean et.
Content Navigation
These are in-content navigation patterns, designed to be used as secondary navigation, at best. The idea is to help you more easily organize and link to subsections of the page or site. Site navigation, like the overall layout, is left up to you.
While this framework initially had a whole bunch of navigation patterns that could be used (in theory) anywhere in the site, that proved to be an unwieldy solution to my problems and needs. The way I design websites, a one-size-fits-all approach to navigation just doesn't work, and each pattern would need to be extensively modified, making more work for me.