Code page using SCSS


Today me and jaspreet was given the task of building a web page using sass. The page was simple and challenge is to use the newly learned features of the scss to build a web page.

Our instructor, Inderpreet Singh has given us the requirements that there should be a header. Inside of a header, there should be a logo and navigation bar. In main content we have to build the articles.

Using the scss was easy to get the solution up and running in 1 day

/// Enforcing utf - 8 encoding in the main stylesheets;
@charset 'utf-8';

 /************************
  VARIABLES DECLARATION
 ************************/
$main-font : ubuntu;
$background-color: rgba(251,244,244,.34);
$sass-pink-color: rgba(242,90,90,1);
$sass-green-color : rgba(23,198,201,1);
$theme-color: $sass-pink-color;
$link-color: $theme-color;
/// This color basically refers to the main navigation element font color
$nav-li-ft-pink-color : $theme-color;

/// This refers to the main navigation element background-colors ( as there will be 2 backgrounds so 2 colors)
$nav-li-bg-pink-color : $theme-color;
$nav-li-bg-white-color : rgba(255,255,255,.9);

/// navigation elements border color
$nav-li-border-color : $theme-color;

$card-bg-color: rgba(255,255,255,1);
$card-shadow-color: rgba(242, 91, 95, 0.75);
$card-border-color: $theme-color;

/// List of vendor prefixes
$prefixes: ('webkit','moz','ms');

/*****************
FUNCTIONS
****************/

/***************
MIXINS
***************/
/// Mixin for adding common flex properties
/// $dir - flex direction
/// $wrap - want to wrap or not;
@mixin add-flexbox($dir,$wrap,$justify,$align) {
  display : flex;
  flex-direction : $dir;
  flex-wrap : $wrap;
  justify-content : $justify;
  align-content : $align;
}

/// Mixin to prefix a property
/// $property - Property name
/// $value - Property value
@mixin prefix-property($property, $value) {
  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
  // Below is the non prefixed property.
  #{$property}: $value;
}

// Give the no of columns and margin without any units
@mixin get-card-dimensions($cols,$margin) {
  margin : $margin * 1%;
  width : (100 - ($margin*$cols*2))/$cols * 1%;
}

/*
  General styles........
*/
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: $main-font;
  background-color: $background-color;
}

main , nav , header, footer {
  @include add-flexbox(row,wrap,space-around,center);
  @include prefix-property(box-sizing ,border-box);
}
a {
  text-decoration: none;
  color : $link-color;
}

.wd-col{
  width : 25%;
}

/*
header styles
*/
header {
  justify-content : flex-start;
  padding : 2rem;
}

.logo img {
  @include prefix-property(border-radius,50%);

  width : 8rem;
  height : 8rem;
  margin-right: 1rem;
}

/*
  Navigation styles
*/
nav {
  width: 80%;
}

li {
  @include prefix-property(box-sizing ,border-box);

  padding : 1rem;
  list-style: none;
  color : white;
  text-align : center;
}

.main-nav-1 , .main-nav-3 , .main-nav-6 , .main-nav-8 {
  background : $nav-li-bg-pink-color;
}

.main-nav-2 , .main-nav-4, .main-nav-5, .main-nav-7 {
  color : $nav-li-ft-pink-color;
  background : $nav-li-bg-white-color;
  border : .3rem solid $nav-li-border-color;
}

/*Articles styles*/

.card {
  $border-radius : 1;
  @include prefix-property(box-sizing ,border-box);
  @include get-card-dimensions(4,2);
  @include prefix-property(border-radius,$border-radius * 1rem);
  @include prefix-property(box-shadow, 0 0 14px 0 $card-shadow-color);

  /*margin : .5rem;*/
  background : $card-bg-color;
  border : .3rem solid $card-border-color;

  img {
    width : 100%;
    height : 15rem;
    display : block;
    margin : 0 auto;
  }
}

.ar-content-wrapper {
  padding : 2rem;
  padding-top : 1rem;
}

.title{
  margin-bottom : .5rem;
}

.author {
  $card-author-font :'Source Sans Pro', sans-serif;
  $card-author-ft-color : #999;

  margin-bottom : .5rem;
  font-family : $card-author-font;
  font-size : 0.8rem;
  text-transform : uppercase;
  color : $card-author-ft-color;
}

.social-icons {
  $social-bg-color: rgba(0,0,0,.9);
  @include prefix-property(box-sizing ,border-box);
  @include add-flexbox(row,wrap,center,center);
  
  font-style: italic;
  background: $social-bg-color;

  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;

  cursor: pointer;

  .icon {
    padding : .5rem;
  }
}

/*
  MEDIA QUERIES
*/

@media (max-width : 1024px) {
  .wd-col{
    width : 50%;
    margin : 0;
  }

  .card {
    @include get-card-dimensions(3,1);
  }
}

@media (max-width : 768px) {
  .wd-col{
    width : 50%;
    margin : 0;
  }

  .card {
    @include get-card-dimensions(2,1);
  }
}

@media (max-width : 510px) {
  header {
    justify-content: center;
    padding : 0.2rem;
  }
  nav {
    width : 100%;
  }
  .card ,.wd-col{
    @include get-card-dimensions(1,1);
  }

}

Here is my solution for that

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s