{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/159","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy…","fields":{"slug":"/engineering/create-a-loading-spinner-using-css/"},"html":"

Hey there, yogi bear. Tired of creating gifs? Seriously, that takes time and most of the time it has a huge file size and a crappy resolution. What if you can create a gif(ish) element out of CSS? Because you can.

\n

CSS has come a long way we can now create our own GIF-ish contents and the best part, we have full control over it.

\n

\n \n \n

\n

Great, how do I do it?

\n

First things first, we need our html structure that will hold all the things we need. There's the container:

\n
<div class="container"> <!--There's the container that centers it-->\n    <div class="spinner-frame"> <!--The background-->\n        <div class="spinner-cover"></div> <!--The Foreground-->\n        <div class="spinner-bar"></div> <!--and The Spinny thing-->\n    </div>\n</div>
\n

Easy, right? Now we need to add them styles to our html's.

\n
.container {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    text-align: center;\n    background: #eee;\n}\n.container:before {\n    content: "";\n    height: 100%;\n    display: inline-block;\n    vertical-align: middle;\n}
\n

Since, it's a spinner and normally covers the whole page. The combination of \"position: fixed\" and bottom, top, left, right as 0 will do that for you. ( We don't want the users to click everywhere, right?).

\n

The :before pseudo element will help you center the spinner correctly (without the help of negative margins). How? If you look at the container class, it has a \"text-align: center\" which aligns inline elements like the pseudo element :before. But, we need to add height on that thing and inline elements do not like that. So, we need to change the display from inline to inline-block and add \"vertical-align: middle\" so it aligns vertically.

\n

Now the for the fun stuff.

\n

We need to style the spinner frame.

\n
.container .spinner-frame {\n    display: inline-block;\n    vertical-align: middle;\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n    border: 5px solid #fff;\n    padding: 10px;\n}
\n

A couple of things here. Since it's a DIV, by default it's a block element. We need to change that to an inline-block so it accepts the text-align and centers itself with the :before pseudo element. Then add a \"vertical-align: middle\" and viola!! Centered!

\n

A spinner won't be a spinner if it's not a circle. A 50% border-radius will work properly if you have a perfect 1:1 ratio. Now we need to push everything inside (and automatically center it), adding consistent padding will do that for you.

\n

Now for the foreground or spinner-cover.

\n
.container .spinner-frame .spinner-cover {\n    background: #fff;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    position: relative;\n    z-index: 2;\n}
\n

This will add a white cover on top of the spinner and hide everything that we don't need inside it. You know what they say... If you can't remove it, hide it.

\n

For the spinny thing:

\n
.container .spinner-frame .spinner-bar {\n    background: #29d;\n    width: 50%;\n    height: 50%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: 100% 0 0 0;\n    -webkit-animation: spinny 2s linear infinite;\n    transform-origin: 100% 100%;\n}\n@-webkit-keyframes spinny {\n    0% {\n        transform: rotate(0deg);\n        background: #29d;\n    }\n    50% {\n        transform: rotate(180deg);\n        background: #00427c;\n    }\n    100% {\n        transform: rotate(360deg);\n        background: #29d;\n    }\n}
\n

This one needs more advance CSS in it because this is the only thing that moves.

\n

We need to tell the element that the center point is not on the center of the element but on the bottom right edge where it spins. The CSS \"transform-origin: 100% 100%\" will do that easily for you.

\n

Since it's an animated element, overflow hidden (for some reason) doesn't work on this guy. So, we need to curve to top left part of it. The CSS \"border-radius: 100% 0 0 0\" will do that for you.

\n

We also need to push it on the top left where it starts spinning \"position: absolute\" with top and left 0 will push it there.

\n

Now we need to animate it using key-frames. From 0% to 100% the \"transform: rotate()\" from 0 degrees (0deg) to 360 degrees (360deg) will rotate it forever. FOREVER!

\n

A tutorial wouldn't be complete without a demo.

\n

See the Pen azVwqj by Darryl Tec (@notdarryltec) on CodePen.

\n","frontmatter":{"date":"May 05, 2015","updated_date":null,"description":"Learn how to create a loading spinner using CSS","title":"Loading spinner using CSS","tags":["CSS","Loader"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/8b9b7fd9f1449699b8c7a09b270a185c/7d145/css3-loading-spinner.png","srcSet":"/static/8b9b7fd9f1449699b8c7a09b270a185c/69585/css3-loading-spinner.png 200w,\n/static/8b9b7fd9f1449699b8c7a09b270a185c/497c6/css3-loading-spinner.png 400w,\n/static/8b9b7fd9f1449699b8c7a09b270a185c/7d145/css3-loading-spinner.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Today in the market various type of Database options are available like RDBMS, NoSQL, Big Data, Database Appliance, etc. developers can get…","fields":{"slug":"/engineering/relational-database-management-system-rdbms-vs-nosql/"},"html":"

Today in the market various type of Database options are available like RDBMS, NoSQL, Big Data, Database Appliance, etc. developers can get very confused with all the choice. They do not understand why they should consider a newer, alternative database when RDBMSs have been around for 25+ years. However, many big enterprises are already using alternative databases and are saving money, innovating more quickly, and completing projects.

\n

Relational Database Management System (RDBMS)

\n

RDBMS Database is a relational database. It is the standard language for relational database management systems.Data is stored in the form of rows and columns in RDBMS. The relations among tables are also stored in the form of the table SQL (Structured query Language) is a programming language used to perform tasks such as update data on a database, or to retrieve data from a database. Some common relational database management systems that use SQL are: Oracle, Sybase, Microsoft SQL Server, Access, etc.

\n

Features Of RDBMS

\n
    \n
  1. SQL databases are table based databases
    2. \n
  2. Data store in rows and columns
    3. \n
  3. Each row contains a unique instance of data for the categories defined by the columns.
    4. \n
  4. Provide facility primary key, to uniquely identify the rows
    5. \n
\n

Limitations for SQL database

\n

Scalability: Users have to scale relational database on powerful servers that are expensive and difficult to handle. To scale relational database it has to be distributed on to multiple servers. Handling tables across different servers is difficult .

\n

Complexity: In SQL server’s data has to fit into tables anyhow. If your data doesn’t fit into tables, then you need to design your database structure that will be complex and again difficult to handle.

\n

NoSQL

\n

NoSQL commonly referred to as “Not Only SQL”. With NoSQL, unstructured ,schema less data can be stored in multiple collections and nodes and it does not require fixed table sachems, it supports limited join queries , and we scale it horizontally.

\n

Benefits of NoSQL

\n

highly and easily scalable

\n

Relational database or RDBMS databases are vertically Scalable When load increase on RDBMS database then we scale database by increasing server hardware power ,need to by expensive and bigger servers and NoSQL databases are designed to expand horizontally and in Horizontal scaling means that you scale by adding more machines into your pool of resources.

\n

Maintaining NoSQL Servers is Less Expensive

\n

Maintaining high-end RDBMS systems is expensive and need trained manpower for database management but NoSQL databases require less management. it support many Features like automatic repair, easier data distribution, and simpler data models make administration and tuning requirements lesser in NoSQL.

\n

Lesser Server Cost and open-Source

\n

NoSQL databases are cheap and open source. NoSql database implementation is easy and typically uses cheap servers to manage the exploding data and transaction while RDBMS databases are expensive and it uses big servers and storage systems. So the storing and processing data cost per gigabyte in the case of NoSQL can be many times lesser than the cost of RDBMS.

\n

No Schema or Fixed Data model

\n

NoSQL database is schema less so Data can be inserted in a NoSQL database without any predefined schema. So the format or data model can be changed any time, without application disruption.and change management is a big headache in SQL.

\n

Support Integrated Caching

\n

NoSQL database support caching in system memory so it increase data output performance and SQL database where this has to be done using separate infrastructure.

\n

Limitations & disadvantage of NoSQL

\n
    \n
  1. NoSQL database is Open Source and Open Source at its greatest strength but at the same time its greatest weakness because there are not many defined standards for NoSQL databases, so no two NoSQL databases are equal
    2. \n
  2. No Stored Procedures in mongodb (NoSql database).
    3. \n
  3. GUI mode tools to access the database is not flexibly available in market
    4. \n
  4. too difficult for finding nosql experts because it is latest technology and NoSQL developer are in learning mode
    5. \n
\n

Conclusion

\n

RDBMS and NoSQL both dbs are great in data management and both are used to keep data storage and retrieval optimized and smooth. It’s hard to say which technology is better so developer take decision according requirement and situations

\n","frontmatter":{"date":"April 28, 2015","updated_date":null,"description":"Learn about RDBMS and NoSQL Database systems, their differences, benefits and limitations","title":"RDBMS vs NoSQL","tags":["Database"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/27a4b3387143bba7cab9a1b54834454d/7d145/rdbms-vs-nosql.png","srcSet":"/static/27a4b3387143bba7cab9a1b54834454d/69585/rdbms-vs-nosql.png 200w,\n/static/27a4b3387143bba7cab9a1b54834454d/497c6/rdbms-vs-nosql.png 400w,\n/static/27a4b3387143bba7cab9a1b54834454d/7d145/rdbms-vs-nosql.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"With Information Technology becoming more and more Cloud based nowadays (due to industry demanding reliability and scalability in their…","fields":{"slug":"/engineering/cloud-storage-vs-traditional-storage/"},"html":"

With Information Technology becoming more and more Cloud based nowadays (due to industry demanding reliability and scalability in their infrastructure), the Cloud storage system has become a very feasible solution. Various organizations are migrating their data to cloud storage, due to a few simple reasons. They want data to be easily accessible, cost effective and reliable.

\n

**How is Cloud storage better than any traditional  data storage**

\n\n

**Use Case**

\n

LoginRadius identity storage provides the above solution, LoginRadius is managing its infrastructure on the cloud and has never experienced data breaches or down-times. Infrastructure that makes sure you retain certain vital attributes in the storage is critical, this necessitates your user's identities being stored in an extremely reliable system such as is implemented with LoginRadius identity storage. Utilizing some extremely robust cloud storage providers(Microsoft Azure) LoginRadius offers top of the line availability and reliability of user data.

\n","frontmatter":{"date":"April 21, 2015","updated_date":null,"description":null,"title":"Cloud storage vs Traditional storage","tags":["Cloud","Storage"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/1af61cfd21d04083f6850cef32d95d7f/7d145/cloud-vs-traditional-storage-1.png","srcSet":"/static/1af61cfd21d04083f6850cef32d95d7f/69585/cloud-vs-traditional-storage-1.png 200w,\n/static/1af61cfd21d04083f6850cef32d95d7f/497c6/cloud-vs-traditional-storage-1.png 400w,\n/static/1af61cfd21d04083f6850cef32d95d7f/7d145/cloud-vs-traditional-storage-1.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and…","fields":{"slug":"/engineering/getting-started-phonegap/"},"html":"

PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and quickly generate out various mobile compatible apps. This prevents your developers from having to learn and understand multiple platform specific languages and instead use the PhoneGap framework which is based in HTML to create the app and then generate it into any one of the following platforms:

\n
    \n
  1. iOS
    2. \n
  2. Android
    3. \n
  3. Windows Phone
    4. \n
  4. Windows
    5. \n
  5. Firefox OS
    6. \n
  6. Amazon Fire OS
    7. \n
  7. Blackberry
    8. \n
\n

With time saved on learning development languages for the above platforms your team can focus on the features of your app.

\n

Setting up your Environment

\n
    \n
  1. Download and install node.js, This will be used to install the Cordova/PhoneGap framework.
    2. \n
  2. Download and install a Git Client, This is used by the Cordova/PhoneGap framework when creating projects.
    3. \n
  3. Open command prompt and verify that both of the above systems have been installed by running npm and git.
    4. \n
  4. Install the Cordova/PhoneGap system by running the following command in your command prompt (Note: this may take a few minutes)
    5. \n
\n
C:\\>npm install -g cordova
\n

Verify your installation of Cordova/PhoneGap by running cordova in command prompt. This should display a list of the available Cordova commands.

\n

Setting up your Project

\n
    \n
  1. Create a directory which will contain your PhoneGap/Cordova project code.
    2. \n
  2. Open the created directory in command line and create a project with the command cordova create < sitename >
    3. \n
\n
C:\\>rootdir\\cordova create FirstSite
\n
    \n
  1. \n

    This will create a project in the root folder with the specified site-name. This project will contain:

    \n
      \n
    1. \"hooks\" directory- Contains special scripts that can be used to customize Cordova commands.
      2. \n
    2. \"platforms\" directory- This contains the app specific projects that you will include below.
      3. \n
    3. \"plugins\" directory- Contains add-on code for interfacing with native features. You can create your own custom interface or use one of pre-compiled plugins.
      4. \n
    4. \"www\" directory- Contains the PhoneGap/Cordova structure and some standard js and css files.
      5. \n
    5. config.xml file- This file contains meta data for controlling common features of your apps like the app title, description and author.
      6. \n
    \n
    2. \n
  2. \n

    Add platforms to the project with the cordova platform add command. Note: adding platforms requires that the relevant dependencies are installed in your system for example adding android requires that you have installed the Android SDK. Available platforms for a windows environment are:

    \n\n

    And for Mac:

    \n\n
    C:\\>rootdir\\cordova platform add android
    \n
    3. \n
  3. \n

     You can now get a list of the added platforms by running the following command:

    \n
    C:\\>rootdir\\cordova platform ls
    \n
    4. \n
  4. \n

    You can remove a specific platform from the list with the following command:

    \n
    C:\\>rootdir\\cordova platform remove android
    \n
    5. \n
  5. Once you have added in the desired platforms build the platform specific apps by running the following command:
    6. \n
\n

Note: Building platforms requires that the relevant dependencies are installed in your system for example building android requires that you have installed the Android SDK

\n
C:\\>rootdir\\cordova build
\n
    \n
  1. You can use these built projects found in the \"platforms\" directory in platform specific IDEs or emulate the projects directly with the following command:
    2. \n
\n
C:\\>rootdir\\cordova emulate android
\n

At this point you have a basic PhoneGap project configured and your desired platforms added and you can get started with adding or building out additional features and content in the \"www\" directory and run the command in step 7 above to create the platform specific projects. You can find detailed instructions on setting up additional features and implementing PhoneGap on the PhoneGap site.

\n","frontmatter":{"date":"March 31, 2015","updated_date":null,"description":null,"title":"Getting Started with Phonegap","tags":["Engineering","PhoneGap","Mobile"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d8c820456aa3a57aa0a36aab4d27f8fc/40725/dev-sprites2.png","srcSet":"/static/d8c820456aa3a57aa0a36aab4d27f8fc/69585/dev-sprites2.png 200w,\n/static/d8c820456aa3a57aa0a36aab4d27f8fc/497c6/dev-sprites2.png 400w,\n/static/d8c820456aa3a57aa0a36aab4d27f8fc/40725/dev-sprites2.png 580w","sizes":"(max-width: 580px) 100vw, 580px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a  popup by Zoie Carnegie. If not, you…","fields":{"slug":"/engineering/animating-simple-css-popup-tutorial/"},"html":"

By now you’ve probably seen the cool and simple way(not to mention, without using jQuery) of creating a  popup by Zoie Carnegie. If not, you can click this link to go and follow that tutorial. Cool?

\n

Once you’re done creating your css popup. We’re now going to animate it with CSS3. Why? because we’re tired of seeing things that just pop onto users screen and you don’t know where it came from. Also, to make it fun for your users. Let's get started.

\n

First things first. CSS3 animations don't work on \"display: none\" or \"block\". So, we need to modify Zoie's code to not do that and just simply add and remove the relevant class.

\n
// Close Popup Event\nclosePopup.onclick = function() {\n    overlay.className = ''; /*This removes all classes, use at your own risk*/\n    popup.className = ''; /*This removes all classes, use at your own risk*/\n};\n// Show Overlay and Popup\nbutton.onclick = function() {\n    overlay.className = 'show';\n    popup.className = 'show';\n}
\n

We need to modify the CSS too.

\n
#popup {\n  visibility: hidden;\n  opacity: 0;\n  z-index: -1; /*hide it in the back of the page*/\n}\n#overlay {\n  visibility: hidden;\n  opacity: 0;\n  z-index: -1; /*hide it in the back of the page*/\n}
\n

Now, why did I do that? Since, we can't use display: none, we need to find a way to hide it differently. CSS3 animation works perfectly with \"visibility: hidden\", \"opacity\" and \"z-index\". I know it's a bit more CSS but, I assure you that it's worth it.

\n

Slide Down

\n

Let's start with a simple one. Sliding them pops, yo!

\n
/*Add defaults*/\n#popup {\n  top: -50%; /*Put it on the very top*/\n  transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n   top: 50%; /*slide it down smoothly*/\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

The \"top: -50%\" will push our pop-up outside while \"top: 50%\" will bring it back to the center. Now, combine it with a CSS transition and it will gracefully slide down along with the fading effect of opacity. Pretty neat huh? How about making it pop up from the center of the page? I mean it's called \"pop-up\" for a reason right?

\n

We can achieve that effect by using the same code we made earlier. Just change the \"top: -50%\" to \"transform: scale(0)\". This will scale our beloved pop-up to a small size. The showing it part will have to change too. Same as the default, change the \"top: 50%\" to \"transform: scale(1)\". This will then scale it back to original size.

\n
/*Add defaults*/\n#popup {\n  transform: scale(0) /*scale it to a smaller size*/\n  transition: all .5s ease-in-out; /*make it smooth*/\n}\n/*Now show it*/\n#popup.show {\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n  transform: scale(1) /*scale it to a default size*/\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Want to try something different than that? I got your back.

\n

Swirly Pop

\n

Have you heard of CSS keyframes? We're going to use that to achieve what we want. I just want to say first that CSS keyframes do not work on older browsers like IE8 and IE9. Use this trick at your own risk.

\n

The keyframes code looks like this

\n
@keyframes pop-swirl {\n  0% {\n    transform: scale(0) rotate(360deg);\n  }\n  60% {\n    transform: scale(0.8) rotate(-10deg);\n  }\n  100% {\n    transform: scale(1) rotate(0deg);\n  }\n}
\n

The word \"pop-swirl\" is the variable we need to call later on to trigger that animation or keyframe. You can name this to whatever you want, there are no restrictions. The animation works by specifying your start and end points. There's 2 ways you can do that, either by using \"from\" and \"to\" or \"0%\" to \"100%\". I prefer the 2nd way because you can add like 100 keyframes to it.

\n

Calling that code will need the help of an \"animation\" tag. This is like a transition but more advanced. I also like to point out that right now, It's not fully supported yet but you can still use it by appending your vendor prefix like \"-webkit-\". Like this...

\n
\\-webkit-animation: pop-swirl 1s ease forwards;
\n

Let's break this down

\n

-webkit- = Vendor prefix.
\nanimation = Used to call the keyframes.
\npop-swirl = The variable we used on keyframes.
\n1s = Duration of animation.
\nease = Timing function. This can also make the animation smoother.
\nforwards = This is the animation play state.

\n

Using the same method as Slide Down and Pop In. We just need to remove top or transform tags and add the animation tag in it.

\n
/*Don't need the defaults*/\n/*Now show it*/\n#popup.show {\n  -webkit-animation: pop-swirl 1s ease forwards; /*trigger the keyframe*/\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n}\n#popup.show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Bonus!

\n

The Anvil Effect

\n

Let's shock your screen with this heavy pop-up. You can achieve the anvil effect by using this code.

\n
@keyframes anvil {\n  0% {\n    transform: scale(5) rotate(0);\n    opacity: 0;\n    box-shadow: 0 0 0 rgba(241, 241, 241, 0);\n  }\n  50% {\n    transform: scale(1) rotate(-0.2deg);\n    opacity: 1;\n    box-shadow: 0 0 0 rgba(241, 241, 241, 0.5);\n  }\n  75% {\n    transform: scale(1) rotate(0.2deg);\n    opacity: 1;\n    box-shadow: 0 0 250px rgba(241, 241, 241, 0.5);\n  }\n  100% {\n    transform: scale(1) rotate(0);\n    opacity: 1;\n    box-shadow: 0 0 500px rgba(241, 241, 241, 0);\n  }\n}\n#popup[data-pop="anvil"].show {\n  -webkit-animation: anvil 1s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;\n  visibility: visible;\n  z-index: 200;\n  opacity: 1;\n}\n#popup[data-pop="anvil"].show ~ #overlay {\n  opacity: 1;\n  visibility: visible;\n  z-index: 100;\n}
\n

Of course a tutorial won't be complete without a demo.

\n

Slide Down Demo Pop In Demo Pop Swirl Demo Anvil Demo

\n

And there you have it. A little something to spice up your pop-up game. I hope this helps you woo your users and entertain them. Until next time. Cheers.

\n","frontmatter":{"date":"March 23, 2015","updated_date":null,"description":"Learn how to animate the modal popup using CSS keyframe","title":"Animate the modal popup using CSS","tags":["Slide","CSS","Swirl","PopUp"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/0e6aaee6701ea5637112edaa0ee392df/2a4de/simplepop.png","srcSet":"/static/0e6aaee6701ea5637112edaa0ee392df/69585/simplepop.png 200w,\n/static/0e6aaee6701ea5637112edaa0ee392df/497c6/simplepop.png 400w,\n/static/0e6aaee6701ea5637112edaa0ee392df/2a4de/simplepop.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that…","fields":{"slug":"/engineering/css-responsive-grid/"},"html":"

I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that's the problem, \"automatically\". That means you have no control over it when it messes things up. Even if you do, you might mess things up for other stuff too.

\n

This is why controlling your own code is better than letting other apps do it. Just like what my mentor said, \"Don't let the apps write your own code, they screw it up\".

\n

Let's get started

\n

Let's make a responsive grid without using any crazy percentages or complicated margins. Sounds cool? Good.

\n

By now you know how complicated it is to calculate all the width and margins to make sure they correspond with each other. Not to mention that you need to use percentages on both of them which sometimes doesn't work, especially with our friend IE8.

\n

What if we create a grid that doesn't need margins for spacing? Or using percentages to separate objects? Sounds awesome right? No more calculating for the right percentages and getting crazy numbers.

\n

Let's start with 4 grids first. So 100 / 4 = 25 then add a percentage (%) sign and we get 25% for our 4 grid system. No crazy numbers there, but we need spacing. To add spaces between those elements just add padding on left and right. Pixels or percent, it's up to you. Yes, yes, padding adds width but, if you add \"box-sizing: border box\" on our lovely grid, the padding will start respecting your decision to add a width of 25% and start pushing everything inside.

\n

\n \n \n

\n

There you have it, Spacing. By now your CSS code will look like this.

\n
div {\n    width: 25%;/*4 grid system*/\n    padding: 0 5px;/*spacing*/\n    box-sizing: border-box;/*removes the added with from padding*/\n    float: left; /*put them side by side*/\n}
\n

Problem

\n

Of course, there's no perfect code. Since we're using padding on both left and right. you'll see some spacing too on the left and right side of your website. For example, I used 5px padding. That means I will have a 5px offset on the left and right side of my screen. It doesn't align with my site anymore.

\n

Solution

\n

To tackle this problem we need to add a margin on the parent of our grid. Since my padding is 5px, I need to add a -5px margin on left and right to stretch it back to it's intended size. So our code will look like this now.

\n
parent {\n    margin: 0 -5px;\n}\nparent div {\n    width: 25%;/*4 grid system*/\n    padding: 0 5px;/*spacing*/\n    box-sizing: border-box;/*removes the added with from padding*/\n    float: left; /*put them side by side*/\n}
\n

 I'd like to also point out that if your parent has a width (which it doesn't really need because our grid css will add a width to the parent), the negative margins won't work. So, be careful.

\n

Another thing to watch out for, because we're using floats, we will also need to use a clearfix hack on our parent.

\n

Using the simple code we learned today will create all the grids you want.

\n

1 = 100%
\n2 = 50%
\n3 = 33.33%
\n4 = 25%
\n5 = 20%
\n6 = 16.66%
\n7 = 14.28%
\n8 = 12.5%
\n9 = 11.11%
\n10 = 10%

\n

and so on.

\n

See it on codepen.

\n

And this is where it ends. I hope this will help you easily create a grid in the near future. If you have any other tips, leave it in the comments and I'll be happy to try it out. Cheers.

\n","frontmatter":{"date":"March 16, 2015","updated_date":null,"description":null,"title":"CSS Responsive Grid, Re-imagined","tags":["CSS","Grid","Responsive"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/61bc9402fec623803bf04d21e948e84a/2a4de/desdev.png","srcSet":"/static/61bc9402fec623803bf04d21e948e84a/69585/desdev.png 200w,\n/static/61bc9402fec623803bf04d21e948e84a/497c6/desdev.png 400w,\n/static/61bc9402fec623803bf04d21e948e84a/2a4de/desdev.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.

\n

We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.

\n

The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.

\n

So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.

\n

The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":948,"currentPage":159,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}