recentpopularlog in

piperh : element   57

When Is A Button Not A Button? — Smashing Magazine
nice reminder of how to use html's own semantics - good for accessibility and keyboard tabbing. Brush up on <button type="button"> ("submit" is default value for a button, he says). He suggests using "disabled" attribute for button or fieldset but I don't see how one would trigger it. 'disabled' attribute also removes element from tab order
webdesign  web  design  button  html  semantic  attribute  vale  accessibility  accessible  element 
march 2019 by piperh
BEM: 4 Hang-Ups & How It Will Help Your CSS Organization
their intro: "addresses four common misconceptions about BEM and explains how and why the CSS naming convention of Block Element Modifier helps solve organizational thinking around class names."
webdesign  web  design  code  coding  css  bem  block  element  modifier 
march 2019 by piperh
Why I use the BEM naming convention for my CSS - YouTube
a geezer explains about his bem and why you should use it or at least some kind of naming convention.
He says OK css nesting on small sites. On big sites will lead to problems.
You end putting classes (sometimes several) on every element in the html.
bem ties in well with sass - both use the double underscore.
webdesign  web  design  css  bem  naming  convention  block  element  modifier  sass  class 
november 2018 by piperh
The dialog element | Viget
about the native html dialog element. Sept 18, 2018
webdesign  web  design  dialog  popup  modal  element  window  html  native  polyfill 
september 2018 by piperh
How do you mark up an accordion? — Sara Soueidan – Freelance-Front-End UI/UX Developer
about the possible markup options for an accordion, with and without semantic elements, for best accessibility. Doesn't give script for the accordion itself, just says it would be js. Some useful resources at end
webdesign  web  design  accordion  markup  html  semantic  element  faq  resources  aria  accessibility  accessible 
september 2018 by piperh
How to Hand Code SVG
tutorial on hand-coding svg shapes: "... you can hand-code simple shapes quite easily, without needing to open a graphics application."
webdesign  web  design  graphic  vector  svg  hand  code  coding  inline  shape  element 
april 2018 by piperh
<use> - SVG: Scalable Vector Graphics | MDN
about the <use> element. I think it's valid within svg - allows one to take just a part of an svg document
webdesign  web  design  svg  use  <use>  element  node  code  coding 
april 2018 by piperh
About responsive images, best formats and sizes
article title: A Guide to Responsive Images with Ready-to-Use Templates
webdesign  web  design  image  images  format  responsive  jpg  svg  png  inline  64base  resolution  size  webp  compression  srcset  pixel  density  picture  element  source 
february 2018 by piperh
Meet the New Dialog Element
article describing new (jan 2018) native modal dialog, and a polyfill that makes it usuable now, for IE9 and up. Introduces new ::backdrop pseudo-element. Also describes how to fire a close if user clicks the backdrop
webdesign  web  design  css  dialog  modal  element  native  browser  backdrop 
january 2018 by piperh
QSS - A Simple Query Syntax
QSS, A Simple Query Syntax for CSS Element Queries. This could be worth studying and understanding
webdesign  web  design  css  element  query  queries  syntax 
january 2018 by piperh
Advanced CSS-Only Form Styling - Jonathan Harrell | CSS Blogger & Teacher, UI/UX Designer, Front-End Developer
Jonathan Harrell says: Learn about selectors both new and old that you can use to style form inputs based on requirement, validity and more
webdesign  web  design  css  form  style  styling  selector  input  element 
november 2017 by piperh
My approach to using z-index – Hacker Noon
David Gilbertson says: Categorise all uses of z-index as either local or global.
Article about use of z-index in a site.
webdesign  web  design  z-index  use  usage  local  global  layer  child  scope  stack  stacking  context  element 
november 2017 by piperh
Lozad.js | lozad.js
they say: Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
webdesign  web  design  js  javascript  script  lazy  loading  image  element 
october 2017 by piperh
The Best Way to Implement a "Wrapper" in CSS | CSS-Tricks
The Best Way to Implement a “Wrapper” in CSS. Nice appraisal of element to wrap everything in site
webdesign  web  design  wrapper  container  wrapping  div  html  css  class  element 
september 2017 by piperh
How to Apply CSS3 Transforms to Background Images — SitePoint
sitepoint article on transforming background images - scaling, skewing, rotating etc
webdesign  web  design  scale  skew  rotate  background  image  transform  element  pseudo 
june 2017 by piperh
BEM by Example | Sparkbox | Web Design and Development
They say: BEM naming provides three specific benefits:
• communicates purpose or function
• communicates component structure
• sets consistent low-level specificity for styling selectors
webdesign  web  design  css  bem  naming  code  coding  block  element  modifier 
june 2017 by piperh
GitHub - stutrek/scrollMonitor: A simple and fast API to monitor elements as you scroll
The scroll monitor allows you to receive events when elements enter or exit a viewport. Vanilla js
webdesign  web  design  plugin  javascript  vanilla  js  scroll  scrolling  viewport  monitor  watch  event  element 
january 2017 by piperh
Element.classList - Web APIs | MDN
mdn reference page showing possible methods to use with element.classList: you can toggle classes, add, remove and other stuff I don't fully understand
webdesign  web  design  code  coding  js  javascript  script  element  classlist  reference  method  add  remove  toggle 
november 2016 by piperh
GitHub - jshjohnson/Animate: A tiny (5KB) vanilla JS script to trigger animations on elements when they are within the viewport 👓
vanilla js to animate elements when they appear in viewport.
Seems to work not only on the first appearance. Their demo is quite annoying, but if the animations were simpler it could be usable.
webdesign  web  design  js  javascript  script  vanilla  viewport  animate  animation  scroll  element  div  view  screen 
august 2016 by piperh
HTML element reference - HTML | MDN
Mozilla reference page describing html elements. You can click on each element, too, for more detailed info. Written in plain English - easier to understand than the W3 ref pages
webdesign  web  design  code  coding  reference  css  html  element  documentation 
august 2016 by piperh
polyfill to make picture element work in all browsers
webdesign  web  design  script  js  javascript  html5  html  polyfill  picturefill  picture  element  css  image  load  lazy  lazyloading  responsive  img  srcset  attribute  1x  2x  3x 
july 2016 by piperh
Simple JavaScript class toggle using classList
codepen showing use of vanilla js to toggle a class. Shows the html, css and js. In this case the class is toggled on a different element to the clicked one. Play with it!
Instead of 'click' you can use 'mouseover'. Or instead of toggle you can add or remove.
webdesign  web  design  js  javascript  vanilla  code  coding  css  html  toggle  class  add  remove  element 
july 2016 by piperh
Enhancing modular design with BEM — Medium
article explaining and defining BEM - block element module
webdesign  web  design  code  coding  bem  block  element  module  method  methodology  modular  convention  naming  style 
may 2016 by piperh
nice vanilla js to animate page scroll. Could be ideal for a one-page site. jQuery optional. Some of the animations use css, some use js. Lots of options for the effects and possibility to use for moving objects around the page
webdesign  web  design  animate  animation  scroll  snap  anchor  element  move  css  js  javascript  jump  easing  vanilla 
april 2016 by piperh
HTML5 Elements
Page which includes all html5 elements so's you can see how they render in all browsers by default, and use to test your own resets.
Page and assets can be downloaded
webdesign  web  design  html5  standards  element  html  code  coding  webdev 
february 2016 by piperh
How to add HTML5 video fullscreen?
explanation how to code html5 video into html and css
webdesign  web  design  video  html5  syntax  tags  css  code  coding  format  browser  codec  element 
december 2015 by piperh
Native Form Elements
displays native html5 form elements so you can see how browser renders them
webdesign  web  design  form  element  browser  native  html  ui  style 
december 2015 by piperh
js polyfill to help browsers fetch different images according to various criteria: screen size, resolution and more. If you add matchMedia polyfill it will make old IEs support the 'picture' element.
webdesign  web  design  picture  polyfill  js  element  responsive  javascript  css3  images  adaptive  srcset  sizes 
november 2014 by piperh

Copy this bookmark:

to read