☁️
Züs
  • About Züs
  • Concepts
    • Architecture
      • Mining on the Züs Blockchain
        • Onboarding a New Miner or Sharder
        • Block Production Protocol
        • Block Finalization
        • Merkle Patricia Trees(MPT) and Recovery
        • View Change and Distributed Key Generation(DKG)
      • Payment
      • Storage
      • Token Bridge Protocol
      • Resources
    • Tokenomics
      • Staking Process
      • Block Rewards
      • Delegation
    • Store
    • Earn
    • Build
    • NFT
  • Resources
    • Whitepapers
      • Tokenomics Paper
      • Architecture Paper
      • Storage Paper
    • Patents
      • NON-FUNGIBLE TOKEN BLOCKCHAIN PROCESSING
      • FREE STORAGE PROTOCOL FOR BLOCKCHAIN PLATFORM
      • TRANSFERRING CONTENT VIA PROXY RE-ENCRYPTION
      • STREAMING CONTENT VIA BLOCKCHAIN TECHNOLOGY
      • SPLIT-KEY WALLET ACCESS BETWEEN BLOCKCHAINS
      • ENFORCING SECURITY PARAMETERS SPECIFIED BY AN OWNER ON A BLOCKCHAIN PLATFORM
      • CLIENT AUTHENTICATION USING SPLIT KEY SIGNING ON A BLOCKCHAIN PLATFORM
      • BLOCKCHAIN CONTENT PURCHASING PROTOCOL
      • BLOCKCHAIN BASED PRIVACY COMPLIANCE PLATFORM
      • SYSTEMS AND METHODS OF SELF-ADMINISTERED PROTOCOLS ON A BLOCKCHAIN PLATFORM
      • SYSTEMS AND METHODS OF AGGREGATE SIGNING OF DIGITAL SIGNATURES ON MULTIPLE MESSAGES SIMULTANEOUSLY U
      • SYSTEMS AND METHODS OF BLOCKCHAIN PLATFORM FOR AUTOMATED ASSET BASED PROVISIONING OF RESOURCES
      • SYSTEMS AND METHODS OF SELF-FORKING BLOCKCHAIN PROTOCOL
      • SYSTEMS AND METHODS OF SUSTAINABILITY PROTOCOL USING DISTRIBUTED BLOCKCHAIN APPLICATION WITH IoT SEN
      • SYSTEMS AND METHODS OF BLOCKCHAIN PLATFORM FOR DISTRIBUTED APPLICATIONS
  • API Reference
    • Endpoints
      • Block
      • Client
      • Connection
      • DNS
      • File
      • Smart Contracts
      • Blobber Stats
      • Transactions
      • Miners and Sharders
        • Stats
        • State
        • Diagnostics
        • Configuration
        • Smart Contract State
        • Smart Contract Stats
        • Chain Stats
  • Hackathon
    • Register to Hackathon
      • How to Add Members to Hackathon Team
    • Repos
    • Documentation
  • Products
    • Bolt
      • Get Started
      • Stake
      • Activity
      • Buy ZCN
      • Sell ZCN
      • Send Tokens
      • Receive Tokens
      • Settings
        • Manage Profile
        • Wallet
        • Read Pool
      • Troubleshooting
    • Vult
      • Sign Up
      • Upload File
      • Upload an Encrypted File
      • Upload a File to a Folder
      • Share a Uploaded File
      • Move a Uploaded File
      • Delete a File
      • Make File Available Offline
      • Troubleshooting
    • Atlus
      • Dashboard Overview
      • Service Providers
      • Charts
        • Market Charts
        • Network Charts
        • Storage Charts
        • Züs Explainer
      • Blockchain
      • Server Map
    • Blimp
      • Sign Up
        • Buy ZCN for Storage
      • Use Blimp as Direct Storage
      • Use Blimp as S3 Server
        • S3 Operations
      • Use Blimp for Cloud Migration
      • Manage Allocations
        • Extend Size
        • Extend Duration
        • Add Blobber
        • Replace Blobber
        • Make allocation Immutable
        • Freeze Allocation
        • Cancel Allocation
    • Chimney
      • Get Started
      • Deploy Blobber on Own Server
      • Deploy Blobber on Rented Server
      • Stake Blobber
      • Add Blobber
      • Monitor Blobbers
      • Visualize Blobber Logs
      • View Blobber Rank
    • Chalk
      • Sign Up
      • Create NFT Collection
        • Buy ZCN for NFT via ERC token
        • Buy ZCN for NFT via Credit card
      • Explore NFT Collections
      • My NFTs
      • Profile
        • Withdraw Earnings
        • Manage Collections
  • Guides
    • Zus GO SDK
    • Zus JS SDK
    • Zbox CLI
      • Repo
      • Get Started
      • Creating and Managing Allocations
      • Uploading and Managing Files
      • Lock and Unlock Tokens
      • Tips and Troubleshooting
    • Zwallet CLI
      • Repo
      • Get Started
      • Zwallet Operations
      • Staking on miners and sharders
      • Burn and Mint Tokens using Zwallet
      • Troubleshooting
    • Add a Blobber
      • Repo
      • Getting Started
    • Add a Miner/Sharder
      • Repo
      • Getting Started
    • Setup a Blockchain
      • Repo
      • Quickstart
        • Understand the Script
      • Step 1: Set up the project
      • Step 2: Setup the network for Züs components
      • Step 3: Initialize and Build the Züs components
      • Step 4: Start Sharder and Miner Containers
      • Step 5 : Create a wallet using zwalletcli
      • Step 6: Starting the blobber containers
      • Step 7: Validate Züs deployment
      • Step 8: Creating an Allocation on Blobber
      • Restarting Sharder and Miner Containers with CleanDB.
      • Additional Tips and Troubleshooting
    • Glossary
  • Support
    • Help Center
      • Community
      • Issues on Github
      • Contact Us
Powered by GitBook
On this page
  1. Guides
  2. Züs js-sdk
  3. js-sdk sample website
  4. Describing Code

Adding Styling Elements to Website

Last updated 1 year ago

--scss(directory)
 --chalkInfo.scss
 --chimneyInfo.scss
 --color.scss
 --containerwithicon.scss
 --features.scss
 --fonts.scss
 --globals.scss
 --hero.scss
 --include-media.scss
 --main.scss
 --mainfeature.scss
 --mixins.scss
 --showcase.scss
 --variables.scss
chalkInfo.scss

Source File :

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by chalk containers in scss code.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 to 9 defines screen size definitions for tablet and smallDesktop opening the website.

  • Line 11 to 19 defines dimensions for chalkInfo container

  • Line 21 to 32 defines margin and padding for textContent container.

  • Line 38 to 51 defines ,position, dimensions and color settings for the ellipseTop container.

  • Line 54 to 116 defines margin ,padding and color settings for website media that will be displayed on a screen size greater than tablet(768px+)

  • Line 118 to 143 defines margin ,padding and color settings for website media that will be displayed on a screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)

Sample Screenshot :

chimneyInfo.scss

Source Code :

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by chimney information containers in scss code.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 to 9 defines screen size definitions for tablet(768 px) and smallDesktop(1200px) opening the website.

  • Line 11 to 47 defines subcontainers for chimneyInfo container.

  • Line 12 to 17 defines position and dimensions for chimneyArt sub-container inside chimneyInfo container.

  • Line 20 to 31 defines margin and padding for textContent sub-container inside chimneyInfo container.

  • Line 33 to 47 defines ,position, dimensions and color settings for the ellipseTop sub container inside chimneyInfo container .

  • Line 49 to 108 defines margin ,padding and color settings for chimney info containers that will be displayed on a screen size greater than tablet(768px+)

  • Line 110 to 134 defines margin ,padding and color settings for chimney info containers that will be displayed on a screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)

Sample Screenshot :

color.scss
$lightgray: #81858e66;S
$blobber-primary-blue: #009eff;
$blobber-text-white: #e6e7e8;
$color-background: #030819;
$primary-blue: #0b9dff;
$white: #ffffff;

Describing Code:

  • Line 1 to 6 defines color schemes for all the containers and their layouts and backgrounds in website .

containerwithicon.scss

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by containerwithicon scss code.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 to 9 defines screen size definitions for tablet(768 px) and smallDesktop(1200px)

  • Line 11 to 16 defines position,padding and various other properties for rootWrapper container which matches the root element of a tree representing the CSS document.

  • Line 18 to 23 defines a button and its margin and padding inside containerWithIcon container.

  • Line 25 to 27 defines height for vultContainer .

  • Line 29 to 37 defines position, dimensions and color settings for the logo container.

  • Line 38 to 45 defines position ,dimension and margin for the blimpArt container.

  • Line 47 to 50 defines margin and padding for textContent container.

  • Line 51 to 59 defines top-margin ,padding of p and button sub-containers inside textContent container.

  • Line 61 to 75 defines position and dimensions for an ellipseTop container that draws an ellipse.

  • Line 77 to 79 defines the stack order for the ellipseContainer.

  • Line 81 to 83 defines display: none; for blimpArtDesktop container which is commonly used with JavaScript to hide and show elements without deleting and recreating them.

  • Line 84 to 87 defines font weight and size for the heading container.

  • Line 89 to 91 element is used to color a part of a text with blue color.

  • Line 94 to 97 uppercase container makes the text uppercase and aligned at the center.

  • Line 99 to 103 sets display: none; for withoutPeriod container which is commonly used with JavaScript to hide and show elements without deleting and recreating them.

  • Line 105 to 109 sets font size and weight for headings with h3 tags.

  • Line 110 to 116 sets font weight size and color for all the headings with paragraph tags in the website.

  • Line 121 to 136 defines styling configuration related to buttons on the website.

Sample Screenshot :

faq.scss

Sample Screenshot :

features.scss

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by features in scss code.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 to 9 defines margin ,padding and background color for styling layout wrappers in css.

  • Line 11 to 14 defines padding and background color for containers displaying website features.

  • Line 16 to 23 defines a flexible size container position,width and padding

  • Line 25 to 33 defines button width,height,weight and padding inside the flex container

  • Line 37 to 41 defines icon position,height and width .

  • Line 43 to 45 aligns the text and its width in the container.

  • Line 52 to 56 defines font weight and size for the headings of website.

  • Line 57 to 63 defines font colors and aligning for the text in the paragraph.

  • Line 69 to 94 defines font settings, padding, and margin for the buttons in flex container.

  • Line 107 to 171 defines css styling settings for containers described above for screen size greater than tablet (768px+)

Sample Screenshot :

globals.scss
  • Line 1 imports variables that can be used by the global css containers for website.

  • Line 4 to 9 inserts some css config before the content of each global website elements:

  • Line 11 to 14 defines css styling config for the html or head element of the website

  • Line 16 to 22 defiines css styling config for the <body> element of the website.

  • Line 24 to 29 defines css styling config for the <a> element . or hyperlinks

  • Line 31 to 33 defines css styling for the <ul> element or an unordered HTML list.

  • Line 37 to 40 defines css styling for the element that has been selected via input.

  • Line 42 to 46 defines css button font properties for the placeholder attribute.

  • Line 48 to 51 defines css button font properties for the placeholder attribute via input

  • Line 53 to 55 defines display css parameters for a container of all containers.

  • Line 57 to 60 defines a simple responsive react components that helps in creating Centered containers, overlays and Multiple modals.In the modal a animation applies styles to its target before and after its execution.

hero.scss

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by Hero container. The hero container usually contain a large image with text often placed at the top of a webpage:

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 to 28 defines margin ,width padding and background color for primary,secondary heading and hero containers.

  • Line 30 to 45 defines css styling for uppercase texts ,h3 element.

  • The Line 46 to 53 improves the look of an HTML form with CSS.

  • Line 55 to 81 defines button padding and its attributes in a flex container.

  • Line 86 to 94 defines css styling config for input box container

  • Line 96 to 142 css styling for the showcase when input is provided in the box Following css elements are updated with new css config

    • inputbox ,button, placeholder ,react modal content icons and list items.

  • Line 144 to 217 defines css styling settings for containers described above for screen size greater than tablet (768px+)

Sample Screenshot :

include-media.scss
  • include-media provides a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

main.scss
@import "mainfeature";
@import "hero";
@import "features";
@import "containerwithicon";
@import "showcase";
@import "vultInfo";
@import "chimneyInfo";
@import "chalkInfo";
@import "privateSharing";
@import "partners";

Describing Code :

  • Line 1 to 10 import all the other scss styling pages to display them on the main webpage.

mainfeature.scss

Describing Code :

  • Line 1 to 10 import all the other scss styling pages to display them on the main webpage.

    • Line 1 and 2 import mixins and variables that can be used by the container. The hero container usually contain a large image with text often placed at the top of a webpage:

    • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

    • Line 5 defines margin ,width padding and the following css attributes for mainFeature container

      • A <p> element with resizable margin

      • A <h> element with css styling parameters

      • CSS styling paramters for the <p> element.

  • Line 42 to 101 defines css styling settings for containers described above for screen size greater than tablet (768px+)

Sample Screenshot :

mixins.scss

Describing Code :

Mixins helps in reuse of CSS styling code throughout the website. mixins.css provide various styles that can be re-used throughout your sample website stylesheet.

partners.scss

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by partners container.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 defines css styling settings(position,margin,padding,text-align etc) for partnersContainer .

    • Inside the partnersContainer, the heading element has different font size ,weight and line height(Line 13 to 17).

  • partners subcontainer has flexible responsive layout container structure without using float or positioning. Margins for the top and bottom of the flexible container are defined.

  • Line 29 to 36 defines css styling settings for screen size greater than tablet (768px+).

Sample Screenshot :

privateSharing.scss
  • Line 1 and 2 import mixins and variables that can be used by private sharing container.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 defines css styling settings for privateSharing container .

    • (Line 6 to 14 )Inside the privateSharing container, a flexible responsive layout container structure is defined without using float or positioning. Although margin,padding and text alignment is defined for flex container.

    • A <heading> element is also defined under the privateSharing container.

  • Line 23 to 30 defines privateSharing css styling settings for screen size greater than tablet (768px+).

Sample Screenshot :

showcase.scss

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by container.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 to 9 define device breakpoints to optimize website content for screens and devices with different heights and width.

  • Line 11 to 16 defines css styling settings(position,border-top,text aligning,and padding ) for showcasecontainer .

    • A containerWithIcon css element with a button is defined under showcasecontainer.(Line 18 to 24)

    • A ellipseContainer contains aninset CSS property that corresponds to the distance between an element and parent element. (Line 26 to 38)

    • A ellipse on the left or ellipseLeft container is defined with its relative position(height,left,top,width) and defined background and opacity .(Line 40 to 54)

    • A ellipse on the right or ellipseRight container is defined with its relative position.(Line 56 to 69)

    • A showcaseArt container is defined which contains relative position and size for video element or for demo video that has to be played on the website.

  • (Line 94 to 105) A textContentWrapper simply holds all visual elements and content on the page. It's just a generic container.

  • Line 107 to 119 defines a flexible container structure in css element named textContent . A flexible container contains an h3 element and <p> element.

  • Line 121 to 130 defines a listContainer that has a division or section with font weight ,size ,line height and padding defined.

  • Line 132 to 140 defines a heading in primary blue for showcased Art .

  • Line 142 to 145 defines css styling settings for setting container text in upper case

  • Line 147 to 151 sets the display property to none for hiding elements

  • Line 153 to 166 defines bulletTextContainerwhich defines CSS styling for listing the text as bullet points.

  • Line 168 to 278 defines showcasecontainer css styling settings for screen size greater than tablet (768px+).

  • Line 280 to 305 defines showcasecontainer css styling settings for screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)

variables.scss

Describing Code :

  • Line 1 to 19 defines hexadecimal value for colors

  • Line 21 to 57 defines CSS gradients that helps in displaying smooth transitions between two or more specified colors.

vultInfo.scss

Describing Code :

  • Line 1 and 2 import mixins and variables that can be used by vultInfo container.

  • Line 4 adds include-media which is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.

  • Line 6 to 9 define device breakpoints to optimize website content for screens and devices with different heights and width.

  • Line 11 defines vultInfo container. The container contains the following subcontainers.

    • A vultArt displaying vult logo with specified dimensions.(Line 12 to 19)

    • A textContent containing padding and margin for displaying text on website. (Line 21 to 27)

    • A ellipse on the top or ellipseTop container is defined with its relative position(height,left,top,width) and defined background and opacity .(Line 40 to 53)

  • Line 54 to 135 defines vultInfo css styling settings for screen size greater than tablet (768px+).

  • Line 137 to 174 defines vultInfo css styling settings for screen size smaller or equal to smallDesktop(1200px) and greater than tablet (768px+)

Sample Screenshot :

Source Code :

Source Code :

Source Code :

Source Code : Describing Code :

Source Code :

Source Code : Describing Code :

Source Code :

Source Code :

Source Code :

Source Code : Describing Code :

Source Code :

Source Code :

Source Code :

containerwithicon.scs
_faq.scss
features.scss
globals.scss
hero.scss
include-media.scss
mainfeature.scss
mixins.scss
partners.scss
privateSharing.scss
_showcase.scss
variables.scss
vultInfo.scss
chalkInfo.scss
chimneyInfo.scss