html - Strange CSS Class Name, someone explain to me what is going on? -

-

i'm trying make bit of copy of this website i'm having issues gallery part, images won't behave same website im attempt copy. change around once complete.

here jsfiddle of code if helps.

here css section:

/* gallery start */ .box.style2 header {     display:inline-block;     background:#fff;     padding:2em 3em;     margin:0px;  } .box.style2 .inner {     position:relative;     padding:40px 0 0px 0; } .box.style2 {     text-align:center; } .box.style2 .inner:after {     content: '';     display:block;     position:absolute;     top:0;     left:50%;     height:100%;     border-left:solid 1px #fff; } .box.style2 .inner .row {     position:relative;   } .row {     border-bottom:solid 1px transparent;     box-sizing:border-box;   } .row:after, .row:before {     content: '';     display:block;     clear:both;     height:0; } .row > * {     float:left; } .box.style2 .inner .image {     position:relative;     z-index:1;     padding:20px; } .image.fit {     display:block;     width:100%; } .gallery-image {     width:25%;     margin-left:0px;     } /* gallery end */

and here html:

<!-- start of gallery --> <article class="container box style2">     <header>         <h2>recent work</h2>         <p>below images of our recent completed work</p>     </header>     <div class="inner gallery">         <!-- gallery images -->         <div class="row">             <!-- image -->             <div class="gallery-image">                 <a href class="image fit" style="outline: 0px;">                   <img src="images/01.jpg" />                 </a>             </div>             <!-- image end -->              <!-- image -->             <div class="gallery-image">                 <a href class="image fit" style="outline: 0px;">                   <img src="images/01.jpg" />                 </a>             </div>             <!-- image end -->              <!-- image -->             <div class="gallery-image">                 <a href class="image fit" style="outline: 0px;">                   <img src="images/01.jpg" />                 </a>             </div>             <!-- image end -->              <!-- image -->             <div class="gallery-image">                 <a href class="image fit" style="outline: 0px;">                   <img src="images/01.jpg" />                 </a>             </div>             <!-- image end -->         </div>     </div>     <!-- gallery images end --> </article> <!-- end of gallery -->

here screenshot of images like, can see, not behaving @ all.

i think because don't have these styles, can't life of me figure out mean, can understand google classes made numbers:

.row.\30 \25 > * {     padding: 0px 0 0 0px; } /* inherited from: @media screen , (max-width: 1680px}*/ .row > * {     padding: 40px 0 0 40px; } .\33 u, .\33 u\24 {     width: 25%;     clear: none;     margin-left: 0; }

edit: after readying wero's answer, understanding properly?

.row.\30 \25 > * target class name 0 within row class, , element within 30 class 25 , style next element within that?

the \nn<space> syntax character escape sequence unicode character u+00nn.

this article describes topic nicely.

using escape sequences build valid css class identifiers.

why this? can speculate: brevity, generate unique names?

edit answer extended question:

.row.\30 \25 > * selector elements (*) parent element (>) has css class row , css class consisting of 2 characters u+0030 , u+0025.


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d...
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea...
Read more

python - build a suggestions list using fuzzywuzzy -

-
i building suggestion engine database. i'm using fuzzywuzzy module match user input string existing database shown below. if request.method == "get": display_dict = {} user_input = request.get["user_input"] # user input match_dict = {} food_items_obj = food_items.objects.all() # fetch objects table items in food_items_obj : match = fuzz.ratio(user_input.lower(),items.name.lower()) # try match user input existing names match_dict[match] = items.name # put 1 dictionary matched_dict = ordereddict(sorted(match_dict.items(),reverse = true)) # sort dictionary if max(matched_dict.keys()) == 100: # if exact match put in dict , return display_dict[100] = matched_dict[100] else : # if not found try best matching words.. ###########this part need help! ############# k,v in matched_dict.items(): if user_input in v : display_dict[k]...
Read more