Create a css framework

[Olivia-Chiong]

Overview

Create a css framework so developers can refer to it and build consistently beautiful websites.

Action Items

• [ ] Create a framework using Material Design
• [ ] Review with the team

Resources/Instructions

[Olivia-Chiong]

@ExperimentsInHonesty will connect @mdothman with Josh Bubar and David Rubenstein for some css help.

[NivenPrasad]

@mdothman, @CamilaArias and @Olivia-Chiong meeting on 1/14 to discuss.

[mdothman]

@mdothman is meeting with @jbubar on 1/14 for style guidance.

[mdothman]

100 Automations CSS Framework

Overview

The purpose of this report is to provide the reader with a design system and style guide the project. We will be using Material Design to create our site, and customizing with SCSS. We will be creating our own color styles and typography styles because Material Design only has a select color palette, and Roboto font.

Folder System

The folder system is organized based off of jekyll folder system. Each item of the includes folder has elements within that need customizing. The folder components will posses tools for the user to navigate. All included elements possess components that help define an action for the user. The layouts folder will style our pages and posts, and our variables folder will consist of constants used throughout the site. Variables are used to compensate for lack of framework.

_sass/

• index.scss
• includes/ index.scss, header.scss, footer.scss, atoCard.scss, guideCard.scss, actionCard.scss, border.scss
• guide/ index.scss

• includes : For view to be held.
• guide: The guide layout
• index: imports the styles

Organize What Components Are Vital To Design

1. Automation Card
   1. Delivers a brief explanation
   2. Presents an image
   3. Provides an action item
2. Guide Card
   1. Title hooks in reader
3. Action item
   1. Development
   2. Design
   3. Create

[mdothman]

@CamilaArias and @mdothman will be meeting to discuss class names and folder structure on 1/17

[NivenPrasad]

@mdothman and @CamilaArias aiming for classes and design system to be set up by Saturday 1/23.

[mdothman]

Class Naming System

Overview

This is a report for establishing the fundamental naming system of 100 Automations. 100 Automations will create custom class names to access framework.

Class names

<header class="header mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row" >
...
</div>
</div>

Header

Label	Name	Child(ren)
Header	.header.mdl-layout__header	.header-row.mdl-layout__header-row
Header Row	.header-row.mdl-layout__header-row	.mdl-layout-title, .mdl-layout-spacer, .mdl-layout-spacer, .mdl-navigation, .mdl-layout__drawer
Navigation	.mdl-navigation	mdl-navigation__link
Drawer	.mdl-layout__drawer	.mdl-layout-title, .mdl-navigation

Footer

Label	Name	Child(ren)
Footer	.footer.mdl-mini-footer	.footer-left.mdl-mini-footer__left-section,.footer-list.mdl-mini-footer__link-list
Footer Left Container	.footer-left.mdl-mini-footer__left-section	mdl-logo
Footer Right Container	.footer-right.mdl-mini-footer__right-section	.mdl-mini-footer__social-btn

Cards

Label	Name	Child(ren)
Action Card	.action	.action_card
Card	.action_card.mdl-card	.mdl-card__title, .mdl-card__media, .mdl-card__supporting-text, .mdl-card__actions
Title	.card__title	.mdl-card__title-text
Media	.card__media	img
Actions	.mdl-card__actions	.mdl-button
100 Automations Border Card	.border	.border_card
Automations Card	.ato_card	.ato_card-title, .ato_card-media, .ato_card-text, .ato_card-actions
Guide Card	.guide_card	.guide_card-title, .guide_card-text

Grids

Label	Name	Child(ren)
Automation grid	.automations	.ato_grid
Grid	.mdl-grid	.mdl-cell
Cell	.mdl-cell	.mdl-card, ul
100 Automations Guide grid	.guides	.guide_grid

Layouts

Label	Name	Child(ren)
Guide Layout	.guide_layout	.guide_layout-grid
Guide Layout Grid	.guide_layout-grid	.guide_layout-cell

Customized components

These are the required components that must be styled.

 <style>
// Header component
 .header.mdl-layout__header,
.header.mdl-layout__drawer-button {
    color: rgba(0, 55, 80, 1);
}

.mdl-navigation .mdl-navigation__link {
    color: rgba(0, 55, 80, 1);
}

//  Footer Component
.footer.mdl-mini-footer,.mdl-logo {
    color: black;
    background-color: #ffffff;
}
// Action Card
.action>.action_card.mdl-card {
  width: 100%;
}

.action_card>.action_card-title.mdl-card__title {
  color: #fff;
  height: 176px;
  background: rgba(0, 55, 80, 1)
}
// Border Card
.border>.border_card.mdl-card {
  width: 100%;
}

.border_card>.border_card-title.mdl-card__title {
  color: #fff;
  height: 176px;
  background: rgba(0, 55, 80, 1)
}
// Automation Grid
.automations {
    .ato_grid.mdl-grid {
        .ato_cell.mdl-cell {
            .ato_needs {
                background: rgba(0, 55, 80, 1);
                color: white;
                width: min-content;
                padding: 1.5rem;
            }

            ;

            .ato_card.mdl-card {
                border-radius: 26px;
                .ato_card-media>img{
                    width: 100%;
                }
            }
        }
    }
}
// Guide Grid
.guides {
    a{
        color: #ffffff;
    }
    .guide_grid.mdl-grid {
        .guide_cell.mdl-cell {
            .guide_card.mdl-card {
                border-radius: 16px;
            background-color: #1449B0;
           .guide_card-title,.guide_card-text{
            color: #ffffff;
           }

    };
        }
    }
}
// Guide Layout
.guide_layout {
    .guid_layout-grid.mdl-grid {
        .guide_layout-cell.mdl-cell {}
    }
}
 </style>

Updates on development

[mdothman]

Update

1. These documents will need revision post implementation
2. There are still styles and ux features that need implementation
3. The layouts for guides and automations needs to be created.

[mdothman]

Progress: Guide layout, and Read Me link for automation, Blocks: Splitting up components for styling. Availability: I should be fully available monday and tuesday to finish ETA: 2/3/2021

[mdothman]

I have update the Class Names document to reflect the architecture of the 100 Automations styling framework. Recommend we move forward with styling our page and continue development.

[NivenPrasad]

CSS framework built. Issue being closed.