I was trying to achieve this using Webplate, but I decided that I need to force myself to learn bootstrap. I'm using a clean, empty dist and I want to emulate the effect that webplate framework offers by default
Responsive background image for the intro of a single page website.
The best example I found online is this http://creativedistrict.com/
I'm looking all over stack for examples but can't find any. If I can get some help, at least direction, I would appreciate it. I'm a novice, that's why I'm asking.
If you think of the Bootstrap framework as a bunch of CSS and optionally JS, then in theory it's not too difficult to combine with something like Webplate.
To add the CSS and JS files, you could download Bootstrap, grab the files you need, add them to your Webplate project files, and then link to them in the head of your Webplate document.
Alternatively, http://getbootstrap.com/getting-started/ has details on where to get CDN versions of these files so that may be simpler for you.
Once you have the Bootstrap CSS and JS linked into your Webplate page, you are good to go. If you check out the Bootstrap website you'll find plenty of code you can copy and paste.
When combining different frameworks like this, you need to use some caution because of CSS or potentially more serious JS conflicts. I did some quick tests using the Webplate download from http://getwebplate.com/#download and using the Bootstrap CDN links of
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
and
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
The CSS seemed to be fairly compatible, the JS might take a bit more work.
Good luck!
Related
I want to move my existed web app to mobile platforms. How should I transfer my existed css file to React Native css?
Is there any way to do this directly in the app logic, or I should use builders like webpack, if it so, which plugin do I need to use? Or maybe there is some packages for IDEs like Webstorm or Atom?
Any tip will be helpful, just not to do this manually.
There is nothing built into React Native to turn CSS into RN StyleSheets. React Native has a different set of attributes that is supports and some of them behave slightly different from their counterparts in CSS. That said I have a few suggestions for paths forward:
Rewrite your css as StyleSheets as Sintylapse suggested covered here
Use a third party transpiler like this one to convert yous css to React Native StyleSheets.
Write all your styles inline with no stylesheets.
I would recommend the first option if you intend to work on this app or React Native in general for a while. Though it may be a bit rough to learn the syntax and how to write your styles, in the long run you will become more proficient than you would with the other methods. If you are looking for a good place to start with stylesheets this blog post looks promising. The transpiler could work but since it is a third party project I wouldn't be surprised if you ran into a bug and had to comb through generated code to find what is wrong. Writing styles inline can help prototype but it will not make it easy to maintain your app in the long run.
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.
I am using yui2 (I know it is archived now but I had hands on experience with this version and did not have time to learn yui3 due to tight deadline) in some of the pages of my project.The pages without yui listing are made responsive for mobile view using responsive css.But now the pages with yui2 design are not responsive.I want to know if I can add lines of code so that it can become responsive.Please help.
YUI or not, you can use Pure CSS grids: http://purecss.io/grids/#pure-responsive-grids
I found the solution:
follow steps given here:https://css-tricks.com/responsive-data-tables/
in the css provided replace table,td etc with #uryuidivname table,#urdivname td
Sorry this will obviously be a beginner question. I have Angular up and running fine within a Grails application. Now I have defined a directive that is effectively a control needed. This directive uses 'templateUrl' - that also works fine.
However, this is the simple part that I just don't know. Where would I put includes to javascript libraries that are only needed by the directive? That is, statements like:
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
I have put them in the main page for now, but that doesn't seem quite 'right'. These are dependencies of the directive, not of the page. From a maintenance perspective, if that directive were ever removed due to changes, how would anyone know to remove the other links?
Note: my directive is already in an open statement - if that matters.
This is a larger question of dependency management. There really are 3 routes for doing this:
Include it in the main index.html (like you did) and declare it as a dependency in your docs. Feel ugly? Sure. But it is how a lot of stuff is done.
Use requirejs http://requirejs.org It is a module loader, and so at least the code itself can explicitly declare its dependencies.
Use browserify http://browserify.org It is also a module loader, but following UMD/CommonJS, exactly like in node.
I started with #1, then #2 for a while, but recently shifted to #3. The files are cleaner, and using npm makes managing the dependencies far easier.
Loading all external resources inside index.html is the common approach (SPA load all its resources once), but its not a must.
Inorder to achieve your goal you need to use external tool, we use RequireJS (Browserify is good as well) this way you can control the sources you load into the page.
Checkout this:
RequireJS official site
Using RequireJS in Angular Applications
I'm looking for a way to organise my js and css libraries in CakePHP 2.4.1, but I cannot seem to find the best way to do it.
In my layout.ctp is a section where all js and css libraries are included. However all libraries are loaded on every page while only some should be loaded per page.
I could define the required libraries in the corresponding controller, but I don't think this is a good MVC practice.
Hope to hear some good advice.
You can load scripts and css on demand directly in the view file.
That way, you will only load in your layout the scripts and/or css needed for your view.
As described here in the documentation : using blocks for scripts and css files
It depends on how much js / css you have. If it's not a huge amount, you should concatenate / minify all your js / css into a single file, and just include that on every page. I use Codekit for this. Mark Story's asset compress plugin is apparently also good, though I haven't used it.
Minified JS / CSS is pretty small.