This is a playground for typography and space for the design system at the University of Alabama.
-
The space-type system is based on an 8px (0.5rem) grid, with a 4px (0.25rem) type grid. The typography is loosly based on a modular scale with a perfect fifth (2:3) ratio, but deviates to deliver sizes in whole pixels, and line heights that conform to the type grid. This means that there are never half pixels, and numbers can be translated 1:1 into design software.
-
In practice, this will create 9 CSS variables to cover space, and 6 to cover typography.
-
-
Second level heading, extra long to test line height
-
Thirty-six current UA faculty have received NSF CAREER Awards, the nation’s most prestigious recognition of top-performing young scientists, in disciplines ranging from nanoscience and engineering to biological sciences. During the 2019-2020 academic year, seven professors received this award, the most awards in a single year at UA. And 52 UA faculty researchers are in the National Academy of Inventors.
-
UA’s Capstone Agency was awarded Best Student-Run Firm by the Public Relations Student Society of America for the third time in 2020.
-
-
Third level heading, extra long to test line height and max heading length
-
At 38,320 students, UA enrolled the largest freshmen class in history in fall 2021. It is the third year out of the last four years with a fall enrollment of more than 38,000 students. Graduate School enrollment of 6,152 is a 7% increase from fall 2020 and breaks last year's record enrollment number.
-
-
"As a member of The University of Alabama community, I will pursue knowledge, act with fairness, integrity and respect; promote equity and inclusion; foster individual and civic responsibility; and strive for excellence in all I do."
-
-
Caroline Yuk, a senior majoring in interdisciplinary studies through New College, was among 46 Americans selected to study in the United Kingdom through the prestigious Marshall Scholarship. Yuk is the third UA student to win the award and first in more than 40 years.
-
-
Lorem Ipsom
-
The University of Alabama will not require standardized ACT or SAT scores from students applying through the Fall 2022 Semester. Admission consideration for freshman entering through the Fall 2022 Semester will be based on a holistic review. Holistic admissions at The University of Alabama includes both academic and non-academic criteria.
-
-
-
-
Column 1
Column 2
Column 3
-
-
-
Cell 1/1
Cell 1/2
Cell 1/3
-
Cell 2/1
Cell 2/2
Cell 2/3
-
Cell 3/1
Cell 3/2
Cell 3/3
-
-
-
-
The University of Alabama reserves the right to refuse admission or re-enrollment or to place conditions on admission or re-enrollment of applicants and former students who it determines represent a safety risk to University students, employees and University property. Applicants have the right to appeal any such decision to the Undergraduate Admissions Advisory Committee within 7 business days of the date the notice was received.
-
Withholding information or giving false information may make you ineligible for admission to, or continuation at, the University. Therefore, by submitting this information, you certify that it is true, correct and complete. Also, by submitting this application, you give permission for the University to obtain additional information from others pertinent to your record prior to attending the University.
-
U.S. News and World Report ranks The University of Alabama’s Manderson Graduate School of Business No. 22 among public universities. The rankings are based on level of accreditation, faculty credentials, admissions selectivity, reputation for excellence among peer institutions and academic and career support services offered to students.
-
-
-
Fourth level heading, extra long to test line height and max heading length. It takes a long title to wrap, so this is unlikely
-
There are two ways in which students can be eligible for scholarships under UA’s current test optional admission policy.
-
-
Competitive Scholarships – The competitive scholarship application is part of your application for admission. Students who elect not to send a test score are eligible for competitive scholarship consideration if their application for admission and supporting documentation is submitted by January 15.
-
Automatic Merit Scholarships – To qualify for automatic merit scholarships, students must provide a test score and official transcript. Applicants may indicate that they do not want their test scores included in the review of their application for admission and still submit test scores for automatic merit scholarship consideration by May 1.
-
-
UA's Culverhouse School of Accountancy's undergraduate program ranks 11th overall in 2019, 10th overall for a program with a faculty size at more than 24 and 3rd in the South, according to Public Accounting Report. UA’s master’s programs are ranked 10th overall, 8th in schools with more than 24 faculty and 2nd in the South. UA’s doctoral program is ranked 9th overall.
-
After you are admitted to UA, you will be notified about the Freshman Supplemental Scholarship Application.. This is an optional scholarship application that will be accessible in myBama.
Heavily inspired by Skeleton, this CSS boilerplate contains a simple CSS reset, base html styles using
+ modern techniques, and a few features to help things along. It enables smooth scrolling, adds a top scroll
+ margin, enforces the hidden attribute, adds a visually-hidden class to keep hidden
+ content available for screen readers, and a bunch of other small tweaks and goodies.
+
This is not a framework, but a starting point. There is no build, no package, no hastle. Just download the
+ file and start adjusting it to fit your needs. What is here has been designed to be as little opinionated
+ style as possible while giving a nice baseline aesthetic.
Lists of the same type can be nested up to three times with different styles, and styles have been included
+ for unordered lists, ordered lists, and definition lists.
A blockquote can be created using the <blockquote> element, or by using the
+ .callout class. Paragraph elements should be placed inside the blockquote element.
Here is some details content. This accordion style is in the optional
+ _components.css file and is used by adding the .accordion class to the
+ <details> element.
Styles have been included for <code>, <samp>, and
+ <kbd> elements. Code blocks can be made by wrapping a <code> element
+ inside a <pre> element. Code blocks overflow automatically on the x axis in case there is
+ not enough room for a line of code.
+
.some-class {
+ background-color: blue;
+}
+
+<!-- Remember every whitespace and break will be preserved in a <pre>, including indentation in your code. -->
Images are given display: block and max-width: 100% by default. A video wrapper
+ is provided for responsive embeds, and utilities are provided to control aspect ratio for images and video.
+
Color used for light text. Note that it should still be accessible against the page background
+
+
#707682
+
+
+
--highlight-color
+
Color used for highlights
+
#E6F1FF
+
+
+
--primary-color
+
Color used for accents, navigation, buttons, etc.
+
#0074E0
+
+
+
--primary-alt-color
+
Color used for button hovers, etc.
+
#052E55
+
+
+
--space
+
The standard unit of space
+
1.6rem
+
+
+
--flow-space
+
The vertical space between elements in flow
+
var(--space)
+
+
+
--section-space
+
The amount of space between sections
+
calc(var(--space) * 4)
+
+
+
--content-width
+
The max width of the main content area
+
900px
+
+
+
--sidebar-width
+
The max width of the sidebar
+
300px
+
+
+
--gutter
+
The width of the side padding
+
var(--space)
+
+
+
--ratio
+
The ratio used for modular type scale
+
1.2
+
+
+
--ms-0
+
The base font size. 1rem = 16px, 1.125rem = 18px, 1.25 = 20px.
+
1rem
+
+
+
+
+
--ms-1 through --ms-5, and --ms--1 are also available. They use a
+ calc function to find the correct step in the modular scale based on the
+ --ratio.
+
Generally, I might also recommend setting up a color scale for your project. I've used semantic variables
+ for the colors here because not all projects require a color scale. Please see below some pre-generated
+ colors I had thought about including in this boilerplate:
+