100Automations / Website

We’re supporting tools and micro services to help simplify open source development for the wider Civic Tech community. We welcome ideas and projects in all stages - connect with us and let’s build 100 automations.
https://100automations.org/
GNU General Public License v3.0
13 stars 14 forks source link

Create a css framework #111

Closed Olivia-Chiong closed 3 years ago

Olivia-Chiong commented 3 years ago

Overview

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

Action Items

Resources/Instructions

Olivia-Chiong commented 3 years ago

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

NivenPrasad commented 3 years ago

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

mdothman commented 3 years ago

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

mdothman commented 3 years ago

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

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 commented 3 years ago

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

NivenPrasad commented 3 years ago

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

mdothman commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

CSS framework built. Issue being closed.