I want to make a website in bootstrap 3 with SASS, but I'm not getting proper guidance how I should start like, how to install sass, then how should I compile that, which are the exacts files I have to use, etc? I spend so much time on Google, YouTube, but except bootstrap getting other framework installation guidance which I don't want and even I'm using wamp server, so: How should I run my website through my localhost, can anyone guide me on this?
I desperately want to use bootstrap 3 and SASS, so kindly guide me on the following, I have downloaded latest version of SASS from twitter bootstrap, now
How should I start working with this files?
What step should I follow to work with SASS?
What are the steps to compile?
How should I run my website from localhost?
Kindly guide me step by step as per my query.
Have you gone through this http://www.mindscapehq.com/products/web-workbench you can download and install and then the templates will be installed.
you can then add like this.
it will automatically generates a css file with same name and will convert the saas styles into css on saving the saas file. you just need to add the .css file that was generated to the corresponding pages
SCSS file style:
.fiest
{
width:500px;
height:250px;
}
CSS file which will be generated automatically:
.fiest {
width: 500px;
height: 250px; }
Related
I have spent 3 hours figuring out what's going on but could not find it out. I am new to HTML and intellisense help me know many attributes of a tag on the go. However, with .vue files html attributes are not being shown up.
a) Attributes being shown up in "index.html"
b) No attributes hints in "TodoItem.vue"
I have already installed Vetur, HTML CSS Support and Vue VSCode Snippets extension from marketplace.
First, install Vetur extension after that go to
File > Preferences > Settings
In the list find and open Extensions find Vetur, scroll down and find Template Interpolation Service (must be checked).
I found it.
you need to install this official extension to get tailwind css hints.
Tailwind CSS IntelliSense
everything will come true
On my windows 10 machine, I'm using Git Bash, and I have a successful npm start of Webpack bundling several CSS and JavaScript files for a custom web project. But I am struggling in getting Modernizr to work at all with Webpack 4.8.3. Does anyone have any success stories on this specific implementation? Looking for any guidance. I have tried 3 different npm packages to get modernizr integrated and then working, but no luck on the latter.
Many thanks for any example steps and / or instructions.
I'm a little late to the party, but I figured I would post my solution going off of klewis' response, using webpack 4.23.1. Bear with me, as this is my first stack overflow answer 🎉.
After constructing my Modernizr build file and adding to my /src directory, instead of using the HTML Webpack Plugin, I set another entry point for webpack like so...
entry: {
bundle: './app/src/scripts/main.js',
modernizr: './app/src/scripts/lib/modernizr_custom.js'
},
Then changed the output filename to filename: '[name].js', which then the built file is with my bundle.js as modernizr.js.
That file can now be hooked into my templates: <script src="/scripts/bundle.js"></script>
Hope this solution is able to help someone else!
It appears that HTML Webpack Plugin can provide assistance with getting Modernizr wired up (naturally with a plugin, but that wasn't working for me). It took me some time to figure out an alternative approach, but here is what I did and will probably do moving forward for development builds...
Installed Webpack 4.8.3, along with the HTML Webpack Plugin, all via npm.
Constructed my Modernizr js Build file
Downloaded the file into my Webpack /src directory
Went into my weback.config.js file and told my HTML Webpack Plugin to add my Modernizr.js file like so...
new HTMLWebpackPlugin({
template: 'src/index.html',
links: [
'modernizr.js'
]
}),
Then added the necessary hook to my index.html template like so...
<head>
<script src="<%= htmlWebpackPlugin.options.links[0] %>"></script>
</head>
Finally, ran npm start
and now Modernizr is working for my web project and injecting classes into my <head> element. 2 easy steps once you have all the right dependencies and configurations set in place.
Hopefully this is a help for others.
I need to develop a plugin for Moodle, and i need to have some js and css files in plugin. But i have the next problem - how to work with them from installed plugin? Of course, i can hardcode their path via to moodle structure, but it's a very dirty and bad way. Also, i know that i can place all js and css code inline, but i think that it's a bad decision too. Is there a built-in way to serve assets from plugin? I tried to find it in documentations, but found nothing.
Thanks
I assume you want to know how to include CSS and JS files into your plugin.
You can include a JS file via the command:
$PAGE->requires->js( /relative/path/your_script.js');
You can then call a JS function once the page has been downloaded with the command:
$PAGE->requires->js_init_call ( your_JS_function_name, array_of_parameters_here, bool: on DOM ready);
For example:
$PAGE->requires->js_init_call('init', array($USER->lang), true);
Be sure to make the $PAGE available with global $PAGE;, first.
Your CSS file can be named styles.css and put into the root folder of your plugin. The file will be automatically read by the system and included. It will take precedence over (will overwrite the settings of) the system CSS files. After that you will have to reload the theme caches.
I am creating a web app using Hexo. I want to use a package called slick-carousel in one of my pages. This package also contains jQuery by the way. So I successfully installed (and "--save"ed) the package via npm. The package shows up in my node_modules folders and on my package.json file.
I expected that after doing this, I should have access to both jQuery and slick functions in my markdown files, but I don't. When I render the generated page on my browser, I am told that 'jQuery is undefined.' What step am I missing here so that I can actually use my installed packages?
Here is the script tag I added to my markdown file that I am trying to make work:
<script>
jQuery(document).ready(function(){
jQuery('.carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
</script>
I am still trying to fully grasp the relationship between installed packages and the rest of my application, so forgive me if this question doesn't even make sense. Any insight or explanation you can give me would be much appreciated!
Just because the scripts are in node_modules, doesn't mean they are automatically added to your projects frontend.
There are different ways to achieve what you need:
Manually moving the assets
Instead of trying to fiddle around with package.json and module requirements, the probably easiest way to get what you want is
moving the distribution files of jquery and slick-carousel out
of the node_modules folder into a folder where Hexo can work with
them better (after a quick read-up it should be source) then you
just link your JS file in your HTML layout and everything should work fine
Automatically moving the assets
With using some kind of task toolkit (like Gulp or Grunt) you could write tasks that automatically move the assets out of the node_modules folder inside a folder that is accessible by Hexo, a Gulp task could look something like this:
gulp.task('jquery', function () {
return gulp.src('./node_modules/jquery/dist/jquery.js')
.pipe(gulp.dest('./source/js'))
})
Using require (if supported)
I never used Hexo before, so I have no idea of it's internals, but sometimes it might be possible to just use require in the Javascript files to load modules that were downloaded, so you could use
window.jQuery = window.$ = require('jquery')
for example, to directly load the script as module.
You might need to test this yourself, but these are probably the three most common ways to handle assets in Node.js projects.
I use less.js to code my css. When I build the project (grunt-server, grunt), the grunt-contrib-less plugin converts the less.js style to my main.css file. I only include this file in my index.html.
This works great for deploying, but for developing not so much. I need to build the project or run "grunt less" to view changes of my css.
I'm guessing there is an easier way of doing this, but i'm new with the grunt en yeoman stuff so I don't know where to look.
I recommend using grunt-contrib-watch, together with grunt-contrib-less.