JCDMeira / fylo-data-storage

"Frontend mentor" challenge, using reactJs and styled-components. The format of the div containing the amount of space available is shaped with clip-path: path(), to get formatted using characterizations from an SVG.

Frontend Mentor - Fylo data storage component solution

This is a solution to the Fylo data storage component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

This is the front-end mentor's tenth challenge. The challenge is to build the "Fylo data storage component" and make it as close to the design as possible. Building the desing with whatever you want to finish, any language, framework or tools.

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Mobile design

Tablets design

Desktop design

result of my work

Links

• Solution URL: My solution for this challenge

• Live Site URL: check the result

• My figma design: Figma

My process

Built with

• Flexbox
• Mobile-first workflow
• Styled components - CSS in js with stiled components
• React - JS library

What I learned

Using styled components and screen size property to differentiate behaviors from visual components.

import styled, { createGlobalStyle } from 'styled-components';

export const Conteiner = styled.div`
  background-image: url(${(props) =>
    props.screenSize > 1024 ? backgroundDesktop : backgroundMobile});
  background-size: ${(props) =>
    props.screenSize > 1024 ? 'contain' : 'cover'};
  background-position: bottom;
`;

Using styled components and clip-path: with CSS path() function to define the shape using definition used in SVG.

import styled from 'styled-components';

export const GbLeft = styled.div`
  width: 179px;
  height: 72px;
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  margin-top: 14.1rem;
  display: flex;
  justify-content: center;
  align-items: center;

  @media (min-width: 1200px) {
    width: 18rem;
    height: 9.5rem;
    border-radius: 1rem 1rem 0 1rem;
    margin-bottom: 10.5rem;
    margin-left: 28rem;
    clip-path: path(
      'M0 10C0 4.47715 4.47715 0 10 0H169.947C175.491 0 179.976 4.5093 179.947 10.0526L179.5 95L159.942 75.0071C158.06 73.084 155.484 72 152.793 72H10C4.47715 72 0 67.5229 0 62V10Z'
    );
    padding-bottom: 2.6rem;
  }
`;

Use CSS clip-path with the PATH () function, in the internal property, the definition of an SVG image, which will define the format of the div. The format can be caught by exporting the ready drawing of Figma as SVG.

When exporting as SVG it is possible to get the path, copy what is inner on the path path and paste inside the function -> clip-path: path ('path path contained in SVG -')

Useful resources

• react tutorial - This helped me structure the components and build the proposed page.
• my figma design - My figma design for help anyone who wants to build this challenge.
• CSS units conversor - px to VH/VW/REM - CSS units conversor .
• Converting Colors - HSL for all color systems.
• Clip-path - The clip-path CSS property.
• Function Path - The path() CSS function accepts an SVG path string, and is used in CSS Shapes and CSS Motion Path to enable a shape to be drawn..
• Clip-path generator - Generating the values for clip-path polygon .
• CSS background-image - Configuring the background image of an element.
• CSS background-size Property - The background-size property specifies the size of the background images.

Author

• Personal Page - Jean Carlos De Meira
• Frontend Mentor - @JCDMeira
• Instagram - @jean.meira10
• GitHub - JCDMeira