recentpopularlog in

kme : webdesign   497

« earlier  
How To Specify Typical Device Breakpoints With Media Queries
<code class="language-css">/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}</code>
webdesign  webdevel  breakpoints  css  mediaqueries  solution 
14 days ago by kme
vuetify - love & hate
"Backward compatibility is a property of a system, product, or technology that allows for interoperability with an older legacy system, or with input designed for such a system"
Perl values backward compatibility a lot.
We expect a sane script or application that was written 10 year ago to just run on a current system.
vuetify .. not so much
webdesign  webdevel  vue  vuejs  materialdesign  perl  slides 
12 weeks ago by kme
Jen Simmons: Revolutionize your page: Real art direction on the web - YouTube
Interesting insights about Instapaper, reader mode, intelligent digital assistants using pages without the designers' CSS--and there being no stats for that.
design  webdesign  columns  flexbox  layout  conference  talk  cssgrid 
october 2019 by kme
Is there a CSS selector for elements containing certain text? - Stack Overflow
Not possible without JavaScript
<code class="language-javascript">
// using jQuery
$('td:contains("male")')
</code>
css  selector  webdesign  webdevel  workaround  solution 
september 2019 by kme
css3 - How can I transition height: 0; to height: auto; using CSS? - Stack Overflow
Use max-height in the transformation and not height. And set a value on max-height to something bigger than your box will ever get.
css  animation  css3  transitions  webdesign  dammitbrain  solution 
june 2019 by kme
Should Links Open In New Windows? — Smashing Magazine
Also includes a JavaScript snippet (no cookies) for setting a page-wide preference based on user input.
In fact, developers often tend to forget a simple, almost elementary fact: if users want to close the application or leave a site, they will — doesn’t matter which obstacles are placed on their path to the exit-button. The more obstacles there are the more negative the user experience will be.
webdevel  webdesign  newtab  antipattern  ux  dontdoit 
march 2019 by kme
When to use target="_blank" | CSS-Tricks
Branding branding branding! Eyeballs baby. Metrics. ENGAGEMENT.

Other sites should have normal-style links, but our site is special. Our site is more important and should never be left behind
webdevel  webdesign  antipattern  ux 
march 2019 by kme
necolas/normalize.css: A modern alternative to CSS resets | https://github.com/
A modern alternative to CSS resets. Contribute to necolas/normalize.css development by creating an account on GitHub.
html  css  webdesign  cssreset  boilerplate 
february 2019 by kme
How to Open WebP Images in GIMP – Better Tech Tips | https://www.bettertechtips.com/
Or you can install 'webp' and 'imagemagick' packages and use 'convert' to convert to a format that GIMP or whatever can actually open natively.
webdevel  webdesign  webp  gimp  conversion  importexport  plugin  sortof  solution 
january 2019 by kme
Customizing MediaWiki for beginners - MediaWiki | https://www.mediawiki.org/
<code class="language-css">
@import url("https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif")

body {font-family: "Noto Sans", sans-serif}
/* changes the default font used for MediaWiki to Noto Sans (does not include headings or monospaced text) */

div#content h1, div#content h2 {font-family: "Noto Serif", serif}
/* changes the default font used for MediaWiki headings to Noto Serif */
</code>
mediawiki  webfont  font  customization  webdesign  webmaster  solution 
november 2018 by kme
javascript - How to position loading animation inside input box? - Stack Overflow | https://stackoverflow.com/
You can also do it as a background image in CSS. Just create a CSS class and apply at the time of loading the data. After Ajax call is completed remove the "loading" CSS class from the text input box.<code class="language-css">
.loading {
background-color: #ffffff;
background-image: url("http://loadinggif.com/images/image-selection/3.gif");
background-size: 25px 25px;
background-position:right center;
background-repeat: no-repeat;
}</code>
webdesign  webdevel  css  animation  animatedgif  solution 
october 2018 by kme
216 Web Safe Colors List - by WebSafeColors.design | https://websafecolors.info/
mutedgreen: rgba(0,255,156,0.3), Hex: #00FF9C
mutedred: rgba(255,51,46,0.3), Hex: #FF332E
mutedturquoise: rgba(20,174,204, 0.3), Hex: #14AECC
mutedcerulean: rgba(61,138,153, 0.3), Hex: #3D8A99
mutedmagenta: rgba(204,20,97,0.3), Hex: #CC1461
mutedmustard: rgba(232,172,12,0.3), Hex: #E8AC0C
webdevel  webdesign  colors  colorscheme  palette  solution 
june 2018 by kme
jinja string match - Google Groups | https://groups.google.com/
In a test pillar:
<code class="language-jinja">
{% if 'node3' in grains["id"] %}
test: yayaya matches node3
{% else %}
test: nonono
{% endif %}
</code>
flask  jinja  templates  syntax  webdevel  webdesign  solution 
june 2018 by kme
extremeFE/bootstrap-checkbox: Three state checkbox for Bootstrap | https://github.com/
Interesting, but I don't think you can use the form inputs anymore, because they're replaced with divs. You would have to listen on the change events, and handle the remote updates there.

If they'd just hidden the original elements, it would've been fine.
webdesign  bootstrap  javascript  checkbox  tristate  maybesolution 
may 2018 by kme
Indeterminate Checkboxes | CSS-Tricks | https://css-tricks.com/
<code class="language-html"><!-- Inline click handler, just for demo -->
<input type="checkbox" id="cb1" onclick="ts(this)"></code>

<code class="language-javascript">
function ts(cb) {
if (cb.readOnly) cb.checked=cb.readOnly=false;
else if (!cb.checked) cb.readOnly=cb.indeterminate=true;
}</code>
webdesign  webdeve  html  jquery  css  javascript  checkbox  tristate  tipsandtricks 
may 2018 by kme
Before We Begin - Postbox | https://www.postbox-inc.com/
You get here immediately after download, and I think that's a nice touch.
firstlaunch  webdesign  ui  userhelp  inspiration 
november 2017 by kme
« earlier      
per page:    204080120160

Copy this bookmark:





to read