Tommy Hodgins

Day 3/25 Have you ever wished you could style the parent of an element? Now you can with the Parent Selector Mixin! - plugin: https://github.com/tomhodgins/reprocss/blob/master/mixins/parent-selector.js … - demo: https://codepen.io/tomhodgins/pen/pwQGdv … #merryCSSmas #css #selector #parentselector #jsincss #rwd #responsivepic.twitter.com/MiJ0d2MWDE

Day 4/25 Use the cursor's current position as values inside your CSS styles with Cursory - plugin: https://github.com/tomhodgins/cssplus#cursory-mousetouch-cursor-variables … - demo: https://codepen.io/tomhodgins/pen/xdXdpZ … #merryCSSmas #css #mouse #cursor #variable #interactive #reactive #animated #responsivepic.twitter.com/FLgquiTbWl

Day 5/25 Customize the specificity of the CSS selectors you are writing with reSpec! - plugin: https://github.com/tomhodgins/respec … - demo: https://codepen.io/tomhodgins/pen/mBzywr … #merryCSSmas #css #custom #selector #specificity #frameworks #librariespic.twitter.com/VnhLHwGClo

Day 6/25 Expose properties of DOM nodes via CSS variables with Varius to style based on an elements own width, height, characters, children, and scroll position! - plugin: https://github.com/tomhodgins/varius … - demo: https://codepen.io/tomhodgins/pen/GvmaQy … #merryCSSmas #cssvariables #reactive #css #rwdpic.twitter.com/4yo0dxQjmY

Day 7/25 Interpolate JavaScript ~anywhere~ inside CSS using ${} with this simple JS-in-CSS reprocessor! - plugin: https://gist.github.com/tomhodgins/b8697d6599b2cda60bb7e77e5f2387fe … - demo: https://codepen.io/tomhodgins/pen/dZYRdv … #merryCSSmas #css #reprocessor #style #scoping #js #interpolation #jsincsspic.twitter.com/G35RrybX6h

Day 8/25 Define height based on a ratio and the element's current width with the Aspect Ratio Mixin - plugin: https://github.com/tomhodgins/reprocss/blob/master/mixins/aspect-ratio.js … - demo: https://codepen.io/tomhodgins/pen/pwOjjL … #merryCSSmas #responsive #aspectratio #iframe #css #webdev #wedbdesign #rwdpic.twitter.com/lEzsaqjYpy

Day 9/25 An easy to use syntax for expressing element queries with QSS - plugin: https://github.com/tomhodgins/qss  - demo: https://codepen.io/tomhodgins/pen/oodpMR … #merryCSSmas #css #elementqueries #rwd #containerqueries #creativecoding #syntaxpic.twitter.com/h6zdR2S88u

Day 10/25 Simple container queries plugins written in ES5 and ES6 with Container Queries Mixin (stylesheet edition) - plugin: https://gist.github.com/tomhodgins/fc42b334beaafc75a271b1ef7c8e33ee … - demo: https://tomhodgins.github.io/js-in-css/tests/container-queries.html … #merryCSSmas #containerqueries #elementqueries #css #rwd #jsincsspic.twitter.com/LQETScJZCW

Day 11/25 Use DOM properties of elements as CSS variables for styling with Varsity - plugin: https://github.com/tomhodgins/cssplus#varsity-scoped-variables … - demo: https://codepen.io/tomhodgins/pen/RVLzZB … #merryCSSmas #css #variable #props #rwd #responsivepic.twitter.com/0nM3i8sgpv

Day 12/25 Allow elements (like textarea or input) to expand to fit their content with Auto Expand Mixin - plugin: https://github.com/tomhodgins/reprocss/blob/master/mixins/auto-expand.js … - demo: https://codepen.io/tomhodgins/pen/gRBLZY … #merryCSSmas #autoexpand #responsive #rwdpic.twitter.com/SXhCcRIVDT

Day 13/25 Use element queries via custom <link> tag attributes to toggle stylesheets with Slinky - plugin: https://github.com/tomhodgins/slinky … - demo: https://tomhodgins.github.io/slinky/tests/demo.html … #merryCSSmas #elementqueries #containerqueries #rwd #responsivepic.twitter.com/Bcv9gVsz2p

Day 14/25 Use XPath selectors to target elements with CSS styles with XPath Selector Mixin - plugin: https://github.com/tomhodgins/reprocss/blob/master/mixins/xpath-selector.js … - demo: https://codepen.io/tomhodgins/pen/EojyWQ … #merryCSSmas #xpath #selector #css #parent #ancestorpic.twitter.com/k3euADb8lZ

Day 15/25 Add JavaScript tests to CSS selectors to determine if a style should apply with Selectory - plugin: https://github.com/tomhodgins/cssplus#selectory-a-selector-resolver … - demo: https://codepen.io/tomhodgins/pen/ZKmXXw … - test ideas: https://codepen.io/tomhodgins/post/useful-tests-for-js-powered-styling … #merryCSSmas #elementqueries #containerqueries #jsincss #selectorspic.twitter.com/mLtBukOTQ4

Day 16/25 Target the closest ancestor to an element matching a CSS selector with the Closest Ancestor Mixin - plugin: https://github.com/tomhodgins/reprocss/blob/master/mixins/closest-selector.js … - demo: https://codepen.io/tomhodgins/pen/gRQqGB … #merryCSSmas #css #parent #ancestor #closest #selectorpic.twitter.com/FoIjvM702y

Day 17/25 Use the scroll position of an element as values in CSS with Scrollery - plugin: https://github.com/tomhodgins/cssplus#scrollery-scroll-position-variables … - demo: https://codepen.io/tomhodgins/pen/jwPBoV … #merryCSSmas #css #variables #cssvariables #rwdpic.twitter.com/uaxa1oWniZ

Day 18/25 Evaluate JavaScript from the context of each element with the Scoped Eval Mixin - plugin: https://github.com/tomhodgins/reprocss/blob/master/mixins/scoped-eval.js … - demo: https://codepen.io/tomhodgins/pen/dRQaZJ … #merryCSSmas #JS #CSS #JSinCSS #scoped #styles #interpolation #evalpic.twitter.com/p6X8tMKraD

Day 19/25 An experimental container queries plugin using ResizeObserver with RobServ - plugin& demo: https://codepen.io/tomhodgins/pen/MERNEY … #merryCSSmas #responsive #css #elementqueries #resizeObserver #containerqueries #rwdpic.twitter.com/9SDJuDxV7H

Day 20/25 Select the element directly preceding another element with Prev Selector Mixin - plugin: https://github.com/tomhodgins/reprocss/blob/master/mixins/prev-selector.js … - demo: https://codepen.io/tomhodgins/pen/awQXVJ … #merryCSSmas #css #prev #selector #jsincsspic.twitter.com/cTSHfXaJD6

Day 21/25 A JavaScript plugin that adds support for a custom --aspect-ratio property in CSS with Aspecty - plugin: https://github.com/tomhodgins/cssplus#aspecty-an-aspect-ratio-property … - demo: https://codepen.io/tomhodgins/pen/gWJKKy … #merryCSSmas #aspectratio #css #rwd #responsive #webdesignpic.twitter.com/QBXN1XCU2N

Day 22/25 apply styles to all ancestor elements matching a CSS selector with Ancestor Selector Mixin - plugin: https://github.com/tomhodgins/reprocss#ancestor-selector-mixin … - demo: https://codepen.io/tomhodgins/pen/VzRwMZ … #merryCSSmas #css #ancestor #selectorpic.twitter.com/V6OlGJ2XUW

Day 23/25 Apply styles to all elder siblings of elements matching a CSS selector with Elder Selector Mixin - plugin: https://github.com/tomhodgins/reprocss#elder-selector-mixin … - demo: https://codepen.io/tomhodgins/pen/GvVaLv … #merryCSSmas #elder #sibling #selectorpic.twitter.com/QiCZXqHjV8

Day 24/25 Do (almost) everything listed so far this month all in one plugin with EQCSS - plugin: http://elementqueries.com  - demo: https://codepen.io/tomhodgins/pen/NrxqPo … #merryCSSmas #eqcss #elementqueries #containerqueries #rwdpic.twitter.com/GF6DLFLTmT

Day 25/25 Excited to finally release a new kind of HTML compiler I've been working on. It lets you write Container Queries and compile them down to native CSS media queries. - view on Github: https://github.com/tomhodgins/qompile … #merryCSSmas #elementqueries #containerqueries #css #rwdpic.twitter.com/iLEAiPQjVu