I have 3 css files with me:
skeleton.css
base.css
layout.css
What I want to do is make my web site responsive.
For this, this css files are going to be used in order to make my site responsive.
I have gone through all of the 3 css and it contains media queries and many more.
I want to now that how to use or embed existing style.css with media queries?
how to apply media queries ?
and where to aply media queries?
Skeleton is a responsive CSS framework that works really well. Your best bet is to review the code on Dave's website at http://www.getskeleton.com/ - the code he has posted is very helpful and will give you a great start. I started with Skeleton (http://72t.net) and later moved to Bootstrap.
With all that said, depending on how the code was originally written, it may be a real task trying to convert an existing website to a responsive design. I have now done (or am doing) 4 responsive sites - in each case I found it easier to start from scratch - the original sites were done in Asp.Net with its appropriate bloat. the new sites are html5, CSS, JQuery and Ajax.
Related
I have a website under development built with Nuxt.js.
It works really great but since the first loading takes a couple of seconds, with a blank page, Google PageSpeed insights are really poor for mobile.
Test website here: http://eventscace-354711072.us-east-1.elb.amazonaws.com/
They claim the initial painful content is taking 10 seconds or more.
I’m pretty sure it is related somehow to the loading of VueX. So
I was wondering if there is a way to speed up or put something in that white page at least while it loads.
Thanks a lot!
Just ran your site through https://webpagetest.org and it shows nicely where it spends the time. I just noticed:
loading jquery multiple times (why jquery with vue in the first place?)
big and many css (purge-css?)
you are loading a lot of fonts
third party JS after loading GTM
run nuxt build with analyze set to true and see where the big JS is in your app
image size?
Anyway, many small steps I think.
I am using elm-ui. The header feature is amazing, but does not seem to be responsive by default. I don't see anything about responsive design in the documents. Is there a way to implement this feature within the elm-ui ecosystem, or do you need to integrate it into bootstrap or something responsive?
I did a bit of digging around the elm-ui github repo, it looks like indeed there is no answer for the responsive bit. And in general, elm really doesn't have an answer for responsiveness (Excluding elm-style-elements). I'd reccomend using media queries.
Check out this article to get started.
Easy question, but I am a newbie:
Can someone tell me what CMS (like, uh, Wordpress) these two web sites use to make their slick designs:
http://annalisanatalimurri.com/
http://www.clarissabonet.com/
I've been mostly working in Wordpress, but seeing the simplicity of the code underneath (using Inspect Element) is convincing me to work in this medium.
You're able to design pages like that in practically any CSM that lets you style/write themes with CSS. If you don't want to write CSS and still use wordpress you can find simple and clean themes in the wordpress themes directory: https://wordpress.org/themes
I am converting a good old ASP.Net website to a single page application using Ember.js in a ASP.NET Web API project.
All the devs of my team and myself are pretty new to javascript. We spent the last 2 weeks learning the basis and comparing SPA frameworks. I apologize in advance if my question sounds stupid :)
All the Ember tutorials I have found so far included all Handlebars templates into one single file. I assumed it would be pretty obvious to split them into separates files (*.hbs) when the time would come, but it's not. I might be totally missing something here, but I found about 4 ways to get my templates back when I need them. I'd like to know which method you would recommend:
Concatenate and then inject all the template files when the app loads. I could write some C# code on the server-side that concatenates all the templates files into a single one when the app loads (i.e. each time a visitor enter the app). It seems odd to me, in terms of processing, but also because the generated HTML file will be pretty heavy.
Load each template dynamically via Ajax when I need it. Pretty much what is done here. I kinda like this solution even though I haven't tried it yet. It makes sense to me to get asynchronously a template when I need it instead of loading the entire app on the first load.
Use the Bundling mechanism of Asp.Net MVC. I found stuff like csharp-ember-handlebars to precompile the templates on the server-side and return them as a single javascript file. It works-ish but I feel like the precompiled file will become pretty heavy as I add new templates.
Use Grunt with the plugin grunt-ember-handlebars to precompile the templates. I'm not familiar with Grunt but if I understand well all the devs working on the project will have to install Node.js + Grunt + learn how to use a command prompt + remember to run the command before each commit (if they modified a template). This is not obvious for the web designers. And adding grunt to the build actions will require the entire dev team (working on other projects) to have grunt on their machine (not acceptable).
I need to find a simple and elegant solution to address this issue. My project is in a solution with 35 other projects and I cannot add too much complexity to the build, neither depend on unstable libraries. Maybe I have been too optimistic when I thought I could use Ember for my project. Any suggestion would be welcome!
Your #3 is the most ideal (and common) way that I've seen applications handle templates. With a compiled and minified template file you really don't have to worry to much about performance problems in regards to adding new templates, especially if you take advantage of caching.
One benefit to having the templates compiled and available off-the-bat is that users only need to Download Your Resources Once™, as apposed to downloading resources for each subsequent page load. This leads to a fantastic user experience.
I am trying to build a CRM tool for a particular niche. I'm a complete newbie. This will be my first app. My only programming experience is with VB and MS Access, so RoR is presenting quite the learning curve. I have worked through the first version of Michael Hartl's Rails Tutorial. (And actually absorbed about 10% of it)
I bought a Themeforest bootstrap admin theme and have two general questions on it:
1) The theme has some PHP code in it. I'm assuming that I should re-write this code in Ruby, right? The code mostly controls things like file uploading, etc.--things that could be re-written in Ruby by an experienced programmer rather quickly (for me, it will take months :)
2) The theme contains a number of different pages. For example, one page is a dashboard, and another is a calendar. Both of these pages have a lot of duplication between them - all the main control buttons, etc., stay the same from page to page. In the theme, each page is a different HTML file where all of the code is simply duplicated. I'm assuming that I'll want to set up some sort of template system in Rails so that I don't cut-and-paste code between a bunch of HTML pages, right? (If I change a main button, I only want to make that change in one place, rather than in each of the 20 HTML files that came with this theme.)
1)
I'm not absolutely sure if there's no other way, but it's most likely the easiest solution.
If you have to rewrite stuff that's common in web apps, like file uploading, there is usually a gem to help you out, so you don't have to do everything from scratch. I can recommend the paperclip gem, Railscast for file uploading, since we use that in our own project.
Note: The Railscast is out of date, so the installation stuff is no longer accurate. Also, paperclip requires ImageMagick to work.
Railscasts also cover lots of other useful gems. If you need to find something specific, just google it. The github page then usually reveals if a gem is still maintained or if you're better off with something else.
2)
Rails prevents duplicated code with partials. Here's the Railscast (syntax might have changed since 2008). Partials let you place code like headers, or buttons in your case, in a file, which can then be rendered in any of your views.
Unfortunately, I can't link the other stuff like the github page and Rubygems.org because I lack the reputation. I hope this still helps a bit.
Extract the common elements of the theme into your application layout.
Extract the modular sections of the theme into their own controllers and actions. For example, create a calendar controller for the calendar section, the actions that appear in the calendar controller will be the views that support the calendar. You can also use partials (views that start with '_'), without having to create a controller action. But if there is data that needs to be sent to the view, it is better to stick with normal controller actions and views.
As for the php code, get rid of it, move as much logic as possible into your model and controllers, with preference to putting in your models. As hobo suggested, check out gems to replicate the functionality of any complicated php code.