使いこなせば効率3倍以上!LESSコーディングを支えるフレームワーク集。

スクリーンショット 2013-07-31 20.02.18

今や1年くらいの付き合いになったLESS。LESSとは、CSSのプリプロセッサで従来より簡易的な記述でCSSの記述が可能になるという優れもので、ウェブサイトのマークアップに用いるとサイトを素早く構築できる利点があります。

ほかにも、ソースの可読性が上がったりして凄く便利です。今回は僕お気に入りの、LESS対応のCSSフレームワークをいくつかまとめます。

グリッドシステム

近年のウェブレイアウトに欠かせないグリッドシステム。LESSとの相性もかなりよく、必要に応じてカラム・ガターサイズを調整できたり、マークアップ要素の横幅など算出できる点が柔軟でいいです。最近はレスポンシブに対応したグリッドシステムも多くなってきました。

SemanticGRID SYSTEM

可変・固定レイアウトやレスポンシブ、要素のネスティングなど、幅広いデザインケースを柔軟に対応できるグリッドシステムです。わりと最近よく使います。グリッドオンリーで提供。

スクリーンショット 2013-07-30 20.09.02

 

Fraction.less

最近主流な1140pxGridをベースに作られているマークアップフレームワーク。モダンなHTML5から下はIE6まで互換性があるのも魅力。初期の導入量が多いのでびっくりするんですが、ここまで住み分けられたら理想だなって感じです。LESS初心者は避けたほうがいいかもしれないです。

スクリーンショット 2013-07-30 20.10.55

 

Frameless

HTML5時代のベーシックフレームワーク。思想としてはモダンブラウザ向けにクールなレスポンシブページ作ろうぜ。と、クラッシクなブラウザを無視してスピードやワークフローを重視している感じで好きです。すぐにコーディングに着手できる形で提供されていて、おまけにレイアウトしやすいようにgrid.psdが入っていたりします。

カラムの算出方法と、リセット要素を内包している形が特徴的で勉強になりました。

スクリーンショット 2013-07-30 20.12.24

Mixin定義

LESS関数をまとめたmixin定義です。Mixinを用いると例えば、影やハイライトの状態、フォントサイズなどの繰り返し使うスタイルをひとまとめにでき、無駄な記述を省けたりします。これまたとても便利でかつ、プロジェクトの個性がでるところです。

 

LESS Elements

グラデーションやシャドウ、線などの使用頻度の多いスタイルに関わるものしか定義していないので非常シンプルなMixin定義です。もちろんベンダープレフィックスつき。

スクリーンショット 2013-07-30 20.16.35

 

LESS Prefixer

先ほど紹介したLESS Elementsに足りないアニメーション要素や、CSS3で実装されたCSSなどが加わったMixin定義。トランジションなどの定義方法は参考にしたけど、メインで使うことは…なさそう。

スクリーンショット 2013-07-30 20.17.26

 

lesshat

mixinとしてはかなり理想の状態なlesshat。プレフィックスのオンオフに対応してたりとか柔軟なので、必要に応じて部分的に採用しやすいです。
スクリーンショット 2013-07-30 20.14.57

 

bootstrap/mixin

Bootstrap内で利用してるMixinですね。Mixinのあれやこれやはだいたいここから学びました!(ただし理想的なMixin集ではないと思います)

コンパイラ

LESSは通常ブラウザで解釈出来ない *.less ファイルになるので、CSSに変換する必要があります。特に際立って使いやすいコンパイラはないんですが、だいたいが出力ディレクトリと入力ディレクトリを記録していて、セーブするたびにコンパイルしてくれたり、Minifyしてくれたりします。

 

LESS.app

JSでLESSファイルを読ませて、watchモードというもので動的にプレビューできたりするんですが、コンパイルしてCSSとして読ませたいというかたは、迷わずLESS.app、これ1つあれば十分だとおもいます。Win版も確かあったはず。

A screenshot of the Less.app window


そんな僕はSassに浮気中です。

← Previous post

Next post →

138 Comments

  1. ウィキLIVEDOORブランドコピー財布時計ファッションのブログ,歓迎を。 ロレックスコピー http://rolexweb.webnode.jp/

  2. TIRE DRESS REFILL PAD

  3. Lataverna.tk fotogallery lescommessesipagano DSCN0008

  4. Dummy never fails 2 Level Editor

  5. Twitter Free on Vodafone for 90 days http://www.getfreedealz.com

  6. Become In Forum crire une rponse

  7. Photos Summerhill

  8. Cartaz UNASPSP

  9. Under renovation being upgraded

  10. Internet Marketing for Young Lawyers Internet Law Commentary

  11. endocrinologist

  12. Baja Room at El Camion

  13. Real Estate Manager

  14. Full face mask Anglia Chimney Sweeps

  15. Tortilla Sandwich Rolls

  16. BuntspechTs Blog schon wieder wieder da

  17. Change Your Mind Blog Archive ADD Medication is a Cause For Concern

  18. 658154438834ISBNEAN8EAN13 of UPC bar code database

  19. TrackPro Options

  20. http://www.alternativasdesaludsabamie.com Instituto Sabamie Guadalajara, Jalisco Miguel Ernesto Salcedo

  21. 使いこなせばコーディング効率3倍以上!LESSコーディングを支えるフレームワーク集。 | Behind the Design. abercrombie femme

  22. メンズ水着 通販 激安

  23. ウィキLIVEDOORブランドコピー財布時計ファッションのブログ,歓迎を。

  24. Sommelier de vacaciones Un refresh contra el calentamiento global

  25. Beloved Life Hello world

  26. Simule seu ambiente e ganhe 1 lata de tinta Fernando Rigotti design de interiores, decorao e afins

  27. DCSFORUM.ru achat cialis france gxdei

  28. Alumni Anurag Kashyap CoolAge

  29. Laboratory of Dairy Science bbs

  30. THE HOLY INNOCENTS. zivick, ursula s.

  31. Nullam magna metus eu ultricies nec feugiat sed nibh

  32. Mein Zuschauen Ab in die Wste

  33. the.LIFE Files Welcome To Exclusiveness The worlds most exclusive site. We are pop culture.

  34. eriyye Sicilleri eriye Sicilleri eriye Sicili Osmanlca eviri Osmanl Arivi

  35. Buy iraqi dinar Iraq news iraqi dinar exchange rate

  36. GTA Grand Theft Auto

  37. YOUR COMMENTS WELCOME IN SALHAN

  38. Presidente Geral da SSVP visitar quatro pases da Amrica do Sul SSVPPortugal Sociedade de So Vicente de Paulo

  39. Propone EU mayores esfuerzos antidrogas con Mxico

  40. Cycle Ski BBS

  41. KCHINA.NET KPOP STAR

  42. GD492 Ideas

  43. Wedstrijdverslagen

  44. Gstebuch Musikzug der Freiwilligen Feuerwehr Legden

  45. BURNHDSPORTS

  46. SmartphoneSpot Apple komt met eigen muziekstream dienst.

  47. Kontakt Anglicky buldok English Bulldog Cool Dog Star UNREGISTERED VERSION

  48. FMA A to Z

  49. Blog Jack Dance UNREGISTERED VERSION

  50. While i applied him or her when a few days, it took belonging to the lower back part lake try to deliver it way up.I had different match cheap ffxiv gil, but they’re however within excellent. I can certainly not picture this undesirable high quality would happen about cheap ffxiv gil.

  51. XpressEngine Sohbet sitesi

  52. Narragansett Beer announces the seasonal release of its spring brew

  53. Funny Internet Memes Shirts from 6DollarShirts Funny Pictures Memes

  54. QA Purchasing For Designer Handbags Online Can Save You Cash

  55. Gstebuch Wolfgang Burger Natur und Landschaftsfotografie

  56. Een grote lul vereist veel voorbereiding Gratis Homo Porno.nl

  57. The Daily Khabarpatra

  58. lancel bb pas cher Fiorino EDA Powered by Discuz

  59. Cliff Pereira Photographs Before the Sunset

  60. Astro 101 Winter 2011 Isolating the stellar disks of Andromeda

  61. Xabi Alonso Steven Gerrard Adalah Tauladan Saya

  62. Eget urna cursus dictumst dui Phasellus

  63. Morbi molestie fermentum sem quis ultricies

  64. Under the Yesland Sky

  65. Lorem ipsum dolor sit amet vol lectus dignissim tristique

  66. Smelly Armpit Remover SalomeGroups

  67. 使いこなせばコーディング効率3倍以上!LESSコーディングを支えるフレームワーク集。 | Behind the Design. cheap oakleys http://www.discountsunglassesshopoutlet.com/

  68. I take advantage of this excellent final fantasy xiv power leveling pertaining to every little thing. I carry it for work, then become within just final fantasy xiv power leveling. I exploit this situation suitable for walking, especially for the whole of only number era. I’m a sucker for practical ideas on how fashion they could be describe your wimp, pleasant Wyoming! My organization is a devoted walker determined the criminals to skid only great on a camping trip final fantasy xiv power leveling. Were huge a sufficient amount should create the latest wide sock along. (I’m a 10.All 5 or organized up,.. try to our Sam Flinstone toes.) I didnrrrt make use of the business enterprise recomendation and bring it barefooted. The typically issue A totally free shift could be more alignment provider. (and insoles failed) Groundbreaking, i was move out in the open every single and every day or two available for climbing. They have personally got several benefit from whilst still being look really good! and stylish!

  69. You’ll find that there’s a worthwhile blog that has solely been recently gone, although merit to typically the sensation in hibernation, it can be also available through Internet explorer. Sixty, as i help you save it again, this reveals to try and obtain typically the website page via it is base on line, which not any longer is. Will there be in whatever way I’m able to configure Internet explorer just to save typically the locally-held documents on the other hand?.

  70. I just performed a device repair on the home pc and possess nevertheless for you to reload the antivirus software. Surprisingly some time under the system some thing referred to as Antivi acquired about the home pc in addition to Determine carry out things, even if it’s just go to the project currency broker to end this diet regime. Any kind of recommendation?.

  71. Finally, I can say that We have awesome, vogue yet good looking,! These wot powerleveling maintain me trend, I can carry them with all the things. They can be such cute wot powerleveling that I get compliments on them constantly! It is worth each penny.

  72. Tang Dynasty Vacation realizes the value of community tour guides. Community tour guides are the only staff that clients will come in speak to with, in addition to their professionalism, and skills all mirror intensely on Tangy Dynasty Vacation, and its associates. All Tour guides that perform for Tang Dynasty Vacation must endure a arduous tests course of action ahead of they are viewed as worthy of guiding clients, and once viewed as worthy, they must comply with a rigid variety of guidelines.

  73. I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an shakiness over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this increase. Download Anime http://www.youtube.com/watch?v=lL20HU3uTwY

  74. I don assume a designer purse makes anybody much better than anybody else. If a person feels this way, they are unfortunately mistaken. It who we are within that makes us particular.

  75. Some genuinely choice content on this website , saved to bookmarks .

  76. Enjoyed reading through this, very good stuff, thankyou . “A man does not die of love or his liver or even of old age he dies of being a man.” by Percival Arland Ussher.

  77. “Very nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed browsing your blog posts. After all I will be subscribing to your feed and I hope you write again soon!”

  78. u6q9ga Some truly great posts on this site, appreciate it for contribution.

  79. I am not certain where you are getting your information, however great topic. I needs to spend a while finding out more or understanding more. Thanks for magnificent information I used to be searching for this|Flipagram information for my mission.

  80. iVMJFy same nearly a lot often inside case you shield this hike. Feel free to surf to my website; social bookmark

  81. Wow, incredible weblog structure! How lengthy have you ever been running a blog for? you made blogging glance easy. The full glance of your web site is fantastic, let alone the content!

  82. pU2DQj I think this is a real great article post.Thanks Again. Much obliged.

  83. QGW3lK Rattling clean internet web site , thanks for this post.

  84. This is one awesome article post. Keep writing.

  85. Im obliged for the article.Really looking forward to read more. Really Great.

  86. I truly appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again!

  87. Hi there! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no backup. Do you have any solutions to prevent hackers?

  88. I have recently started a website, the information you offer on this site has helped me tremendously. Thank you for all of your time & work. “Never trust anybody who says ‘trust me.’ Except just this once, of course. – from Steel Beach” by John Varley.

  89. Just a smiling visitant here to share the love (:, btw outstanding pattern. “Reading well is one of the great pleasures that solitude can afford you.” by Harold Bloom.

  90. I gotta favorite this website it seems invaluable extremely helpful

  91. fantastic points altogether, you simply won a new reader. What might you recommend about your publish that you just made some days in the past? Any positive?

  92. I simply want to say I am just beginner to blogging and site-building and absolutely loved your web-site. Almost certainly I’m planning to bookmark your blog post . You actually have fantastic stories. Thanks a lot for revealing your website page.

  93. Thank you ever so for you article post.Much thanks again. Great.

  94. Keep up the wonderful piece of work, I read few articles on this website and I believe that your web blog is real interesting and has bands of wonderful info .

  95. I conceive you have observed some very interesting details , regards for the post.

  96. magnificent put up, very informative. I wonder why the opposite specialists of this|Pokemon Go sector do not understand this|Pokemon Go. You should continue your writing. I am sure, you’ve a great readers’ base already!

  97. Hello, you used to write great, but the last few posts have been kinda boring… I miss your super writings. Past few posts are just a little out of track! come on!

  98. I’ve been exploring for a little bit for any high quality articles or blog posts on this sort of space . Exploring in Yahoo I finally stumbled upon this|Prisma website. Reading this|Prisma info So i’m glad to convey that I’ve an incredibly good uncanny feeling I discovered exactly what I needed. I so much surely will make sure to do not omit this|Prisma web site and provides it a glance regularly.

  99. I’ll immediately seize your rss as I can’t in finding your e-mail subscription link or newsletter service. Do you have any? Please let me know in order that I could subscribe. Thanks.

  100. Hi there, You’ve done an excellent job. I’ll certainly digg it and personally recommend to my friends. I am sure they will be benefited from this web site.

  101. I loved as much as you’ll receive carried out right here. The sketch is tasteful, your authored material stylish. nonetheless, you command get got an nervousness over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly very often inside case you shield this hike.

  102. h1Gb3M This particular blog is definitely awesome and also diverting. I have chosen a lot of handy tips out of this blog. I ad love to return again soon. Thanks a bunch!

253 Pingbacks

  1. iBzgtUjM
  2. mxdEafZD
  3. gucci handbags outlet
  4. burberry bags
  5. hermes belt
  6. Chanel Handbags
  7. chanel handbags
  8. chanel outlet
  9. HERVE LEGER DRESS
  10. Chanel Outlet
  11. gucci handbags uk
  12. celine outlet
  13. GUCCI WALLET
  14. Hermes Bag
  15. celine bag
  16. chanel bags
  17. Hermes Handbags
  18. gucci outlet
  19. CHANEL HANDBAGS
  20. Chanel Outlet
  21. 通信販売 ビキニ
  22. 女性 水着 ビキニ
  23. 外国人 ビキニ
  24. 水着 三愛
  25. アリーナ 水着
  26. ジュニア水着
  27. 武井咲 水着
  28. ビキニ 水色
  29. シンプルビキニ
  30. 水着 ビキニ
  31. 水着 通信販売
  32. 水着
  33. bvd ビキニ
  34. ビキニ メンズ
  35. 峯岸みなみ 水着
  36. fila 水着
  37. 激安 水着 ワンピース
  38. 女児 水着
  39. 水着 人気
  40. 海外 水着
  41. 競泳用水着
  42. 水着販売
  43. 水着 激安
  44. 水着 通販 楽天
  45. roxy 水着
  46. hermes bag
  47. ラルフローレン ポロ
  48. ralph lauren メンズ
  49. ralph lauren ラグビー
  50. ラルフローレン ポロシャツ メンズ
  51. ラルフローレン 通販
  52. ラルフローレン 通販
  53. ralph lauren ジャケット
  54. ralph lauren 通販
  55. ラルフローレン ポロシャツ
  56. ラルフローレン ゴルフ
  57. ラルフローレン ゴルフ
  58. ラルフローレン ポロ
  59. ralph lauren 日本
  60. ラルフローレン ポロシャツ メンズ
  61. ラルフローレン ダウン
  62. ラルフローレン ラグビー
  63. ralph lauren 通販
  64. ralph lauren ny
  65. ラルフローレン 通販
  66. ralph lauren ny
  67. ralph lauren jp
  68. ralph lauren シャツ
  69. ralph lauren ragby
  70. ralph lauren
  71. ralph lauren アウトレット
  72. ralph lauren ラグビー
  73. ralph lauren 日本
  74. UcauCwua
  75. CHANEL OUTLET HANDBAGS
  76. neverwinter astral diamonds
  77. RMNgQEpK
  78. Google
  79. Clasificados de Trabajo en california
  80. valentines
  81. Nipple Clamps
  82. Multiple Stimulation
  83. survival gear
  84. Live adult webcam models
  85. best cream for men
  86. coffee from kona
  87. farmington hills emergency roadside assistance in
  88. Peaberry beans online
  89. beans for kona coffee
  90. Credit Repair specialists
  91. coffee beans online best
  92. best kona coffee
  93. Source
  94. coffee (hi) kona
  95. Best Lubricant for Sex
  96. Adam and Eve Vibrator
  97. musica
  98. canadian passport photo vaughan
  99. web hosting bestweb hosting
  100. workfromhomejobs
  101. Waste-Equipment
  102. download games for pc
  103. free pc 3d games download full version
  104. female vibrator
  105. software pc download
  106. adamandeve.com
  107. Camiones Peterbilt en Venta Florida
  108. acessórios
  109. padangos kaina
  110. NASM certified physical trainer
  111. slots free
  112. try this
  113. 美国 开除
  114. android games for pc
  115. webcam models
  116. live webcam models shows
  117. adult bedroom toys
  118. Women Toys
  119. best clit vibrators
  120. pvc dryer vent
  121. Dryer vent cleaning bloomingdale
  122. Rechargeable Sex Toy
  123. Dolphin Vibrator
  124. ماطور للبيع
  125. sex toy swing
  126. android games free download
  127. social media exchange
  128. erection system
  129. free online dating
  130. webcam models
  131. firstclass4life
  132. best anal vibrator
  133. 이문희 감독
  134. bathroom tile transfer
  135. Amazon tile stickers
  136. trampoline park Stockton
  137. prices for roll off dumpsters
  138. pleasure sex balls
  139. insurance coverage for
  140. Human Rights Application
  141. taxi soelden
  142. grinding wheels
  143. Cash For Trucks Melbourne
  144. toronto classifieds
  145. chat gratis
  146. digital marketing philippines
  147. Foreclosure attorney Wichita, KS
  148. crazy cat lady
  149. g spot tickler
  150. Male Enhancement
  151. best chat app
  152. this is my email address
  153. Dealer Advertising
  154. Car Wreckers
  155. 롤대리랭
  156. used wrecker tow truck for sale
  157. here
  158. Rotorazer
  159. mti magnolia telecom
  160. crystal jellies - small butt plug
  161. car wreckers melbourne
  162. sex toys for women
  163. crotchless panty
  164. superiorautoinstitute.com
  165. adam and eve
  166. butt plug
  167. sex blindfold
  168. bondage toys
  169. oki
  170. essential oils
  171. inchiriere apartamente timisoara
  172. silver bracelet
  173. iPad screen repair
  174. retirement benefits and income tax
  175. piezas mazda
  176. solar of hawaii
  177. the four percent group
  178. Adam and Eve Couple’s Enhancer Ring
  179. plošiny Plzeň
  180. pracovni plosiny plzen
  181. Sterling Trucks
  182. sexdoll
  183. morkie
  184. anal plus fun men
  185. magic message sex toy
  186. DISCO HIRE
  187. games for windows 8
  188. games for windows 7
  189. best masturbator
  190. gspot rabbit vibrator
  191. computer virus removal
  192. Impacted Canines
  193. 스포츠닥터스
  194. 스포츠닥터스
  195. best kona
  196. buy kona coffee
  197. work from home jobs online no fees
  198. Rabbit Vibrators
  199. Triple Stimulation
  200. Residential Sealcoating
  201. Google
  202. Arizona Truck Scales
  203. Penis Stroker
  204. top female sex toys
  205. blow up doll sex
  206. download free games
  207. full version pc games download
  208. games for pc download
  209. tech forum
  210. CIO Terbaik 2017
  211. young beagle
  212. خرید سرور مجازی
  213. space research world
  214. chug
  215. 100 вопросов сдачи теста на гражданство сша
  216. apps for pc
  217. full apps download
  218. pdr training
  219. thruster rabbit vibrator
  220. best sex toy for women
  221. cock ring review
  222. SAI
  223. movies malayalam
  224. Ford Transit 250 High Top
  225. php music Script
  226. 오버워치대리사이트
  227. roof repair
  228. Song
  229. edm filter
  230. dedicated server hosting
  231. overnight cat boarding
  232. 5ml jars
  233. chain saw sharpening diamond wheel
  234. superior auto institute
  235. the watches exchange
  236. climax
  237. Double Penetration Toy
  238. Vibrator
  239. free download for laptop
  240. free download for windows 10
  241. free download for windows pc
  242. free download for laptop pc
  243. Photography Studio east Greenwich ri
  244. superior auto institute
  245. free download for laptop pc
  246. games for pc download
  247. free download for pc
  248. free download for windows
  249. used car
  250. fantasias sexshop
  251. Android Fixed Rom
  252. 100% kona
  253. 100% kona coffee

コメントを残す