Adding Styling Elements to Website

--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 : chalkInfo.scss

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 : chimneyInfo.scss

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

Source Code : containerwithicon.scs

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

Source Code : _faq.scss

Sample Screenshot :

features.scss

Source Code : 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

Source Code : globals.scss Describing Code :

  • 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

Source Code : 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

Source Code : include-media.scss Describing Code :

  • 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

Source Code : 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

Source Code : 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

Source Code : 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

Source Code : privateSharing.scss Describing Code :

  • 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

Source Code :_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

Source Code : 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

Source Code : 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 :

PreviousJs-sdk Functionalities in WebsiteNextZbox CLI

Last updated