Yordan Zhelev yordanzhelevdev

## css-layout-hack.js
// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
			items.push(elements[i]);
		}
	}

## foo.md

      
              1 file
            
          
              2 forks
            
          
              4 comments
            
          
              19 stars
            
          
                OliverJAsh
                / foo.md
            
            
              Created
              December 8, 2017 11:29
            
              
                Avoiding CSS overrides in responsive components
              
          
    Avoiding CSS overrides in responsive components

I would like to demonstrate some of the benefits of scoped styles over mobile-first CSS with overrides for wider breakpoints. I'll start by explaining the two approaches, before listing the benefits.
Mobile-first with overrides for wider breakpoints

h2 {
  color: black;
 font-size: 2em;

  
## bem_mix.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            /*
             * This won't work (Sass syntax - compile first)
             */

            .nav {
                &__logo {

## components.md

      
              1 file
            
          
              1 fork
            
          
              0 comments
            
          
              4 stars
            
          
                james-brndwgn
                / components.md
            
            
              Last active
              May 19, 2021 17:28
                — forked from iclanzan/components.md
            
              
                UI Component Name Ideas
              
          
    UI component names

Interactive components


button
switch
toggle
slider
handle
tab


## media-query.css

/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  /* CSS */


## js-lib-template.js
(function() {

  // This is a template to begin creating a JS libray. Just replace all instances
  // of `lib` with whatever variable you want to use for reference.

  // Baseline setup
  // --------------

  // Establish the root object, `window` in the browser, or `exports` on the server.
  var root = this;

## css-media-queries-cheat-sheet.css
/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet
   480-less    - phone landscape & smaller
--------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }

@media all and (min-width: 768px) and (max-width: 1024px) { }

## dabblet.css
/**
 * Less than full-width box-shadow below
 */

body {
background: #f06;
min-height: 100%;
}

.box {

## box-shadow.html
<!DOCTYPE html>
<html>
	<head>
		<title>Box Shadow</title>

		<style>
			.box {
				height: 150px;
				width: 300px;
				margin: 20px;
	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
	if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
	items.push(elements[i]);
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	/*
	* This won't work (Sass syntax - compile first)
	*/

	.nav {
	&__logo {

	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */
	(function() {

	// This is a template to begin creating a JS libray. Just replace all instances
	// of `lib` with whatever variable you want to use for reference.

	// Baseline setup
	// --------------

	// Establish the root object, `window` in the browser, or `exports` on the server.
	var root = this;
	/*------------------------------------------
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 - desktop (default grid)
	1024-768 - tablet landscape
	768-480 - tablet
	480-less - phone landscape & smaller
	--------------------------------------------*/
	@media all and (min-width: 1024px) and (max-width: 1280px) { }

	@media all and (min-width: 768px) and (max-width: 1024px) { }
	/**
	* Less than full-width box-shadow below
	*/

	body {
	background: #f06;
	min-height: 100%;
	}

	.box {