I'm totally beginner, and I was wondering about page management in my folder. I'm creating a website that has 5 different pages, that are all located in the same folder. By the way I'm using sass for my css.
At the moment, I only have 1 css file, that was designed originaly for my first page. But now that I'm doing the 4 others, I'm wondering if :
is it ok to create as many css file as I have html pages ? In my case I'd have 5 html page and 5 css.
I don't know how to manage my sass : should I create 5 different package.json files ? Or I can create 5 different scss files, that would be compiled in 5 different css files ? In this case should I create 5 different scripts in my package.json file that would indicate for each scss file the right css file ?
Sorry if my questions are not clear , as well as my english. Thank you so much guys.
I am no expert in sass but I can give you the CSS file management for your HTML file. By the way everyone will have their own suggestion. Create a common CSS file. In this file you will add your default theme for all pages. Then connect it with all the HTML files, And finally for individual CSS for each page, do it in the style tags in your HTML pages.
I don't know a lot about sass either, but for CSS, I would recommend creating one CSS file for all of your HTML files. Then, you can create a base style for all of your pages (styling that's the same for all pages). For individual CSS (CSS that changes per page), you could:
Use classes
Put your individual styling in the style tag in the head of your html page
I think using classes is easier, especially if you have a common style for all of your pages, but it's up to you. Hopefully that helped!
Related
is it possible to have a website that contains 2 app.css files?
I have a website and want to build a new (but related) website under the same domain. So I guess you can consider the main hub more like a landing page of sorts, and then the two related "websites" would then branch off of the main domain. Each of the websites are going to be styled differently though. So I'm unsure of what is best - to create a single combined app.css file and list each style according to each website, or can I create a new one that sits beside the original?
You can do a separate css file for each site, or have them both point to the same file. Since you want different styling between the 2 sites, I'd recommend a different css file for each site.
You can create and use as many css file as you want. If both sites will be style differently, create a file (or even multiple files, them import) for each site.
Though the websites are related, it's better to create two separate css files as it will be easy to make changes(in future) to styles and debug incase of any issues. It also increases readability of the code so that in future if you may have to refer this code for any modifications, you can understand it easily and make required changes :)
I have been tinkering with joomla recently.I was able to change css style using chrome dev tool, which helped me locate the css code that is responsible for the style I inspect. Now I want the same for html codes. The template that I'm using has an offcanvas menu, and when I inspect it, I can see the codes that form the menu, and I want to modify them, as I did with many css codes, however there is no locate or open containing file for html elements. Is there a way to do this? Since I did not write this template, I don't know which is which and where. Many thanks.
You could use Joomla layout overrides to achieve what you describe, check out this link for full details:
https://docs.joomla.org/Understanding_Output_Overrides#Module_Layout_Overrides
The idea is that you move a copy of the module file you want to modify to
/templates/your_template/html/ and Joomla will override the original output with the output from your custom file. You can do the same with components and plugins, it's really powerful.
Another reason that overrides are the way to go is that there's no risk that you'll loose your changes when you update the extension you are customising.
If you Google Joomla overrides you'll find other resources and once you get started you'll find it's surprisingly easy :)
Good luck!
I don't recommend editing css or html in Joomla via the dev tools, because of the problem you're having - sometimes it's hard to know what(and where) exactly you're changing something.
If you have access to the file for the template it should have a pretty straightforward file structure, i.e. all the html is in a html folder, the css in a css folder etc. Learn more here.
I recommend locating those files and editing them with a text editor.
To make a file depends on the framework you add one to Joomla template is not used.
But in all cases you index.php is a file that can address the heads of a css your new address
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
I made a remake of an older website which used tables for everything (structure and content). Now I did it in a (hopeful) "more modern way". All basement-things are div's now, but in my content I still use tables because I always have to display stuff as a table, and why I shouldn't do this with the table-tag?
Anyway, now I'm about to sort the CSS stuff, and try to organize it in a efficiency way. How do you do this ? ...
I got a main.css which should store all stuff which is used more then once in different files
One css file for each page in case that I have to edit some stuff written in main.css
but what if I got the CSS tag input { width: 150px; } in main.css, and input { width: 100px; } in idontknow.css. It works (that on idontknow.html the input is 100 isntead of 150 px, but is it a way modern web-developers do?
What about having a central point for maintenance which could mean placing all stuff in one CSS file?
First of all, if you want to build a modern website from my points of view, you should definitely use CSS Preprocessors like SASS or LESS.
I suggest you to use Foundation Zurb Responsive framework. It's mobile first, because every single modern website should be responsive. It uses SASS and there are 3 ways of getting started using it.
SASS allows you to create and separate your styles for each page, without messing them together. So basically you will have _home.scss, _header.scss, _footer.scss, but when you compile - you will have everything created in one style file. Additionally CSS and JS can by minified as well.
I suggest you to start with - SASS
After that to get yourself familiar with Foundation
You could use something like SASS/SCSS (http://sass-lang.com/) to work organized with your stylesheet files, and compile them into a single main.css for the production site.
In development, it is not necessary to have quick loading times, but on the production site, a single CSS file will speed up the loading process of the page.
You could use SASS.
But...
Have you heard about web components or Polymer-project?
https://www.polymer-project.org
The main idea is make use of styles and scripts inside each component, so that you could have the right place to put your styles and also, for the purpose of web components, reuse your components (new html elements in Polymer) anywhere in your html files.
And of course you could have a main.css for the whole page.
You should try to have only one Stylesheet in the end. It´s just the best for the performance of your website because it saves one request.
You can achieve that by using classes and IDs. As Pete mentioned you can also target body-elements with a class or an ID. And you can also give Elements multiple Classes.
If I navigate the website I'm developing I can keep track of any CSS directive that is being used in that page.
For example I could associate the directive written at line 1 of main.css to the page Index.htm
I've got a CSS file which is 4000 lines and I would like to split it.
The best way would be to separate it for pages.
Every CSS instruction which is specific to only one page could be moved.
How could I accomplish this task?
You could use a tool like uncss for every page in the app and diff the outcome to see what has been removed/not used on that page.
Edit:
You could automate the process a bit more using Grunt with grunt-uncss or Gulp with gulp-uncss. However, I am unsure about the diffing part.
You would need to copy them to a new css file, I would suggest naming each CSS file with specific naming for what the code inside actually does, such as you could have a layout css file, if all pages have the same basic layout. If particular pages have a large amount of css that is only used by them you could consolidate that all into one file. You would need to do full testing once done to ensure all pages have the cs files they need (and none they actually don't need). with 4000 lines it will be a large task but will be far more manageable in future upgrades/revisions