Guide: How to build Online vCard using Sass & Compass
Today, we wrap up our Sass series with a practical approach: creating an online vCard with Sass and Compass.
Customizing a vCard with Sass and Compass is easy. Variables, mixins, operations, selectors inheritance, nested rules and Compass helpers can all be used to adjust the color and size of the vCard. For more information on this series of posts, readers are encouraged to review previous posts.
Planning and wireframing
Planning is key when working with Sass and Compass. To get an idea of the final result, such as a website or page, it can be helpful to browse sites like Behance or Dribbble for inspiration. Once you have an idea of what you want, it’s important to write it down on paper or create a wireframe – like the example below – to ensure your project is successful.
John’s contact information, including his photo profile, name, email address, phone number and a brief description of who he is or what he does, is featured in the picture above.
This section will feature social media buttons, allowing users to connect with the website’s various social identities.
Prepare assets
Before diving into coding, ensure you have Sass and Compass installed on your computer.
To check if Sass or Compass are installed on your computer, run the command “sass -v” or “compass -v” in Command Prompt or Terminal. Alternatively, you can use an application like Scout App for a graphical user interface.
Graphic resources such as font and social media icons can be obtained from ModernPictograms.
To complete this tutorial, navigate to the directory in Command Prompt / Terminal and run the commands ‘compass init’ and ‘compass watch’.
HTML formatting
Our vCard is formatted using HTML5 tags, making it simple and easy to use.
The elegancy of the elit was on full display as a neque dolor suspended over a pellentesque quis, with a convallis sit amet tellus and an etiam et auctor arcu.
The ‘social’ section of the website is structured with list elements, allowing for easy comparison of social identities. Each identity has a class name such as “social-facebook,” “social-twitter,” and “social-google.”
Compass configuration
To configure Compass, delete certain lines from the config.rb file, such as:
Users can choose their preferred output style when using this program, though the command line can override this selection.
Compass users can now access assets with relative paths, thanks to a new feature that allows them to enable the functionality. To take advantage of this, they simply need to uncomment the line “relative_assets = true” in their configuration file.
Disable debugging notes by setting line_comments to false.
If you don’t see the config.rb file, it’s likely you didn’t run the compass init command in your project directory.
Import files
In order to use Compass, it must be imported.
Compass provides a Reset module to help ensure consistent output across browsers. This module is based on Eric Meyer’s CSS reset and can be imported with one line of code.
The Compass Reset library is being imported, allowing developers to reset the styling of HTML elements.
The Sass/Scss version of the “happily” library is now available for download. Simply save it in your SASS working directory and import it into your stylesheet to get started.
CSS style should be given priority when reading.
Variables
Two variables will determine the base color of a vCard: constants stored in a stylesheet.
The base color of #fff is darkened by 10% to create a darker shade.
The width of the page serves as the basis for defining other element dimensions, at $ width.
The width of 500 pixels can be divided into 25 equal parts, each measuring 20 pixels.
The vCard’s standard spacing or column size is 20px.
Compass will use its Helpers feature to detect image size on our photo profile.
A new image-width has been calculated by adding twice the space divided by four to “me.jpg”.
The code adds a border to the image, doubling its width. The extra space is calculated by dividing the original width by 4 and multiplying that result by 2.
Selector Inheritance
To avoid repetition in our code, Sass’s Selector Inheritance feature allows us to specify style rules once and inherit them with the @extend directive when needed. This is a convenient feature not available in LESS.
The CSS code for float-left and box-sizing has been included, allowing elements to be positioned and sized as desired.
Styles
It’s time to give our vCard a makeover. We’ll begin by setting a background color for the HTML document.
The HTML code has been set to a height of 100%, with a background color of $base.
vCard
Using the LESS styling language, the vCard wrapper is defined by a set of familiar styles.
The .vcard class has a width of $width, a margin of 50px auto, a background color darkened by 5%, and a border of 1px solid $dark. It also includes border-radius of 3px and ul elements with no padding or margin. Li elements have no list style.
The wrapper’s width is determined by the value of the variable $width, and its background and border colors are 5% and 10% darker than the base color respectively. This effect is achieved using Sass coloring functions.
The vCard features rounded corners with a 3px radius, achieved using Compass CSS3 Mixins.
Bio Section
The vCard is divided into two sections, with the first containing a profile picture and details such as name, email and phone number.
A bio section on a website typically includes an image, name, email address and phone number. This code creates a border at the bottom of the bio section, adds padding and sets up the image to float left. It also sets up the detail section to float left and darkens its color. Finally, it adds symbols before each item in the list (name, email address and phone number).
Remember to subtract the total of three times the space plus the image width from the overall width when specifying the .detail selector’s width.
The vCard’s total width minus the width of its image profile and any padding or margin spaces yields the width of its details.
Social section
This section of the vCard follows regular CSS rules, with a few values defined using variables and nested styles.
CSS code was written to style a social media section, centering the list of icons and ensuring that each icon is displayed as an inline block with a width and height of 32px. Links within the icons have no decoration, are also displayed as inline blocks, and have text indentation set to 100% with white space set to nowrap. The box-sizing property is extended.
Compass’ image sprite feature makes it easier to display social media icons on a website.
Create a folder called /social/ and add icons to it. Then, in the style sheet, use the @import line to merge them.
Social media icons are being imported into a website.
The image folder must contain a sprite image, generated with random characters such as “social-sc805f18607.png”, in order for the styles to be applied and take effect on the front end.
Final Result
The long-awaited outcome of the hard work is now visible, with the successful completion of the project.
If you want to adjust the width of your image, simply change the value in the $width variable. You can also experiment with the color variable for further customization.
Try out the new software and get the source code now.
Conclusion
This tutorial demonstrated the power of Sass and Compass to create a simple online vCard. However, for smaller projects with fewer pages and styles, using these tools may be unnecessary.
We wrap up our Sass series here, and we hope you found it helpful. If you have any questions, please leave them in the comments section.
How to build Online vCard using Sass & Compass: benefits
Faq
Final note
We’ve created a guide to help you build an online vCard using Sass & Compass. If you have any questions, please don’t hesitate to reach out. We’d also appreciate it if you shared the article with your friends!
If you have any questions about building an online vCard using Sass & Compass, please contact us. This guide is for educational purposes only. If you want to correct any misinformation or add more methods, we welcome your input. Our contact page and social media accounts are available for help; we typically respond within 24-48 hours (weekends excluded). For the latest software updates and discussion, join our Telegram channel.
