recentpopularlog in

piperh : style   56

A11Y Style Guide
they say: This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
webdesign  web  design  a11y  accessibility  accessible  style  guide  html  css  code  coding 
14 days ago by piperh
Unbuttoning Buttons | scottohara.me
explains how to make a block of text behave like a button, by using css, aria and js to restyle the button element. Complicated and possibly not worth worrying about
webdesign  web  design  button  css  inline  selector  accessible  reset  style  styling 
8 weeks ago by piperh
Pure CSS: Accessible Checkboxes and Radios Buttons – Clarity Design System – Medium
step-by-step how to style an accessible custom checkbox. Uses opacity:0 to hide the default checkbox
webdesign  web  design  checkbox  accessible  style  css  code  coding  howto  custom  customise  input 
9 weeks ago by piperh
CSS Scan - Check or copy computed CSS on hover
developer says: Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles).
You hover over an element and a tooltip shows the computed css. Looks handy
webdesign  web  design  tool  inspect  computed  css  copy  style 
11 weeks ago by piperh
Styling buttons, the right way
resetting and styling button and link elements
webdesign  web  design  link  button  css  component  style 
may 2018 by piperh
Decorating lines of text with box-decoration-break | CSS-Tricks
About css box-decoration-break. Examples are hideous but useful to know how it works
webdesign  web  design  css  box-decoration-break  inline  style 
may 2018 by piperh
Fontanello – because you have a weak spot for fonts
extension for Firefox and Chrome that will show you font and applied styles
webdesign  web  design  font  type  typography  face  typeface  display  style  name  browser  extension  tool 
march 2018 by piperh
Phone number links and accessibility · Matt Smith
article about accessible styling for phone numbers - targetting mobile devices, though wouldn't target VOIP (eg Skype) on desktop. Relies on smaller screen MQ.
webdesign  web  design  style  tel  telephone  number  link  screen  reader  accessible  accessibility 
february 2018 by piperh
Text input highlight, TripAdvisor style – freeCodeCamp
they say: create a text input style like the search input on TripAdvisor.
webdesign  web  design  effect  underline  type  text  input  style 
november 2017 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
CSS-only numbered lists with "drop" shapes
codepen showing use of css counter. Counter is very well supported in browsers
webdesign  web  design  css  code  coding  list  counter  counter-increment  number  style 
august 2017 by piperh
CSSPeeper - Smart CSS viewer tailored for Designers
chrome extension that allows you to inspect elements to see applied css styles
webdesign  web  design  css  chrome  extension  peeper  inspect  style 
april 2017 by piperh
CSS Tip: Use :not to Save Time and Lines of Code :: The Bold Report
great quick tip on using :not(:last-of-type) to exclude last item from a style rule. Saves writing a separate last-of-type style
webdesign  web  design  css  not  last-of-type  style  styling 
march 2017 by piperh
Google HTML/CSS Style Guide
a Google guide to css and html code styling, within your style sheets and html docs, inc some 'meta' advice. Mostly seems sensible and mostly I already do it. A couple that I don't understand, and they don't explain the reason. Overall worth re-reading now and again
webdesign  web  design  code  coding  style  css  html  writing  format  formatting  rules  shorthand 
september 2016 by piperh
GitHub - danklammer/bytesize-icons: Tiny style-controlled SVG iconset
neat set of icons using svg stroke. Can be styled in the html or css. Includes for inserting all icons into html using <svg> tag
webdesign  web  design  icon  font  svg  symbol  dingbat  inline  html  css  style  file  library 
september 2016 by piperh
CSS Inliner Tool | Email Design Reference
mailchimp's tool for inlining css - if you have css in the head of page, the tool will inline it everywhere. All the styles are left in <head> so if you media queries they will be left alone.
html  email  mailchimp  inline  tool  css  content  head  style  markup  convert  converter 
june 2016 by piperh
Considerations for styling the < pre > tag - The Media Temple Blog
article all about the pre tag, the defaults, and how to style it better
webdesign  web  design  css  pre  code  pre-formatted  white-space  wrap  coding  style  tag  format  default  howto  html  space  collapse 
june 2016 by piperh
Let's Write Beautiful CSS Comments | Sparkbox | Web Design and Development
useful roundup of the issues around commenting and a reminder to do it often and use a consistent, sensible style. Explain what a style is for, don't just repeat what it does (you can already see that in the code)
webdesign  web  design  css  comments  style  convention  methodology  method 
may 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
Introducing A11y Toggle
great code snippet for vanilla js toggle script
webdesign  web  design  js  javascript  vanilla  toggle  aria  script  details  summary  style  css 
march 2016 by piperh
The Current State of Telephone Links | CSS-Tricks
useful article about treatment by browsers of tel links in html
webdesign  web  design  telephone  tel  a  link  style  format  app  call  response  program  html  css  code  coding  styling  anchor  tap  mobile  phone  device 
march 2016 by piperh
Using media queries - CSS | MDN
Mozilla page outlining use and syntax for MQs
webdesign  web  design  media  query  style  sheet  mdn  mozilla  developer  webdev  css  code  coding  syntax  reference 
january 2016 by piperh
Contact Us - Mahler Consulting
reference sent by Christina for google map in techcarrera site
techcarrera  reference  google  map  code  format  style  styling  control 
january 2016 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
FreshInbox - Dynamic and Interactive Email (Kinetic) CSS Support
table showing support for html email of various email clients and services
webdesign  web  design  email  client  programme  html  css  support  style 
november 2015 by piperh
U.S. Web Design Standards | U.S. Web Design Standards
american government standards and design guidelines for federal websites. code snippets and libraries for reusing.
webdesign  web  design  reference  standards  usa  federal  resource  accessibility  libraries  guide  css  components  style  tools 
october 2015 by piperh
edmundojr/localhost · GitHub
improves the visual styling of the localhost index page. I don't if you can get inside to personalise the styling further
localhost  index  style  list  styling 
september 2015 by piperh
Website Style Guide Resources
compilation of various style guides from the web, for web sites
webdesign  web  design  style  guide  css  html  graphic  website  site  reference  resources 
september 2015 by piperh
HTML Forms and Input
name="input" action="html_form_action.asp" method="get"
webdesign  web  design  webdev  html  form  forms  tag  style  input  radio  checkbox  field  reference  code  coding 
february 2014 by piperh

Copy this bookmark:





to read