utsa-asc / college-dls

design language system for the University of Texas at San Antonio

UTSA College Design Language System

Repository for code which generates our Design Language System for UTSA College Websites.

Setup

    $ npm install
    $ npm run start

npm start will start a fractal instance at http://localhost:3000 (via BrowserSync) and will also watch for any file changes. Changes to any sass files will also be monitored by gulp for recompilation and browsersync reload.

For more information, please see the documentation at https://utsa-asc.github.io/college-dls/docs/contributing.html

college-dls's Issues

JS build processing

• write Gulp task using updated syntax to process all project Javascript files
• optimizing: compiling, minifying, compressing, concatenating

Page - Information

Page - College Home

Build out navigation examples

From the Navigation section:

• Standard Navigation
• Mobile Navigation
• Breadcrumb
• Global Footer
• Footer (Site Ankle)
• Side Nav

Navigation - Breadcrumb

move over markup HTML from dev site into college-dls

PL Names sheet (Row 20):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Breadcrumb):
https://development.simpsonscarborough.com/utsa/navigation-standard.html#breadcrumb

Page - Event

CTA - Enrollment Call To Action

move over markup HTML from dev site into college-dls

From - Default Form

Page - Request Information

Card - Action Card

move over markup HTML from dev site into college-dls

PL Names sheet (Row 55):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Profile Card Component):
https://development.simpsonscarborough.com/utsa/card-tiles.html#profile-card

or/and

https://utsa-asc.github.io/college-dls/components/detail/action-card.html

Page - Program Listing

Build out program search and form components

• Program Search Box
• Subscribe Form
• Contact Form

Page - Department Secondary

move over markup HTML from dev site into college-dls

PL Names sheet (Row 100):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Undergraduate Studies):
https://development.simpsonscarborough.com/utsa/undergraduate-studies.html

or/and

https://utsa-asc.github.io/college-dls/components/detail/department-secondary-page--default.html

Please note, this page depends on several components from sprint-03

Content Group - Link List

Typography - Block Quote

move over markup HTML from dev site into college-dls

PL Names sheet (Row 11):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Block Quote):
https://development.simpsonscarborough.com/utsa/typography.html#blockquote-sec

Typography - Table

move over markup HTML from dev site into college-dls

PL Names sheet (Row 62):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Faculty Full Bio Component):
https://development.simpsonscarborough.com/utsa/card-tiles.html#table-component

or/and

https://utsa-asc.github.io/college-dls/components/detail/table.html

Accordion

move over markup HTML from dev site into college-dls

PL Names sheet (Row 81):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Accordion Component):
https://development.simpsonscarborough.com/utsa/behavior.html#accordian-component

or/and

https://utsa-asc.github.io/college-dls/components/detail/accordion.html

Build out Call to Action components

Call to Action (and variants):

• Call to Action - Default
• Call to Action - Buttons
• Call to Action - Image
• Call to Action - Image - Buttons
• Gallery Call to Action

Documentation Pages

Need to work on the base documentation pages:

• Welcome
• Contributing
• Process

Build example pages for department interior page example

• 3.1: Interior Page (from Scholarship)
• 3.2: Department Interior Page (from Undergraduate Studies)
• 3.3: Department Interior Page 2 (from Department Accounting)
• 3.4: Department Interior Page 3 (from Accounting)

Will use variants for these

Page - Institute Home

Need PoC: including/referencing components

Create a PoC that builds an example page using "@handle" component references - like includes or handlebars partials

Reference:

• https://fractal.build/guide/core-concepts/naming.html#referencing-other-items
• https://fractal.build/guide/components/including-sub-components.html#container-components-via-partial-block

Content Group - Content List

Quick Facts

move over markup HTML from dev site into college-dls

Typography - Buttons

move over HTML Markup from dev site into college-dls

CTA - Call to Action Button

move over markup html from dev site into college-dls

PL Names mapping:
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref:
https://development.simpsonscarborough.com/utsa/functional.html#call-highlight-component

Typography - Image Quote

move over markup HTML from dev site into college-dls

PL Names sheet (Row 12):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Image Content Example):
https://development.simpsonscarborough.com/utsa/typography.html#image-blockquote

Card - Content Card

move over markup HTML from dev site into college-dls

PL Names sheet (Row 55):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Content Card Component):
https://development.simpsonscarborough.com/utsa/card-tiles.html#content-card

or/and

https://utsa-asc.github.io/college-dls/components/detail/content-card.html

Content Group - News Group

move over markup HTML from dev site into college-dls

PL Names sheet:
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref:
https://development.simpsonscarborough.com/utsa/listing-component.html#blog-news-component

Profile - Small Profile Card

move over markup HTML from dev site into college-dls

PL Names sheet (Row 59):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Profile Card Component):
https://development.simpsonscarborough.com/utsa/card-tiles.html#profile-card

or/and

https://development.simpsonscarborough.com/utsa/card-tiles.html#staff-callout

Profile - Profile Info

move over markup HTML from dev site into college-dls

PL Names sheet (Row 61):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Profile Card Component):
https://development.simpsonscarborough.com/utsa/card-tiles.html#profile-card

or/and

https://utsa-asc.github.io/college-dls/components/detail/profile-info.html

Build out Program Listing example page component

By copying an existing example page component.

• Program Listing Page (was Undergraduate Programs in SS Dev site)

Typography - Anchors

move html code over from development site to college-dls

Content Group - Faculty/Profile Group

move over markup HTML from dev site into college-dls

PL Names sheet (Row 72):

https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

I think we want this one intead (generic content group), will also require Action Card (Row 55):

https://development.simpsonscarborough.com/utsa/listing-component.html#content-listing

Tab

move over markup HTML from dev site into college-dls

PL Names sheet (Row 82):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Tab Component):
https://development.simpsonscarborough.com/utsa/behavior.html#tab-component
or/and

https://utsa-asc.github.io/college-dls/components/detail/tab.html

Card - News Card

move over markup HTML from dev site into college-dls

PL Names sheet:
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref:
https://development.simpsonscarborough.com/utsa/card-tiles.html#news-card-component

only use one build file

use the fractal.config.js instance inside gulpfile to control all watch, compile, serve tasks via gulp instead of gulp and fractal, like this example:

https://github.com/alarisprime/fractal-starter-kit/blob/master/gulpfile.js

Page - Institute Secondary

move over markup HTML from dev site into college-dls

PL Names sheet (Row 103):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Policy Studies):
https://development.simpsonscarborough.com/utsa/policy-studies.html

or/and

https://utsa-asc.github.io/college-dls/components/detail/institute-secondary-page.html

Please note, this page depends on several components from sprint-03

Typography - Lists

move HTML Markup over from dev site into college-dls

CTA - Call To Action Image Button

move over markup HTML from dev site into college-dls

PL Names mapping:
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref:
https://development.simpsonscarborough.com/utsa/functional.html#call-highlight-component

Page - Faculty Profile

Reorganize design tokens

I've moved over the Css Classes section from the dev site, but there is a lot of repetition, need to reorganize this into the 01-visual-styling better.

Items in Utility that already exist:

• Heading
• Font Family? (we probably need a default type section in Typography)
• Borders and Background
• Color

Card - Event Card

move over markup HTML from dev site into college-dls

PL Names sheet:
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref:
https://development.simpsonscarborough.com/utsa/card-tiles.html#deadline-card-component

Strategy Question: BS Variables import

college-dls/src/scss/import.scss

Line 11 in 18a0a8a

@import "variables";

In src/scss/import.scss

Why are we importing our our _variables.scss instead of 
using Bootstrap variables (@import "../../node_modules/bootstrap/scss/variables";) 
and then overriding it?

See notes and examples within: 

https://github.com/utsa-asc/utsa-bs5-poc/blob/f705b6ee0acc99c07a91f036a2cf69ae81e2a55c/app/styles/utsa.bootstrap.scss#L55

Page - Department Home Page

move over markup HTML from dev site into college-dls

PL Names sheet (Row 99):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Profile Card Component):
https://development.simpsonscarborough.com/utsa/card-tiles.html#staff-callout

or/and

https://utsa-asc.github.io/college-dls/components/detail/department-home-page.html

Build out remaining example pages

• Policy Studies -> Institute/Center Page
• Events -> Event Page
• Accounting Faculty -> Faculty Profile Page
• Research -> Institute/Center Landing Page

Content Group - Event Group

move over markup HTML from dev site into college-dls

PL Names mapping sheet:
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

https://development.simpsonscarborough.com/utsa/listing-component.html#events-listing-component

Navigation - Side Navigation

move over markup HTML from dev site into college-dls

PL Names sheet (Row 23):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Standard Side Navigation Component):
https://development.simpsonscarborough.com/utsa/navigation-standard.html#Standard-navigations

Page - News

Profile - Faculty Bio

move over markup HTML from dev site into college-dls

PL Names sheet (Row 62):
https://utsacloud-my.sharepoint.com/personal/kyra_kauschel_utsa_edu/Documents/PL%20Names.xlsx?web=1

SS Ref (Faculty Full Bio Component):
https://development.simpsonscarborough.com/utsa/card-tiles.html#bio-component

Also as variant or separate comp:
https://development.simpsonscarborough.com/utsa/card-tiles.html#profile-detail-compnent

or/and

https://utsa-asc.github.io/college-dls/components/detail/faculty-bio.html