maepon + css   322

The Power of Flex-Grow – Hacker Noon
Let’s face it, laying out a website can sometimes be challenging, especially when some of the content may be dynamic. At times, we may need to add or remove content based on user input, or other…
css  flex  flexbox  layout  flex-grow  howto  tw  cdtw 
may 2018 by maepon
How to Build a Responsive Type Scale with Bootstrap — SitePoint
Craig Watson explains how to set up a responsive type scale with Bootstrap, so that your site’s typography will scale responsively on all devices.
bootstrap  css  typography  tw  cdtw 
may 2018 by maepon
jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld
tw  gcw  cdtw  css  javascript 
january 2017 by maepon
Hamburger menu alternatives for mobile navigation – Medium
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low…
tw  gcw  design  css  javascript 
november 2016 by maepon
Material Design
material  materialdesign  google  css  design  reference  webDesign  tw  gcw 
october 2016 by maepon
20160930 フロントエンド高速化 業務編 (社内勉強会)
tw  gcw  css  javascript  optimization  optimize 
october 2016 by maepon
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
この総合的な入門書では、アドレスバーに と入力してからブラウザの画面に Google ページが表示されるまで、ブラウザの内部で何が起きているかについて説明します。
browser  html  web  css  javascript  tw  gcw 
august 2016 by maepon
vin-ni/hover-on-touch: Javascript plugin for an alternative hover function on mobile devices. It shows secondary information on Taphold & goes to a link on Tap.
hover-on-touch - Javascript plugin for an alternative hover function on mobile devices. It shows secondary information on Taphold & goes to a link on Tap.
tw  gcw  design  css  javascript 
may 2016 by maepon
saadeghi/browser-hack-sass-mixins: Browser-hack sass mixins: Apply your CSS to a specific browser
browser-hack-sass-mixins - Browser-hack sass mixins: Apply your CSS to a specific browser
sass  scss  css  tw  gcw 
april 2016 by maepon
Detectr.js Detectr.jsはブラウザやOS、デバイス等を検出してclassを付与するスクリプトです。他ライブラリに依存せず単体で動作し、圧縮版で3.6KByと軽量です。下記のようにclassが付与されます。 OperaでアクセスしたらChromeと出てしまいましたが、今のChromeクローンライクなOperaでは致し方ないのですかね・・? 検出できる情報はGithubに一覧がありますのでご参照下さい。ライセンスはMIT。 Detectr.js Other Links WPデザインギャラリー トピアンテナ ドメイン検索・ドメイチ jQuery API検索・jSearch Blite desigN
css  javascript  library  tw  gcw 
april 2016 by maepon
Annotating Your (Critical) CSS
The following is a guest post by Wladston Ferreira Filho. We've covered critical CSS before, but the technique covered was specific to SCSS. Here Wladston covers the basics and introduces another way to do it, through PostCSS, and shows an example (with data) of the result. Critical CSS is an effective, but all-too-rarely used approach for improving page rendering performance. Critical CSS is two things together: Deferred loading of the main stylesheet Inlining the most vital ("above the fold") styles Implementing Critical CSS requires some work. For one, it means splitting the CSS in two (the critical parts and the rest) which can be a maintenance problem. Later in this article we'll look at a tool to counter this drawback by splitting CSS automatically based on annotations (i.e. /* comments */ ) in the main CSS file. The Facts Research by Mozilla, Akamai and many other sources confirm: small changes in page render time can significantly alter performance metrics. Under a bad network connection, page performance becomes even more important, as download times can be multiple times higher. Google even provides a service to give pages a "speed score", a not-so-subtle hint that performance can be related to SEO. Properly using Critical CSS is advised by Google to up your score. The technique is certain to cause a positive effect on render speed. The reduction in render time depends on how small you can make your Critical CSS, and how big your main stylesheet. How Critical CSS Works The "normal" approach to CSS is to include your main stylesheet as a in the . The downloading and parsing of that blocks rendering. Critical CSS makes your page render faster by bypassing that blocking. The first step is to "inline" (a streamlined tag in the ) the essential CSS required to render the page's above-the-fold content. That enables the second step: non-critical CSS can be loaded asynchronously (non-blocking), while the web page is rendering. Once the big CSS file arrives, it's appended to the page by JavaScript. A common way to make this work in practice is by using a CSS preprocessor. The preprocessor can detect specially authored comments on the CSS, so it can distinguish the critical CSS, and separate it automatically. This has been covered on CSS-Tricks before, using SCSS. Let's explore doing it in the native CSS syntax. Heads up: to make this work you'll need a server-side tool to inline the critical CSS into all pages you serve as well as
css  tw 
march 2016 by maepon
« earlier      
per page:    204080120160

related tags

accessibility  accessible  animate  animation  animations  app  apple  background  bem  blog  boilerplate  bootstrap  border-radius  brick  browser  browser-test  browserhacks  browserify  browsers  button  canvas  cdtw  chart  checkbox  cheetsheet  chrome  chromedevtools  clearfix  clip  code  code-snippets  codepen  coding  Collection  color  colors  colorscheme  comparison  compass  compatibility  components  cscc  css  css-framework  css-sass  css3  css20  csscomb  cssgrid  css_animation  demo  design  desktop  dev  development  devices  devtool  devtools  documentation  easing  ECMAScript  editor  effects  electron  email  experiments  extract  firefox  flex  flex-grow  flexbox  float  floats  focus  font  fonts  form  forms  foundation  framework  frameworks  free  front-end  frontend  gcw  generator  github  google  gradient  gradients  grid  grids  guide  guidelines  gulp  hack  history  hosting  hover  howto  html  html5  icon  icons  ie  ie11  image  inline  interaction  ios  iphone  jacascript  javascrip  javascript  jquery  jquey  js  keyboard  layout  less  library  libsass  loader  loading  loading-effects  maps  markup  material  materialdesign  matrix  media-queries  mediaqueries  minify  minimal  minimalism  minin  mixin  mixins  mobile  mozilla  news  normalize  oocss  opensource  optimisation  optimization  optimize  osx  pattern  patterns  performance  photo  php  placeholder  plugin  plugins  polyfill  preloader  presentation  programming  progressive-enhancement  radius  reference  rendering  reset  resources  responsive  responsive-design  rwd  safari  sanitize  sass  scss  shadow  slider  slideshare  slideshow  smacs  smacss  small  smartphone  snipets  snippets  social  software  styleDocco  styleguide  stylesheets  stylestats  stylus  sublime  sublimetext  summary  svg  table  tables  template  templates  testing  tips  toggle  tool  tools  topics  transition  transitions  tutorial  tw  tw  twt  type  typography  ui  ux  via:popular  viewport  w3c  web  web-components  webcomponents  webdesign  webdev  webtool  WordPress  スタイルガイド 

Copy this bookmark: