Building a website is easy, designing one takes skill.
As I am in my final year of Communication and multimedia design I try to devote the same amount of time to UX and Design as I do to coding. I wanted to learn more about the whole developing industry when I first began this education. When I begin a new development project, I am more concerned with the CSS and design aspects than with the back-end or deep javascript coding. This motivates me, and I believe I am a front-end designer rather than a front-end developer.
As a front-end designer, I am more comfortable with CSS and design than with Javascript. Instead of creating the functionalities that will run whenever you click on the button, I prefer to think about how this button is going to look and how I can make it responsive. CSS is my comfort zone, and I’d like to learn more about its advanced capabilities. That will be the subject of this post. ENJOY! 👍
SASS — CSS with superpowers
CSS is entertaining on its own, but stylesheets are becoming larger, more complex, and more difficult to maintain. A preprocessor can aid in this situation. Sass allows you to use features that aren’t yet available in CSS, such as variables, nesting, mixins, inheritance, and other useful features that make writing CSS more enjoyable.
I’ve previously worked on a SASS project. This was a VueJS project on my first ever front-end internship. I liked how you could nest the CSS variables in each other to make it a lot easier to read. We also had the main SASS file where we could add all different variables for colors, button layouts, font sizes, etc. You can simply call a variable with this feature, and it automatically takes the value you gave it in the main file.
Sass allows you to use the same visual hierarchy of your HTML in your CSS selector. When you take the example, it is much easier to read than the usual CSS.
html,
body {
height: 100%;
#root {
height: 100%;
}
.div-with-button {
background-color: black;
button {
background-color: #e4c681;
&:hover {
background-color: #ffe082;
}
}
}
}Instead of having this normal CSS code:
html, body {
height: 100%;
}html #root, body #root {
height: 100%;
}html .div-with-button, body .div-with-button {
background-color: black;
}html .div-with-button button, body .div-with-button button {
background-color: #e4c681;
}html .div-with-button button:hover, body .div-with-button button:hover {
background-color: #ffe082;
}
Are CSS Libraries really what we need?
Libraries like Bootstrap and Material UI are an easy way of using CSS. You can just put different class names onto HTML elements and they will automatically have CSS styling added to them. The most common use of these libraries is for larger projects. You can use them for smaller projects as well, but once you start using the library, it will load all of its features. Even if you don’t use it to its full potential.
These libraries are mostly pre-programmed and styled. There are ways to change the color or size, but the designs will mostly look the same. When I had my internship we used Material UI and when we wanted something to look different than the library made it. It took an entire day to figure out how to put this into action and make it work.
How to get the most out of SVG?
SVG has its own collection of elements, attributes, and properties, so inline SVG code can become lengthy and complex. SVG is a vector graphics image format. Scalable Vector Graphics is the literal translation. In Adobe Illustrator, this is essentially what you deal with. SVG is fairly simple to use on the network, but there is a lot to know.
Why use SVG at all?
- File sizes are small and compress well.
- Any size can be scaled without losing clarification (except very tiny)
- On retina screens, it looks fantastic.
I’m aware that SVGs are used extensively on some websites. These websites are primarily focused on the use of SVGs, which can be used to create stunning animations and an amazing-looking website. I’d like to learn more about the extended features SVG’s have to offer.
Conclusion
Though I’ve gained some new insights into the world of front-end design. I’m well aware that I still have a lot to learn.
In the coming years, I’d like to develop my front-end design skills to the next level and get more into the SVG world. PEACE! ✌
