Skip to content

Using wonky clip paths and stacked grid layouts to create an interactive and hopefully not so ugly cozy sweater

Notifications You must be signed in to change notification settings

McCambley/sweater-weather

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sweater Weather

Responsive web design for when the weather gets cold

Welcome to the Sweater Weather project. A work in progress where the end goal is to allow users to create and interact with their very own sweater.

the current iteration is quite basic and does the following:

  1. Uses a column of grids to create a responive layout of various colors and shapes
  2. Uses a polygonal clip-path to hide the elements of the grid outside of a sweater shape
  3. Uses various styling elements to create the experience of a not so cozy envirnoment.

The basics are laid out, but I'd like to clean up the following:

  1. First off I'd like the clean up the code... it's a mess in there
  2. I'd like to lay the ground work of grids and animations such that everything is in place, and only minor adjustments need to be made to account for styling. In a sense, this is my Minimum Viable Product
  3. The outline of the sweater is quite atrocius. I'd like to rewrite the clip-path to fit within the border image, and I'd like to recolor the border image to fit the styling of the snowy background.
  4. I'd like to create color palletes unique to each section of the sweater that would then complement the other sections to create a nicer overall design.
  5. I'd like to adjust the grid-gaps coloring and sizing within the sweater to fit with the final color pallet.
  6. Once the final color pallettes are chosen, I'd like to fine tune the clip-paths and grid sizes of each section to fit a more cohesive design. Again, I'm going for "not so ugly sweater" here.

Once those steps are achieved, I'd like to create a form that would allow a user to create their own design. This might include the following:

  1. A preset group of color palletes to chose from
  2. A range that would allow users to adjust the number of sections on their sweater
  3. An input that wold allow the user to select from a few layouts for each individual section

Other features that might be nice:

  1. Allow a user to upload a photo of their own sweater for comparison
  2. Allow a user to change the background
  3. Allow a user to embed or post their sweater to social media

Stay cozy!

About

Using wonky clip paths and stacked grid layouts to create an interactive and hopefully not so ugly cozy sweater

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published