I'm very new to web design...okay, now that that's out of the way, where do I declare variables in the LESS/CSS framework?
I'm using NetBeans IDE 7.0.1
I'm also using Bootstrap 2.0 (not sure if this matters).
I downloaded the latest version of LESS from lesscss.org but it only downloads the minified version.
Here are my links and script tags in the header:
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/realcardio.css" media="all">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<script type="text/javascript" src="bootstrap/js/less-1.2.1.min.js"></script>
Can't wait to start assigning values to variables but I'm just not sure what file to do this in?
Thanks all!
You do it in your less file!
sample.less
#font_color: #666;
#font_size: 15px;
body {
color: #font_color;
font_size: #font_size;
}
Then you include this .less file:
<link rel="stylesheet/less" type="text/css" href="sample.less">
<script src="less.js" type="text/javascript"></script>
Before you include the less.js file.
FYI, I find it's actually a much better model to hook up something so that every time you save your .less file in your editor, it compiles it using the node lessc compiler into a .css file and you just include that .css file in your page.
This way I don't have to run a convert before we do a deploy at work.
Related
I'm using less css in my stylesheets. I'm also in localhost via xampp.
I'm having an issue with my stylesheet not rendering (for a split second) on page load.
The page loads quickly without the styles, then loads just a split second later with the styles applied.
Has anyone had any similar issues using less?
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Feed</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- style sheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css" />
<link rel="stylesheet/less" href="styles.less" />
<!-- scripts -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body style="font-family: 'Roboto', sans-serif;">
index.php
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
<!-- My HTML source here -->
styles.less
#import 'whitetheme.variables.less';
/* styles are here */
whitetheme.variables.less
#dark-font-color: rgba(0,0,0, .9);
#medium-font-color: rgba(0,0,0, .8);
#light-font-color: rgba(0,0,0, .7);
#secondary-background: #fff;
#primary-gray: #f0f2f5;
#primary-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
#primary-blue: #4c8bf5;
less css not rendering (for a split second) on page load
LESS is not CSS.
Browsers do not natively support using LESS files (*.less) as stylesheets.
LESS is a system that generates CSS stylesheet files for you.
LESS is intended to be used as part of a build process (which you'd automate with npm run, or Gulp, or WebPack, or Rollup, or whatever the JavaScript ecosystem thinks is cool this month).
You are using an external third-party script to convert LESS to CSS in the browser, which is the cause of the delay.
Specifically, here's your problem:
<link rel="stylesheet/less" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
You're using a LESS processor script that runs in the browser to convert your .less file into a CSS stylesheet that browsers can natively understand - this process happens asynchronously and independently of the browser loading the page.
This is what's happening (in chronological order, as your browser loads the page):
The browser loads your / page (that's the HTML output of your index.php script).
The browser loads styles.less asynchronously.
However, browsers will load rel="stylesheet" resources synchronously and block the page render, however.
The browser loads less.min.js synchronously (as you aren't using the defer or async attributes) and it then runs and processes your LESS and converts it to CSS.
The less.min.js file will wait until less.min.js is loaded, however.
And it's during that wait-for-less.min.js-file period that the browser renders your page (fast, isn't it?) without the CSS styles that it doesn't have yet.
The best fix is to run the LESS-to-CSS conversion step as part of a project build process. I suggest you read-up on npm and the rest in order to do this properly.
Something like this:
Compiling less with webpack
Install Webpack and LESS:
https://www.npmjs.com/package/less-loader
https://webpack.js.org/guides/getting-started/
cd your-project
npm init -y
npm install webpack webpack-cli --save-dev
npm install less less-loader --save-dev
Configure Webpack + LESS:
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
"style-loader",
"css-loader",
"less-loader",
],
},
],
},
};
Run npx webpack
Edit your HTML:
Remove the <script> to less.min.js.
Update the <link> to point to the output .css file from Step 3.
Found the issue.
instead of
<?php
require 'navbar/navbar.php';
require 'header.php';
?>
I just needed to require my header first
<?php
require 'header.php';
require 'navbar/navbar.php';
?>
After compile and build the Meteor application for production. All the js and css files have been minified and concatenated as one js or css file like this:
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/668709f5b029ed3db7692654ebb3c305ae2d1b1a.css?meteor_css_resource=true">
<script type="text/javascript" src="/327435ecda451157c3d8a0af70c6172f58fe77cf.js?meteor_js_resource=true"></script>
These files' URL start with root. My question is: How to add extra level in it? the expected result should be:
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/a_extra_level_here/668709f5b029ed3db7692654ebb3c305ae2d1b1a.css?meteor_css_resource=true">
<script type="text/javascript" src="/a_extra_level_here/327435ecda451157c3d8a0af70c6172f58fe77cf.js?meteor_js_resource=true"></script>
I am quite new with Heroku and just deployed my sails.js on Heroku. After deployment I can open the website but I found that some of css attribution can not be presented after I deployed it on Heroku. But it is so confused that if I start it on my localhost, it works well. For example, in my custome.js, I assign a picture
.carousel-inner {
background: url('/images/banner.jpg');
these are my css files in layout.ejs
<link="stylesheet" href="/styles/bootstrap-glyphicons.css">
<link="stylesheet" href="/styles/bootstrap.css">
<link rel="stylesheet" href="/styles/custom.css">
<link rel="stylesheet" href="/styles/dataTables.bootstrap.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/jquery.dataTables.css">
<link rel="stylesheet" href="/styles/jquery.dataTables_themeroller.css">
<link rel="stylesheet" href="/styles/select2.min.css">
these are my javascript files in layout.ejs
<!-- PRELOAD SCRIPTS -->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/jquery-1.11.0.min.js"></script>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/app.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/dataTables.bootstrap.js"></script>
<script src="/js/ejs/ejs_production.js"></script>
<script src="/js/ejs/view.js"></script>
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery.dataTables.js"></script>
<script src="/js/sails.io.js"></script>
<script src="/js/select2.min.js"></script>
<script src="/js/socket.io.js"></script>
<!--SCRIPTS END-->
to my carousel-inner class, but I can not found this picture after I deployed it on Heroku. And also I used dataTable.js, but it can not work on Heroku and works well on my localhost. There are other attributes that can not been presented after I deployed it on Heroku. Is there something wrong? I would really appreciate your help if you can help me!
It's probably too late, but in case somebody else needs the solution, this is what worked for me:
Make sure your .sailsrc file has the following:
{
"hooks": {
"grunt": false
},
"paths": {
"public": "assets"
}
}
With this in place, I could see custom stylesheets both when sails app is running locally, and when it's deployed to Heroku
Check whether your css code is error free using a css validator like CSSLint. In production css is minified and uglified so erroneous code may run fine on localhost but in minified form it behaves unexpectedly.
I'm trying to use Steroids with AngularJS for an application. Below is the stuff in my head tag.
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/components/angular/angular.min.js"></script>
<script src="/components/angular-touch/angular-touch.min.js"></script>
<script src="/components/lodash/dist/lodash.min.js"></script>
<script src="/components/restangular/dist/restangular.min.js"></script>
<script src="/models/<%= yield.controller %>.js"></script>
<script src="/controllers/<%= yield.controller %>.js"></script>
Now, I can tell the scripts are working, because the Angular stuff is. But the CSS won't load at all. It's in the /dist folder under the correct location, but it just won't load. Copy and pasting into a <style> works.
Any idea how I can fix this?
Thanks!
Try removing the DOCTYPE tag on your layout html file. It is a known issue, hope they fix this problem soon.
I'm trying to use one of the styles from http://bootswatch.com/. I would like to apply the .less version of their styles to bootstrap.css. To do so I'm doing the following as described in http://lesscss.org/#usage:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="variables.less" rel="stylesheet/less">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But it doesn't work, i.e. I still have the default bootstrap theme.
To simplify I've merged variables.less into bootswatch.less, so the code now looks like this:
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootswatch.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
But still I get the default bootstrap theme.
I've checked with the debugger and all files are properly linked, so I guess I'm doing something wrong in the usage.
If you use the less files from bootswatch, I think you also need to use the less files from bootstrap. The variables.less file will overwrite the values from the original file.
What I did to make it work is download the bootstrap less files, copy the bootswatch.less and variables.less to the same folder (I renamed to variables-bootswatch.less for forward-compatibility, if bootswatch is not up to date).
Then I modified the bootstrap.less file to include those aforementioned files :
// Header and everything before variables.less
#import "variables.less"; // Modify this for custom colors, font-sizes, etc
#import "variables-bootswatch.less";
// everything else, then at the end
#import "bootswatch.less";
Lastly, you just need to import this file (no CSS)
<link href="bootstrap.less" rel="stylesheet/less">
<script src="less.js" type="text/javascript"></script>
It appears that there is one project on github that is meant to build you swatch themes : swatchmaker on github. It should produce the appropriate CSS files.
I think you need to change the order of script file as follows
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<script src="less.js" type="text/javascript"></script>
<link href="bootswatch.less" rel="stylesheet/less">