less

Bootstrap fixed header and footer with scrolling body-content area in fluid-container

由 佐手、 提交于 2019-11-28 17:36:45
问题 I was surprised I could not find a simple answer to this problem by Googling, but most responses to scrolling content panels either did not work properly, or did not work with bootstrap. Answers like this one have full page scroll-bars, which seems wrong. I am simply trying to have 100% height html and body with no browser scrollbar, but scrolling visible on the body content area only. It needs to behave with bootstrap menu heights etc. So far the only way seems to work, at all, is using

How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

由 冷暖自知 提交于 2019-11-28 17:16:13
I am looking to know if there is any simple solution known to change the gutter with on the fluid default 12 grid bootstrap system (2.3.0). I am not familiar with LESS but if that is the answer, please also describe how to could be changed. The same with Sass. Please note that it is perfectly acceptable to change the gutter width, by half or one fourth , for example if that may make things simpler. The following goals must be met: Must be able to update bootstrap in the future. This means not editing the actual bootstrap files. Functionality should remain for all other objects. Must be simple.

Visual studio - precompile - dotless

由 不想你离开。 提交于 2019-11-28 17:15:32
I wonder if there is a way to precompile *.less files( http://www.dotlesscss.org/ ) with visual studio. The site gives me a dotless.compiler.exe but I am not sure how to hook this up to visual studio. I am looking for a solution for both Webforms and ASP.NET MVC. David Longnecker Depending on your build environment, you can kick off dotless.Compiler.exe as a build task. For example, using a Pre-Build task in Visual Studio (all 1 line): $(SolutionDir)Tools\dotLess\dotless.compiler.exe -m $(ProjectDir)content\css\site.less $(ProjectDir)content\css\site.css The macros ( $(SolutionDir) , etc)

Node.js + Express.js. How to RENDER less css?

由 不想你离开。 提交于 2019-11-28 17:14:11
问题 I am unable to render less css in my express workspace. Here is my current configuration (my css/less files are in 'public/stylo/') : app.configure(function() { app.set('views' , __dirname + '/views' ); app.set('partials' , __dirname + '/views/partials'); app.set('view engine', 'jade' ); app.use(express.bodyDecoder() ); app.use(express.methodOverride()); app.use(express.compiler({ src: __dirname + '/public/stylo', enable: ['less']})); app.use(app.router); app.use(express.staticProvider(_

Bootstrap 3 extra large (xl) columns

由 北城余情 提交于 2019-11-28 17:13:11
In Bootstrap's LESS build can someone please tell me how to add a fifth device size, extra large ( col-xl-# )? Bass Jobsen You can create a other less file (for instance bootstrapxl.less), containing the following code and compile that file: @import "bootstrap.less"; // XLarge screen @screen-xlg: 1600px; @screen-xlg-min: @screen-xlg; @screen-xlg-hughdesktop: @screen-xlg-min; // So media queries don't overlap when required, provide a maximum @screen-lg-max: (@screen-xlg-min - 1); //== Container sizes // Large screen / wide desktop @container-xlarge-desktop: ((1540px + @grid-gutter-width));

grunt replace all less files into css files

由 ￣綄美尐妖づ 提交于 2019-11-28 17:09:57
问题 I use grunt to convert all my less files into css files,using this: less: { development: { files: { "css/*.css": "less/*.less" } } } This worked on version 0.3.0, but now that I have upgraded to v0.4.0 it doesn't work anymore. The following code (not using * in the destination) works on both versions, so the problem is with the star on the destination file. less: { development: { files: { "css/test.css": "less/*.less" } } } Any idea ? 回答1: This isn't a bug. Grunt no longer supports globbing

How to calculate percentages in LESS CSS?

由 主宰稳场 提交于 2019-11-28 16:51:32
I would like to calculate the width of child-container (div etc) in percentages depending on the parent container with LESS CSS . I am using the forumula by Ethan Marcotte: target / context = result . Parent container: 620px Child container: 140px I am using this calculation: div.child-container { width: (140/620)*100%; } However the output is: div.child-container { width: 0.2258064516129; } I would like to move the decimal point two digits and add the %, like this: div.child-container { width: 22.58064516129%; } Any hints greatly appreciated. zzzzBov According to the LESS CSS website , you

How do I compile a directory full of less css files to css?

由 不想你离开。 提交于 2019-11-28 16:49:24
I have a directory full of less css files. What is the best way to compile them to normal css? (for deployment) Id like to run a command as follows: lessc -r less/ css/ where lessc is the less compiler (installed via node package manager) The way to do this is what bootstrap does - have a file which imports all the others and compile that. @import "variables.less"; @import "mixins.less"; You can use the following bash one-liner to compile and all less files in a directory and its subdirectories into a single css file "combined.css": $ find less_directory/ -name '*.less' -exec lessc {} \; >

Fluid Container in Bootstrap 3

由 不羁岁月 提交于 2019-11-28 16:32:28
How to make fluid container in bootstrap 3? In bootstrap 2.3.2 .container-fluid class is there. But now in bootstrap 3 it is missing and there is only .container class. Please help me. Bootstrap 3.0 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default. for example, to have a two-column fluid layout, simply use: <body> <header>...</header> <div style="padding:0 15px;"><!-- offset row negative padding --> <div class="row"> <div class="col

Is it possible to use vh minus pixels in a CSS calc()? [duplicate]

由 核能气质少年 提交于 2019-11-28 16:16:53
This question already has an answer here: Less aggressive compilation with CSS3 calc 4 answers I have following CSS rule in a Less file: .container { min-height: calc(100vh - 150px); } Which doesn't work at all. I want to make container full window height and minus header, footer fixed height. How can I do that? Alexander Kim It does work indeed. Issue was with my less compiler. It was compiled in to: .container { min-height: calc(-51vh); } Fixed with the following code in less file: .container { min-height: calc(~"100vh - 150px"); } Thanks to this link: Less Aggressive Compilation with CSS3
订阅 less