I just want to ask what is the best approach to integrate sass/scss on ember project?
Currently my project is in pod structure and I just import style.scss on main app.scss under styles folder.
Is it fine or there is a better approach?
--- app
---- pods
------- home
---------- template.hbs
---------- controller.js
---------- style.scss
---- styles
------- app.scss
Then in app.scss styles imported look like this
#import "./app/pods/home/style.scss";
I haven't used pods in years - because (like expecting controllers to be removed) - I was told that there was going to be a new file layout system. Since hearing that / I've heard bits and pieces of conversation that lead me to believe that pods aren't really a go-to for new projects.
That being said, I share your desire to have a nice file structure. I'd love to 'drag' a folder from one project to another / and just have all the parts of the component copy over.
Since we have the app.scss - (you said you're using sass) - / that kinda acts as the index.
I include resets and mixins and a bunch of stuff for setup. - so, that's not really podish... and maybe there are 'page' level kinda layout... which doesn't really fit either... - so, what it comes down to is really 'components', right?
ember-component-css is pretty cool - but it also has some opinions that could clash.
There's this - https://github.com/justtal/ember-cli-sass-pods - but it's 4 years old / (but so are pods) - so, it might still work great.
Because there isn't a really clear path here... I just create a component folder in styles/components/component-name.styl - and then in my styles/components.styl I #import 'component-name.styl - and then in my app.styl I import the components...
In my case / I actually like to use the cascade - and I need the files to all to be combined - in order. I can't have some of it in the vendor file.
It's not ideal (just because I have to create each file explicitly and register it) - but I can't afford to just keep wishing there was a better file layout.
Instead of fuzzy searching component-name > template
I just search template > component-name
¯\_(ツ)_/¯
I wonder which style will cause me less pain in future transitions. They'll offer codemods to help / but they can't account for unique configurations.
I'd suggest asking this in the official discuss forum. You'll get the real answers there. : )
https://discuss.emberjs.com/
app/styles directory, is the home for stylesheets like CSS, SASS, or LESS.
Folders like vendor and public that can also hold many other files of the developer's choice.
So in your case if you wish to have separate scss file for each pod,
you can put it in the place as you mentioned. (else)
have it under app/styles/pod1.scss and import it under .ember-cli-build.js -> app.import('app/styles/pod1.scss')
[References]
You can get the detailed view of Project layouts, Stylesheet compilation, Assets and dependencies below
Project layouts
Stylesheet compilation
Assets and dependencies
Besides ember-component-css there is ember-css-modules.
Both addons try to achieve about the same goal, however I really prefer ember-css-modules.
That addon has an addon called ember-css-modules-sass. Both together will easily allow you to write one sass file per component.
You just place a styles.scss file in your component pod (app/components/my-component/styles.scss and then use local-class="my-class" instead of class="my-class" in your template.
Your classes in your scss will be automatically namespaces.
Related
I want to load local 3rd party css (eg font-awesome icons) as part of my styleguide. As many components uses the same CSS, I want it to be loaded automatically and included as part of the static build.
I settled on using mini-css-extract-plugin to accompolish this, but styleguidist maintainer #sapegin basically told me that I have no idea what I am doing and stop complaining to him without providing any help. So I was hoping the stack-overflow community would give me a hand in pointing out what is the correct way:
styleguidist discussion: https://github.com/styleguidist/react-styleguidist/pull/985#issuecomment-389422909
My github repo demonstrating the three ways of doing it:
https://github.com/bugzpodder/styleguidist-local-css-example/tree/master
master: uses mini-css-extract-plugin + require config, build and devserver works as expected.
require: I couldn't get it to work without mini-css-extract-plugin
template: devserver works, but build does not. The only workwaround I can think of is to use publicPath and copy the css there, but publicPath isn't allowed unless you dangerouslyupdatewebpackconfig https://github.com/styleguidist/react-styleguidist/pull/956
By default ember-cli seems to be set up not to compile css files into one (as it does with the JS files).
What is the best way to configure ember-cli to merge all files in app/styles (and subdirectories) into one app.css file (and then fingerprint etc)? Is this possible via the Brocfile or do I need to override EmberApp.styles()?
Update: As far as I can see there are the following (not very elegant) options:
1) Using SASS and #import the CSS files into app.scss individually. The downside of this is that I need to use an extra plugin (SASS) and that SASS does not seem to allow for globbing patterns in #import (e.g. #import('**/*.scss')), which makes this solution cumbersome for big projects.
2) Overriding EmberApp.styles() such that it does not copy the CSS files (this is currently being done by a wrapper around broccoli-static-compiler) and configuring Broccoli such that it concatenates the css files into app.css. This solution seems a bit hacky though and there is a risk of incompatibility with newer versions of ember-cli.
3) Workaround: Use broccoli-funnel and broccoli-concat to do the concatenation yourself.
In Brocfile.js:
var appTree = app.toTree()
var concatenated = concat(appTree, {
inputFiles: [
'**/*.css'
],
outputFile: '/assets/app.css',
});
module.exports = mergeTrees([appTree, concatenated], { overwrite: true });
This will create a new app.css with all our concatenated CSS in /assets/app.css.However, this file not fingerprinted. Our assets directory now looks something like this:
/assets/app.css
/assets/app-<fingerprint>.css
So a - admittedly hacky - second step is to 1) get the filename of the fingerprinted app-<fingerprint>.css, 2) delete app-<fingerprint>.css and 3) rename app.css to app-<fingerprint>.css. This last step can be automated using Grunt or gulp.
Personally, I think SCSS would be the way to go. It is the simplest solution and there are other advantages to using SCSS besides importing things into one file (variables for repeated patterns, for example).
In addition, manually adding files allows the developer to configure exactly where each piece of code is included. I don't see that as a con, but I can understand the other point of view and I've definitely spent 5m trying to figure out why my styles weren't being applied until I realized it was because I didn't include a new style file.
Edit: There are some node-sass globbing solutions available that could probably be added if that is a big show stopper.
I've got a Django project spinning up where it would be great to have the UI in lots of color schemes based on the users' school colors. I have this fantasy of having a base variables.less file along with a bunch of other .less files that compile into style.css.
But once a user sets their school colors it generates a blue.variables.less file (if they've selected the blue preset) or school123.variables.less file (if they got all fancy and used the color picker to make their own color scheme) and then compiles everything to blue.style.css or school123.style.css and then that's the .css file we load when we serve the page.
I can imagine lots of ways for this to fall down. Like how do I reprocess all those files when I push an update to forms.less or layout.less.
Is there a better way to do this? I Googled my fingers raw but haven't found anyone attempting this madness.
There are quite a few ways to accomplish your goal of being able to have user specific color schemes, but they each have their advantages / disadvantages.
I'm assuming you are using some framework like Bootstrap with the files that you name.
Option 1: Inline CSS for color-specific styles (Preferred)
This is my preferred option due to performance and simplicity. You can store each of the customized colors for each user, or even creating a model so you can reuse colors that represent a specific school. It's stored in the database and can scale to an very large number of color schemes without generating a lot of very similar files.
Create a snippet in your template code that has any style that uses the color variable.
base.html
{% include "color-snippet.css" with main-color="{{ user's main color }}" alt-color="{{ user's alt color }}" %}
color-snippet.css (note this file will be in your templates directory as it's being handled by your template engine
<style>
.some-style {
color: {{ main-color }} !important;
}
</style>
So the big downside to this is you'll need to customize Bootstrap beyond the variables.less. You'll need to grep through the less files to find all the classes that would be generated, and copy the style to your snippet in css and not less. It'll take some investment up front and work when you want to upgrade to a newer Bootstrap, but it'll allow you to separate the color part of the styles to be derived dynamically at runtime.
I prefer this approach since you don't have to deal with compilation of less outside your collectstatic step.
Option 2: Client side compilation of LESS
You can have Django serve a file that is dynamically created and returns the variables you want. Then you can have less.js compile it on the client.
This would involve adding to your base template a url path that is handled by Django that isn't part of your static path (e.g. /style/variables), creating a handler in views and then returning text content that would be your less file variables.
Option 3: Server side compilation of LESS
I use Django Pipeline to do my server side compilation of less to css. It takes some setup to get working with your Django application. In development mode, Django Pipeline will compile on every request the associated less files into CSS files. In production mode, it'll point to the appropriate file path to the compiled file. It hooks into collectstatic so your less gets compiled when you collectstatic.
The biggest problem with this approach is that the mapping for your static files (what less + css files compile to css) is defined in your settings file. This requires a server restart when you update this. You could base your own server side less compilation off how Django Pipeline works but have logic for the mapping instead of defining it in something that requires a server restart.
It's a lot of work and the less compilation of Bootstrap is non-trivial to have to do on every request.
If you created your own mapping that doesn't require you to restart your Django server process, you could always just run collectstatic to create the new css files. This would avoid compilation at every request.
While this last approach is closest to what you mentioned, it seems a lot more work and error prone than just separating the color-specific styles and using django templating to customize it.
The last approach as well works well if your number of schemes is rather low since you can just create all the mappings ahead of time and not let people generate their own at runtime. They can suggest them and you can just update them at some regular cadence.
we are planing to create a CMS with zf2 and doctrine orm .
actually we are concern about our cms templating
we want our system works with several templates and easily change between themes via admin
and creating a new templates should be easy for end-users developers
we want an advice or suggest for how to build templating system that :
there is a core module and there a lot sub modules with their own phtml
so where to store theme1 phtml and where to store theme2 phtmls ...
any suggest or advice please
thanks
I encourage you to take a look at Twig, its the best template engine I have seen so far :) It does take some time to learn Twig syntax, but its well worthy if you look at what you get :)
I cant yet write comments, so I wrote this as an answare.
Hope this helps. Trust me, the Twig is the way to go. Joust look at his documentation for more specific details how to use it!
EDIT:
The problem you are trying to solve has nothing to do with template engine. You can do that with any template engine. You can do it even with plain PHP if you want.
I built web application where users can register, get their own sub domain, and there they can build their webpage. Change theme, edit text, add pages. Simple CMS functionality.
The easiest way to do this is to have themes folder, where you would store themes, like this:
themes/
- themeBlue
- css/
- images/
- js/
- html or views/
- themeRose
...
Now this is where you would place all your themes, every theme has its own folder with images, css, js files...
And then you would have users, and every user would be able to choose and change theme.
That information would be stored in database. You need to store that user Jack is using themeBlue. You can do that as you want. You can event put this in users table like user_theme column.
Now when someone visits site, you first query database to see what theme is that user or creator of web using. And then you load all that files from current theme folder. And populate html files with data stored in database like in any other CMS.
This is the simplest implementation. You could for example, store css and html files in database :)
Hope this answers your question.
Good luck with that, I almost gone mad building my system :) I ended up with writing my own PHP MVC Framework joust to accomplish what I wanted.
if you activate another module in the application.config.php which has the same views and layouts (same folder structure and filenames) it's viewscripts and layouts will automatically be used when it's loaded after your core module.
so you could simply make your application.config.php dynamic to load the active template module which only contains the view folder. this would be a simple and effective solution without any other libraries.
additionally you can use an asset manager like assetic to also provide images, css etc. inside of your (template-)modules. (have a look at zf2-assetic-module, I wrote my own assetize-module based on assetic to fit my needs...)
Sina,
I do this in my Application->Module.php onBootstrap
$ss = $serviceManager->get('application_settings_service');
$settings = $ss->loadSettings();
$serviceManager->get('translator');
$templatePathResolver = $serviceManager->get('Zend\View\Resolver\TemplatePathStack');
$templatePathResolver->setPaths(array(__DIR__ . '/view/'.$settings['theme'])); // here is your skin name
$viewModel = $application->getMvcEvent()->getViewModel();
$viewModel->themeurl = 'theme/'.$settings['theme'].'/';
In this situation I have this structure in my view folder
view/
default/
application/
error/
layout/
zfcuser/
red/
application/
error/
layout/
zfcuser/
The $viewmodel above injects a variable into the layout for the themeurl in the public_html folder /theme/red/ with all assets for red
Access in layout.phtml -> themeurl;?> in a viewscript layout()->themeurl;?>
I am still working out my Dynamic Views. Right now I have a BaseController and all my ActionControllers extend it. It has a render() function that builds the required views but not sure its going to be scalable hoping to try some placeholder ideas.
application_settings_service is a Settings Service that gets settings for whatever domain was used to call the system and builds an array accessible via any service aware part of the site. Thats a whole different post and it may or may not rub MVC peeps the wrong way
I know your question is marked answered just thought I would share
Eric
where to place the js_plugins and css_plugins?
I want to create a html/css template.some css files and are coded myself,such as
css/my.css
js/site.js
but sometimes I want to use some existed css or js plugins from other people who had shared on web,such as
1.some plugins only have css,no js needed. (ex:css3_button.css)
2.some plugins have both css and js. (ex:jquery.prettyphoto.js && jquery.prettyphoto.css)
for these plugins ,where should i put them in my template folder?
i do it like this bellow, but i don't think my structure is good enough.
index.html
css
....my.css
js
....my.js
css_plugin
....css3_button
........css3_button.css
js_plugin
....jquery_prettyphoto
........jquery.prettyphoto.css
........jquery.prettyphoto.js
how to place these files, to ensure the easy managing in the feature?
I use static folder, which includes folders for CSS, images and JavaScript. You can also add a folder for your plugins, where each plugin will be in its own folder.
You can replicate your general structure inside each plugin folder, but most plugins come pre-organized, and changing their structure is not always easy.
example
index.html
static
...js
...css
...img
...plugins
......myFavoritePlugin
.........css
.........js
.........img
......myFavoritePlugin2
.........css
.........js
.........img
Keeping the plugin files together makes their maintenance easier, but it affects performance. It is best practice to combine CSS and JavaScript files when deploying on production machines. You can have best of both worlds if you use build scripts, such as ant