I have coded a Landing page just to try Twitter Bootstrap with Less files.
I am not sure if I have organized my less files as it should be.
In the head section of my index.html:
<link rel="stylesheet/less" type="text/css" href="bootstrap.less" />
Here the content of my bootstrap.less
// Core variables and mixins
#import "less/variables.less"; // Modify this for custom colors, font-sizes, etc
#import "less/mixins.less";
// CSS Reset
#import "less/reset.less";
// Grid system and page structure
#import "less/scaffolding.less";
#import "less/grid.less";
#import "less/layouts.less";
// Base CSS
#import "less/type.less";
// Utility classes
#import "less/utilities.less"; // Has to be last to override when necessary
In my folder "less" i have the following files
utilities.less
utilities.css
variables.less
variables.css
grid.less
grid.css
type.less
layouts.less
mixins.less
scaffolding.less
reset.less
They are all actually necessary to make my landing page work but I am not sure if this file organization is the best solution.
I am bit confused about that, could you help me out and tell me if I am doing well? Is there a better way to organize the files?
Here you see the landing page
How you organize your files is entirely up to you, but here's how I normally do it during development:
public/
css/
layout.css (compiled from main.less)
less/
main.less (imports bootstrap/bootstrap.less)
bootstrap/
bootstrap.less
...etc...
Usually main.less also imports files like blog.less, forum.less, etc (depending on the site content). This schema lets me include layout.css in the HTML, and either compile the lesscss through a watcher, or on demand.
Related
I'm designing a site using Laravel Mix on local. I have lots of scss lifes in resources/assets/sass and through app.scss I combine them it looks just the way it's supposed to be on local using npm run watch and php artisan serve
But when I set the site up on a server, all the css classes are missing, therefore design doesn't implement itself on the website. For instance I have a class future-concerts which styles the element it suggests. So I check for .future-concerts inside public\css\app.css there is no such class. What might be causing this? Even just copying app.css file to the server doesn't work. It just deletes most of the lines I wrote.
app.scss file
// Fonts
#import url('https://fonts.googleapis.com/css?family=Abhaya+Libre|Mitr|Raleway');
// Variables
#import "variables";
#import "custom";
#import "directives";
// Bootstrap
#import "bootstrap.min";
#import "bootstrap-theme.min";
// Fotorama
#import "fotorama";
// Animate.css
#import "animate";
// Font Awesome
#import "font-awesome.min";
webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files.
This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the #import CSS at-rule.
Sample in our root LESS file:
/* Import core LESS files */
#import "../core.less";
/* Import jQuery UI stuff*/
#import "../themes/base/core.css";
#import "../themes/base/resizable.css";
#import "../themes/base/accordion.css";
#import "../themes/base/tabs.css";
/* Import more LESS files */
#import "../morestyles.less";
If we look at the files that are downloaded from Chrome, it is clear that the CSS files are not bundled with the root LESS files.
Naturally, we could simply include these CSS files in the BundleConfig and remove the #import calls, but I was just curious to see if there is a way to have them bundled together.
You should read http://lesscss.org/features/#import-options.
In your code #import "../themes/base/tabs.css"; compiles into #import "../themes/base/tabs.css"; (due to the .css extension). Which is a "normal" CSS import, CSS imports require an additional HTTP request to load.
You can use the inline option:
#import (inline) "../themes/base/tabs.css";
The above inlines the code from tabs.css into your project file without processing it.
I'm writing a simple app using Twitter Bootstrap. In my main HTML file I have the following lines:
<link rel="stylesheet/less" href="/static/less/style.less">
<script src="/static/js/libs/less-1.3.0.min.js"></script>
so every time I refresh the page, the whole css gets generated.
This takes about 15 seconds each time, so it's a pain waiting for the page to load.
I tried using SimpLESS to generate css out of the less files but the generation failed.
I'll try to get that to work, but I'm also wondering whether I'm not doing something wrong...
I dislike the fact that the css is generated each time, even if I don't change the less files. Is there a way to make less cache the css somehow?
Or perhaps there are other alternative solutions to this problem?
I would suggest removing parts of your .less file(s) to see if anything specific is causing poor performance. It shouldn't be that slow. My guess is that a particular mixin or function is causing the issue.
I would also suggest profiling the JavaScript (Chrome has a nice JS profiler) to see if anything obvious appears, like a LESS-related function which is slow and called repeatedly.
Here's my overall LESS strategy which might be helpful to you in the future. I'm using Visual Studio and ASP.Net, but you could do this with a variety of environments.
Most importantly, no JavaScript for LESS. Everything is done server-side.
In development, I request my .less files through the dotLess HTTP handler, which processes them and handles the caching. Every now and then, the cache glitches and I have to restart my local web server, but it's not a big deal. This enables me to make real-time changes to my less and see them by just refreshing the page. It's also fast.
Example: <link rel="stylesheet" href="foo.less" />
For production, I use a build action to compile my .less files into a single CSS file and reference the CSS file directly in the page. This takes everything dynamic out of the equation.
Example: <link rel="stylesheet" href="final.css" />
do you need every part from Bootstrap? Because that a lot of bloat code.
Try to disable some part from the main bootstrap file:
Do you need all the CSS for JavaScript parts?
Do you need 'code' & 'tables'?
In "responsive-utilities", you can comment out a lot if you don't need it.
Let me show you my setup, it's in SASS, but the principle stays the same:
// Compass utilities
#import "compass";
// Core variables and mixins
#import "includes/variables";
#import "includes/mixins";
// Reset
#import "includes/normalize";
#import "bootstrap/print";
// Core CSS
#import "includes/scaffolding";
#import "includes/type";
//#import "bootstrap/code";
#import "includes/grid";
//#import "bootstrap/tables";
#import "includes/forms";
#import "includes/buttons";
// Components: common
#import "includes/component-animations";
#import "bootstrap/glyphicons";
//#import "includes/dropdowns";
#import "includes/button-groups";
//#import "bootstrap/input-groups";
//#import "bootstrap/navs";
//#import "includes/navbar";
//#import "bootstrap/breadcrumbs";
//#import "bootstrap/pagination";
//#import "bootstrap/pager";
//#import "bootstrap/labels";
//#import "bootstrap/badges";
//#import "bootstrap/jumbotron";
//#import "bootstrap/thumbnails";
//#import "bootstrap/progress-bars";
//#import "bootstrap/media";
//#import "bootstrap/list-group";
//#import "bootstrap/panels";
//#import "bootstrap/wells";
#import "includes/close";
// Components w/ javascript
#import "includes/alerts";
#import "bootstrap/modals";
//#import "bootstrap/tooltip";
#import "includes/popovers";
//#import "includes/carousel";
// Utility classes
#import "bootstrap/utilities"; // Has to be last to override when necessary
#import "bootstrap/responsive-utilities";
//custom styling
#import "includes/customstyles";
I've been trying to split my less files up in to sections to make them easier to navigate, and want to import them all using one main file to compile them to css. my style.less file looks like this:
#import "reset";
#import "colors";
#import "grid";
#import "functions";
#import "headings";
#import "listings";
#import "content";
#import "buttons";
#import "layout";
#import "forms";
I'm using Winless to compile, and it says "Successfull Compile", but the resulting css file is completely blank. When I change my style.less file to only have one import, it imports that file no problem, so I know it's not a file directory/permissions problem. Any ideas? This is driving me mad. I love LESS, I don't want to have to do everything in one sheet.
I'm on a PC. Don't seem to have any trouble doing this at work on OSX, but I use Windows 7 at home and need something like Winless. I get the same results using less.js client side javascript file.
This is an old issue and it now works fine with less.js in v2.5.3.
#import "reset.less";
#import "grid.less";
#import "color.less";
#import "custom.less";
CDN reference below:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
Just remember to put your:
<link rel="stylesheet/less" type="text/css" href="less/compiled.less"/>
before the less.js reference.
I think this was due to a bug in LESS.js, and has since been fixed. Additionally, I've now moved to SimpLESS on Windows, and CodeKit on OSX. Neither of these have the same issues.
Using less.js has given me issues. Like darylknight, I suggest an alternative. I present upon to thee WinLess
When working with lesscss I would like to join two or three .less files into one super css file.
I know that you can do it using some little ruby magic, but I would like to know if there is something simple in the less engine?
You can use import, similar to how you can in a regular CSS file.
#import "reset";
#import "config";
#import "header";
#import "forms";
Taken from this SO post. It's also mentioned in the "Importing" section of the Less Documentation.
Simple solution:
Create a main.less file and open it (name it as you like)
Import your other css and less files via #import
#import "filename.less"; for less files
#import "filename.css"; for css files.
Compile your main.less file and just include this main.css in your site
Smile :)