Adding SASS
Once I had added a basic 'like' button using react.js, I wanted to use SASS so that the button design would be more consistent with my website and appear more visually appealing.
The button itself also had limited functionality as once you had liked something it would say, 'You liked this' and the button wouldn't allow you to unlike it afterwards. The button itself seemed to be set as though the message is displayed when this button is pressed which switches the state of the button.
I wanted to change this and therefore looked online for suggestions of what to change. I came across a react button by Arun Kumar on CodePen which allowed the button to be liked and unliked and also included a heart symbol which I thought was a really nice finishing touch to the button!
I had to change minor details about the button, making sure to remove the grey background, change the padding, height, width, font size, font familiy to 'Monda' and change the colour used for the text and heart to the accent colour that I have been using throughout my website.
Another reason I used SASS was for the positioning of the background for my home page header and for my 3D sculpted head. I decided to use a mixin class that allowed me to store multiple declarations that could be used in other selectors. Both the id selector 'layerBackgroundMe' and 'headimport' used many of the same declarations and therefore thought it was appropriate to use a mixin to store this information.
Bibliography
ARUN KUMAR (n.d.). Like button-React. [Online] [Code] Available at:
https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 [Accessed: 10 January 2019]
GAEARON (2018). Add React in One Minute. [Online] [Code] Available at:
https://codepen.io/arun1595/pen/rjzPjM#_=_ [Accessed: 10 January 2019]
The button itself also had limited functionality as once you had liked something it would say, 'You liked this' and the button wouldn't allow you to unlike it afterwards. The button itself seemed to be set as though the message is displayed when this button is pressed which switches the state of the button.
I wanted to change this and therefore looked online for suggestions of what to change. I came across a react button by Arun Kumar on CodePen which allowed the button to be liked and unliked and also included a heart symbol which I thought was a really nice finishing touch to the button!
I had to change minor details about the button, making sure to remove the grey background, change the padding, height, width, font size, font familiy to 'Monda' and change the colour used for the text and heart to the accent colour that I have been using throughout my website.
Another reason I used SASS was for the positioning of the background for my home page header and for my 3D sculpted head. I decided to use a mixin class that allowed me to store multiple declarations that could be used in other selectors. Both the id selector 'layerBackgroundMe' and 'headimport' used many of the same declarations and therefore thought it was appropriate to use a mixin to store this information.
After I had finished writing in my SASS, I converted this into CSS using the terminal.
I selected my SCSS folder which contained my SCSS file.
Using the 'ls' command the terminal told me what files were already existing in this folder.
Using the 'sass' command, I wrote the existing file and the file name of the converted css file.
Using 'ls' again, I discovered that a new CSS file had been added with the name that I had mentioned in the command line previously.
This converted my SCSS file in a CSS file which I was able to use in my portfolio site.
I linked this stylesheet to all my HTML files and placed the div id 'react-component' into the correct place in each HTML file which worked successfully.
Bibliography
ARUN KUMAR (n.d.). Like button-React. [Online] [Code] Available at:
https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 [Accessed: 10 January 2019]
GAEARON (2018). Add React in One Minute. [Online] [Code] Available at:
https://codepen.io/arun1595/pen/rjzPjM#_=_ [Accessed: 10 January 2019]
Comments