CSS Flexbox – Sass Mixins

SassFlexbox comes with a bunch of placeholders and mixins to help you use Flexbox without worrying about vendor prefixes. Whenever possible, extend placeholders are provided to allow you to not create so much duplicated code. // -------------------------------------------------- // Flexbox SASS mixins // The spec: // -------------------------------------------------- // Flexbox display @mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display:…


Differences Between Bootstrap 3 and 4

Bootstrap 4 brought some major changes, adding new components, scrapping others. Here's the difference between Bootstrap 3 and Bootstrap 4. Component Bootstrap 3 Bootstrap 4 Global Source CSS Files LESS SCSS Primary CSS Unit px rem Media Queries Unit px px Global Font Size 14px 16px Default Fonts Helvetica Neue, Helvetica, Arial, sans-serif Uses a "native font stack" (user's system…


Custom Checkbox using SASS

Styling default checkbox using SASS. <div class="custom-checkbox"> <label> <input type="checkbox" name=""> <span class="checkbox-icon"></span> <span class="checkbox-text">Select</span> </label> </div> Color Variables $primary_color : #000; $fonts_1 : FontAwesome; Mixins @mixin transition($transition...){ transition: $transition; -webkit-transition: $transition; -moz-transition: $transition; -ms-transition: $transition; -o-transition: $transition; } SASS Structure .custom-checkbox{ position: relative; display: inline-block; min-height: 19px; padding: 0px 0px 0px 27px; label{ margin: 0; padding: 0; display: block;…