Stephen Way stephenway

## README.md

      
              2 files
            
          
              13 forks
            
          
              0 comments
            
          
              70 stars
            
          
                stephenway
                / README.md
            
            
              Last active
              April 13, 2024 21:45
            
              
                BEMIT Cheatsheet
              
          
    BEMIT Cheatsheet

Give developers more knowledge about how the classes behave in a non-relative sense: BEM + ITCSS = BEMIT

More Transparent UI Code with Namespaces
BEMIT: Taking the BEM Naming Convention a Step Further

Evolution

BEM:

  
## cors-conf.xml
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

## index.html
<script>
$.ajax({
  url: "http://dig.jsondns.org/IN/" + window.location.hostname + "/A?callback=jsonp",
  type: "GET",
  dataType: "jsonp",
  success: function(response) {
    var showWarning = false;
    $.each(response.answer, function(index, value) {
      if (value.type === "A" && value.rdata === "63.135.210.217") {
        showWarning = true;

## SassMeister-input-HTML.html
<div class="btn1">btn1</div>
<div class="btn2">btn2</div>
<div class="btn3">btn3</div>
<div class="btn4">btn4</div>
<div class="btn5">btn5</div>

<ul>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>

## SassMeister-input.scss
// ----
// libsass (v2.0.0)
// ----

@function scale-to-adjust($start, $change) {
  @if($change > 0) {
    $end: $start + $change;
    @return percentage(($end - $start)/(100 - $start));
  } @else {
    @return percentage($change / $start);

## gist:c68d31c5dfcf11224ca0
Change single quotes to double quotes in vim
cs'"

Replace all lines containing webkit
:g/webkit/d

## gist:2ad1f7a4ad871cc6f0c0
#!/bin/sh

bu
sudo npm update -g
sudo gem update --system
sudo gem update `gem list | cut -d ' ' -f 1`
vim -E -c BundleInstall -c q
reload!

## gist:eaaf17ee901b38853bff
[style] {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
[style], [color] {
  color: inherit !important;
}

h1, h2, h3, h4, h5, h6 {

## SassMeister-input-HTML.html
<!DOCTYPE html>
<head>
</head>
<body>
  <p>
    We're going to set <span class='foo'>foo, and after that, we'll add <span class='fixed-width-text'>fixed width</span>. Was that also also bold?</span>
  </p>
</body>

## SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

/*
A slightly more automated approach to BEM modifier classes:
using '&' parent selector interpolation, modifiers extend their bases,
so that HTML markup requires only the modifier class not the base *and* modifier
*/
	<?xml version="1.0" encoding="UTF-8"?>
	<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
	<CORSRule>
	<AllowedOrigin>*</AllowedOrigin>
	<AllowedMethod>GET</AllowedMethod>
	<AllowedHeader>*</AllowedHeader>
	</CORSRule>
	</CORSConfiguration>
	<script>
	$.ajax({
	url: "http://dig.jsondns.org/IN/" + window.location.hostname + "/A?callback=jsonp",
	type: "GET",
	dataType: "jsonp",
	success: function(response) {
	var showWarning = false;
	$.each(response.answer, function(index, value) {
	if (value.type === "A" && value.rdata === "63.135.210.217") {
	showWarning = true;
	<div class="btn1">btn1</div>
	<div class="btn2">btn2</div>
	<div class="btn3">btn3</div>
	<div class="btn4">btn4</div>
	<div class="btn5">btn5</div>

	<ul>
	<li>Page</li>
	<li>Page</li>
	<li>Page</li>
	// ----
	// libsass (v2.0.0)
	// ----

	@function scale-to-adjust($start, $change) {
	@if($change > 0) {
	$end: $start + $change;
	@return percentage(($end - $start)/(100 - $start));
	} @else {
	@return percentage($change / $start);
	Change single quotes to double quotes in vim
	cs'"

	Replace all lines containing webkit
	:g/webkit/d
	#!/bin/sh

	bu
	sudo npm update -g
	sudo gem update --system
	sudo gem update `gem list \| cut -d ' ' -f 1`
	vim -E -c BundleInstall -c q
	reload!
	[style] {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	}
	[style], [color] {
	color: inherit !important;
	}

	h1, h2, h3, h4, h5, h6 {
	<!DOCTYPE html>
	<head>
	</head>
	<body>
	<p>
	We're going to set <span class='foo'>foo, and after that, we'll add <span class='fixed-width-text'>fixed width</span>. Was that also also bold?</span>
	</p>
	</body>
	// ----
	// Sass (v3.3.0.rc.1)
	// Compass (v0.13.alpha.10)
	// ----

	/*
	A slightly more automated approach to BEM modifier classes:
	using '&' parent selector interpolation, modifiers extend their bases,
	so that HTML markup requires only the modifier class not the base and modifier
	*/