Building Elements using SASS - #2
Last week, we started recreating Bootstrap using our own SASS. Today, we take what we created and build out different elements. In this tutorial, we learn how to make alerts, manipulate images, create cards, and create light and dark themed tables.
By the end of this tutorial, you should have a working "simple" Bootstrap clone that you can build on. I took the basic items I use for Bootstrap and recreated them but you can take the same concepts and create any element you want that fits with your development process.
For this tutorial, we will use VS Code and it's Live Sass Compiler. With these tools, you can write better code, quicker.
So, let's get started with creating Bootstrap using Sass.
00:00 Intro
02:57 Creating Alert Classes
07:56 Creating Image Display Classes
17:47 Creating Card Classes
20:13 Creating Table Classes (Light and Dark)
29:48 Next Week: Includes and Simplifying the Code
Download the files used in this tutorial: https://github.com/thedevdrawer/css-f...
Based on my love for Bootstrap 4. You can still use the same methods to do something with Bootstrap 5, but this was designed with 4 in mind.
Become a Patreon to show support and get exclusive access to content: / devdrawer
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Subscribe: https://bit.ly/2Wbsnj9
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
Join us on our blog for video recaps and other tutorials: https://thedevdrawer.com
Become a fan on Twitter: / thedevdrawer
Applications Used
Visual Studio Code v1.43: https://code.visualstudio.com/
Sass: https://sass-lang.com/
Live Sass Compiler: https://marketplace.visualstudio.com/... #sasstutooial #bootstrap #css #html #programming #webdesign
Computer Hardware:
Windows 10 Pro: https://amzn.to/3q5TyZw (Amazon)
Samsung 500GB External SSD: https://amzn.to/2ViAAAF (Amazon)
Samsung 970 EVO Plus SSD 1TB - M.2 NVMe: https://amzn.to/36jDwDy (Amazon)
Rosewill Hive-750S R750W PSU: https://amzn.to/36jiDbs (Amazon)
Phanteks Eclipse Tempered Glass Case: https://amzn.to/39qou0B (Amazon)
MSI Arsenal Gaming AMD Ryzen Motherboard: https://amzn.to/36hpAKm (Amazon)
MSI Gaming GeForce RTX 2060 Super 8GB: https://amzn.to/36hMyRm (Amazon)
LG 34UM69G-B 34-Inch 21:9 UltraWide IPS Monitor: https://amzn.to/2HSRxyI (Amazon)
Corsair 64GB (4 x 16GB) DDR4 Memory: https://amzn.to/3mlmQkI (Amazon)
AMD Ryzen 7 2700X Processor: https://amzn.to/3qdQIBF (Amazon)
Dell XPS 15 9500 15.6" Laptop / Windows: https://amzn.to/3fKEz2w (Amazon)
Lenovo ThinkPad T15 15.6" Laptop / Linux: https://amzn.to/2Jnmn33 (Amazon)
Camera:
Fujifilm X-T3: https://amzn.to/3llKBb5 (Amazon)
Fujinon XF18-55mmF2.8-4: https://amzn.to/3mfTkNb (Amazon)
Audio:
Audio Technica AT2020: https://amzn.to/2VgxU6K (Amazon)
Blue Snowball iCE: https://amzn.to/3lo1jGC (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
View Project on GitHub: https://github.com/thedevdrawer
Nesta página do site você pode assistir ao vídeo on-line Building Elements using SASS - #2 duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Dev Drawer 01 Janeiro 1970, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 314 vezes e gostou 18 espectadores. Boa visualização!
